Event.observe(window, 'load', function() {
    if ($('flag_local')) {
        $('flag_local').observe('click', function(event) {
            show_countries();
        });
    }
});


function show_countries() {
    var top = $('flag_local').getHeight() + $('flag_local').cumulativeOffset()[1];
    var left = $('flag_local').cumulativeOffset()[0];
    
    Event.stopObserving($('flag_local'), 'click');
    
    $('flag_local').onclick = '';
    
    $('flag_local').observe('click', function(event) {
        hide_countries();
    });
    
    
    var flagsel = new Element('div', {'id': 'flagsel'});
    
    flagsel.setStyle({
        'padding': '5px',
        'top': top + 5 + 'px',
        'left': left + 'px',
        'backgroundColor': 'white',
        'border': 'solid 1px black',
        'position': 'absolute',
        'display': 'block'
    });
    
    flagsel.hide();
    
    flagsel.innerHTML = '<a href="javascript:void(0)" onClick="javascript: select_country(\'CAN\')"><img src="' + base_uri + 'images/flags/can.png" border="0" /> CAN</a><br />\n' +
                        '<a href="javascript:void(0)" onClick="javascript: select_country(\'USA\')"><img src="' + base_uri + 'images/flags/usa.png" border="0" /> USA</a>';
    
    document.body.appendChild(flagsel);
    
    flagsel.show();
        
    Effect.BlindDown(flagsel, {duration: 1.0});
}

function hide_countries() {
    Effect.BlindUp('flagsel', {
       duration: 1.0,
       afterFinish: function() {
           document.body.removeChild($('flagsel'));
       }
    });
    
    Event.stopObserving($('flag_local'), 'click');
    
    $('flag_local').observe('click', function(event) {
        show_countries();
    });
}

function select_country(con) {
    new Ajax.Request(base_uri + 'index.php?location=' + con, {
      method: 'get',
      onSuccess: function() {
          location.reload();
      }
    });
}

function popup(id_postfix, width, height, title, content) {
    if ($('popup-' + id_postfix))
        return;
    
    var box = new Element('div', {
        'id': 'popup-' + id_postfix
    });
    
    if (width == null)
        width = 300;
    
    if (height == null)
        height = 300;
    
    if (title == null)
        title = '';
    
    if (content == null)
        content = '';
    
    Element.setStyle(box, {
        'width': width + 'px',
        'position': 'absolute',
        'top': (Element.positionedOffset($('design-board')).top-75) + 'px',
        'left': (Element.positionedOffset($('design-board')).left-75) + 'px',
        'visibility': 'visible',
        'zIndex': 15000
    });
    
    var header = new Element('div', {
        'id': 'header-' + box.id
    });
       
    var contentArea = new Element('div', {
        'id': 'content-' + box.id
    });
    
    contentArea.setStyle({
        'width': width-4 + 'px',
        'height': height-24 + 'px',
        'backgroundColor': 'white',
        'border': '2px solid #818285',
//        'borderLeft': '2px solid #818285',
//        'borderRight': '2px solid #818285',
        'overflow': 'auto',
        'textAlign': 'left'
    });
    
    var left_corner = new Element('div');
    var middle = new Element('div');
    var middle_content = new Element('div');
    var right_corner = new Element('div');
    var close_button = new Element('div'); 
    var minimize_button = new Element('div');
    
    middle_content.innerHTML = title;
    
    Element.setStyle(header, {
       'width': width + 'px',
       'height': '24px'
    });
    
    Element.setStyle(left_corner, {
       'width': '41px',
       'height': '24px',
       'backgroundImage': 'url(' + base_uri + 'images/top_left.png)',
       'backgroundRepeat': 'no-repeat',
       'float': 'left',
       'display': 'block'
    });
    
    Element.setStyle(middle, {
       'width': width-82 + 'px',
       'height': '24px',
       'backgroundImage': 'url(' + base_uri + 'images/box_top.png)',
       'backgroundRepeat': 'repeat-x',
       'float': 'left',
       'display': 'block'
    });
    
    Element.setStyle(middle_content, {
       'width': width-82-22 + 'px',
       'height': '20px',
       'fontSize': '10px',
       'fontFamily': 'Verdana',
       'textAlign': 'left',
       'float': 'left',
       'display': 'block',
       'paddingTop': '6px',
       'overflow': 'hidden',
       'whiteSpace': 'nowrap'
    });
    
    Element.setStyle(close_button, {
       'width': '17px',
       'height': '18px',
       'backgroundImage': 'url(' + base_uri + 'images/close.png)',
       'backgroundRepeat': 'no-repeat',
       'float': 'left',
       'display': 'block',
       'marginTop': '4px'
    });
    
    Element.setStyle(right_corner, {
       'width': '41px',
       'height': '24px',
       'backgroundImage': 'url(' + base_uri + 'images/top_right.png)',
       'backgroundRepeat': 'no-repeat',
       'float': 'left',
       'display': 'block'
    });
    
    minimize_button.observe('click', function() {
        Effect.toggle(contentArea.id, 'blind', {
            duration: 1.0,
            afterFinish: function() {
                contentArea.setStyle({
                   'overflow': 'auto' 
                });
            }
        });
    });
    
    minimize_button.setStyle({
       'width': '17px',
       'height': '18px',
       'backgroundImage': 'url(' + base_uri + 'images/minimize.png)',
       'backgroundRepeat': 'no-repeat',
       'float': 'right',
       'display': 'block',
       'marginTop': '4px',
       'marginRight': '3px'
    });
    
    close_button.observe('click', function() {
        Effect.Fade(box, {
            duration: 1.0,
            afterFinish: function() {
                document.body.removeChild(box);
            }
        });        
    });
    
    right_corner.appendChild(close_button);
    
    header.appendChild(left_corner);
    header.appendChild(middle);
    middle.appendChild(middle_content);
    middle.appendChild(minimize_button);
    header.appendChild(right_corner);
    
    
    box.appendChild(header);
    
    header.observe('mousedown', function(event) {
        
        var drag = new Draggable(box, {
            ghosting: false,
            zindex: function() {
               var all = document.getElementsByTagName('popup-*');

               var z = [];

               for (var i=0; i<all.length; i++) {        
//                   if (all[i].id.substr(0,6) == 'popup-') {
                       //alert(all[i].style.zIndex);
                       z.push(all[i].style.zIndex);
//                   }
               }

               if (z.length > 0) {
                   z.sort();
                   z.reverse();

                   box.style.zIndex = (parseInt(z[0])+1);
               } else {
                   box.style.zIndex = 10000;
               }
            },
            onStart: function(draggable) {
               var all = document.getElementsByTagName('popup-*');

               var z = [];

               for (var i=0; i<all.length; i++) {        
//                   if (all[i].id.substr(0,6) == 'popup-') {
                       //alert(all[i].style.zIndex);
                       z.push(all[i].style.zIndex);
//                   }
               }

               if (z.length > 0) {
                   z.sort();
                   z.reverse();
                   draggable.element.style.zIndex = (parseInt(z[0])+1);
               }
            },
            onEnd: function (draggable) {
                draggable.destroy();
            }            
        });
        
        var all = document.getElementsByTagName('popup-*');

        var z = [];

        for (var i=0; i<all.length; i++) {        
//           if (all[i].id.substr(0,6) == 'popup-') {
               //alert(all[i].style.zIndex);
               z.push(all[i].style.zIndex);
//           }
        }

        if (z.length > 0) {
           z.sort();
           z.reverse();

           box.style.zIndex = (parseInt(z[0])+1);
        }
            
        header.observe('mouseup', function(event) {
            drag.destroy();
        });
    });
    
    box.observe('click', function() {
       var all = document.getElementsByTagName('*');
       
       var z = [];
       
       for (var i=0; i<all.length; i++) {        
           if (all[i].id.substr(0,6) == 'popup-') {
               //alert(all[i].style.zIndex);
               z.push(all[i].style.zIndex);
           }
       }
       
       if (z.length > 0) {
           z.sort();
           z.reverse();
           this.style.zIndex = (parseInt(z[0])+1);
       }
    });
    
    box.appendChild(contentArea);
    
    box.setOpacity(0.0);

    document.body.appendChild(box);
    
    var zindex = function() {
               var all = document.getElementsByTagName('*');

               var z = [];

               for (var i=0; i<all.length; i++) {        
                   if (all[i].id.substr(0,6) == 'popup-') {
                       //alert(all[i].style.zIndex);
                       z.push(all[i].style.zIndex);
                   }
               }

               if (z.length > 0) {
                   z.sort();
                   z.reverse();

                   return (parseInt(z[0])+1);
               } else {
                   return 15000;
               }
            };
            
    
    box.setStyle({'zIndex': zindex()});
    
    contentArea.innerHTML = content;
    
    Effect.Appear(box.id, {duration: 1.0});  
    
    
    return box;
}