var UI = {
	
    divInfoSectionPosition: 1,
    ovmWindowLoaded: false,
    tabber: null,
    modalDiv: null,
    modalDivGoogleStreetView: null,
    initialize: function(){
        this.modalDiv = new modalDiv({
            id: "modalDiv"
        });

        this.modalDivGoogleStreetView = new modalDiv({
            id: "modalDivGoogle",
            headerCaption: "Google Street View (localització aproximada)"
        });
        this.clearInputElements();
        this.initializeWindows();

        //Resize elements
        this.resizeElements();

        //Initialize map
        //init();
        this.displayOverviewMap();
        loadCombos();
    //loadHelp("guia");
    },
	
    showLoading: function(id){
        var divTarget = $(id);

        if (!divTarget) return false;
        divTarget.setProperty("html", "");

        var divLoading = new Element("div",{
            "class":"divLoading"
        });

        var imgLoading = new Element("img",{
            "src":"img/utils/loading.gif",
            "class":"imgLoading"
        });


        var spanLoading = new Element("span",{
            "text": "Carregant...",
            "class":"spanLoading"
        });

        imgLoading.inject(divLoading);
        spanLoading.inject(divLoading);

        divLoading.inject(divTarget);

        return divLoading;

    },

    displayOverviewMap: function(){

        if(this.ovmWindowLoaded)
            MI.createOverViewMap();
        else
            setTimeout("MI.createOverViewMap()", 2000);

    },

    createAccordion: function(height){
        var displayed = 0;

        if(this.accordion){
            /*elements = this.accordion.elements;
          for (var i=0, len=elements.length; i<len; i++){
              if(elements[i].uid == this.accordionElement){
                  displayed = i;
                  break;
              }
              displayed = len;
          }*/
            displayed = this.accordion.previous;
        }

        this.accordion = new Accordion($$('h3.infoTitle'), $$('div.infoDiv'),{
            onActive: function( toggler, element){
                toggler.getElement("img").src = "./img/accordion/expanded.gif";
            } ,
            onBackground: function( toggler, element){
                toggler.getElement("img").src = "./img/accordion/collapsed.gif";
            },
            onComplete: function(element){
                $('divSearchTitle').style.overflow = "auto";
                $('divLayersTitle').style.overflow = "auto";
                $('divInfoTitle').style.overflow = "auto";
                $('divDisclaimerTitle').style.overflow = "auto";
            },
            alwaysHide:false,
            display: displayed,
            fixedHeight: height
        }, $('divMainLeft'));
    },

    getAccordion: function(){
        return this.accordion;
    },



    initializeFXs: function(){
        new Accordion($$('div#divBoxes h3'), $$('div#divBoxes div'));
    },

    clearInputElements: function(){
        var inputs = document.getElementsByTagName("input");
        var elem;
        for(var i = 0, len=inputs.length; i<len; i++){
            elem = inputs[i];
            if(elem.type == "text" || elem.type == "password")
                elem.value = "";
        }

        var combos = document.getElementsByTagName("select");
        for(i = 0, len=combos.length; i<len; i++){
            combos[i].value = 0;
        }
    },

    resizeElements: function(){
        if($("divMainLeft").style.display == 'none'){
            this.showEntireMap();
            return;
        }

        var hBanner = 76;
        var hSubBanner = 10;
        var wLogin = 325;

        var margin = 15;
        var mapRatio = 0.75;
        var hToolbar = 32;
		
        var hOverviewMap = 150;
        var wSplitter = 10;
        var hLeftHeader = 195;

        var hLeftHeaderSearchResults = 320;

        var wLoadingBar = 150;
        var hLoadingBar = 80;

        var wButtons = 350;
        var marginMapLegend = 50;
        var wMapLegendContainer = 190;
        var hTabs = 0;
		

        var wContainer = Math.floor(window.getWidth());
        var hContainer = Math.floor(window.getHeight());

        this.sizeElement("divBanner",wContainer,hBanner,false,false);
        var wMainLeft = wContainer - Math.floor(wContainer * mapRatio) - wSplitter;
        var hMainLeft = hContainer - hBanner - hSubBanner - 10*margin;
        //var hMainRight = hContainer - hBanner - hSubBanner - 2*margin;
        hMainRight = hMainLeft;

        this.sizeElement("divMainLeft",wMainLeft,hMainLeft,margin,margin);
		
        var wMainRight = wContainer - Math.floor(wContainer * (1 - mapRatio)) - 2*margin;
        var lMainRight = wMainLeft + wSplitter+ margin;
        this.sizeElement("divMainRight",wMainRight,hMainRight,lMainRight,margin);

        this.sizeElement("divBaseLayerSwitcher",200,30,wMainRight-200,0);
        this.sizeElement("divSlideBar",null,null,wMainRight-200,30);


        var hMap = hContainer - hBanner - hSubBanner - hToolbar - margin -10;
        
        this.sizeElement("divMap",null,hMap,false,0);
        this.sizeElement("linksInfo",false,hMap,false,false);
        this.sizeElement("divOverviewMapContainer",false,false,lMainRight,hContainer-hOverviewMap-40);
        this.sizeElement("divMapLoading",false,false,wMainRight-wLoadingBar,hMainRight-hLoadingBar-hTabs);
        this.sizeElement("divMapPicButtons", false, false, wMainRight-wButtons, margin/2);
	
        this.sizeElement("divRightTools",wMainRight-margin,false,false,hMap+(margin/2));
        this.sizeElement("divSplitter", wSplitter, hMainRight,wMainLeft+margin,margin);
        $("divSplitter").style.backgroundImage = "url('img/accordion/collapsed_right.gif')";
        var hSections = hContainer-hLeftHeader;
        this.createAccordion(hSections);
        this.sizeElement("tblTopo", false, hSections-60, false, false);
 		

        this.sizeElement("divLayerSection", false, hSections, false, false);
        this.sizeElement("divTopoSection", false, false, 5, 5);
        this.sizeElement("divLayerSection", wMainLeft-10, hSections, false, false);
        return false;
    },
	
    onMapLoaded: function(){
    },

    sizeElement: function(elId,width,height,left,top) {
        var el = $(elId);
        if (el) {
            if (width) el.style.width = width + "px";
            if (height) el.style.height = height + "px";
            if (left) el.style.left = left + "px";
            if (top) el.style.top = top + "px";
        }
        return el;
    },
	
    toggleLeftDiv: function(){
        var divMainLeft = $("divMainLeft");
		
        var value = divMainLeft.style.display == "none";
		
        var newDisplay = (value) ? "block" : "none";
        divMainLeft.setStyle("display",newDisplay);
				


        if(!value){
            this.showEntireMap();
        }else{
            this.resizeElements();
        }
        //eGV.getMap().redraw();
        var zoomLevel = eGV.getMap().getZoom();
        var center = eGV.getMap().getCenter();
        
        eGV.getMap().setCenter(center, zoomLevel);
    //eGV.getMap().zoomTo(zoomLevel);

    },

    showEntireMap: function(){
        var hBanner = 76;
        var hSubBanner = 0;
        var wLogin = 325;
        var margin = 15;

        var hToolbar = 32;
        var hOverviewMap = 150;
        var wSplitter = 10;

        var wLoadingBar = 150;
        var hLoadingBar = 80;

        var wButtons = 350;
	
        var hTabs = 30;

        var wContainer = Math.floor(window.getWidth());
        var hContainer = Math.floor(window.getHeight());

        this.sizeElement("divBanner",wContainer,hBanner,false,false);
        /*this.sizeElement("divSubBanner",wContainer-2*margin,hSubBanner,margin,hBanner);
      var leftLogin = wContainer-wLogin-2*margin;
      this.sizeElement("divSubBannerLogin", wLogin, false, leftLogin, false );
*/
        var marginMapLegend = 50;
        var wMapLegendContainer = 170;
	
        //var hMainRight = hContainer - hBanner - hSubBanner - margin;
        var hMainLeft = hContainer - hBanner - hSubBanner - 10*margin;
        var hMainRight = hMainLeft;
        var wMainRight = wContainer-wSplitter-2*margin;
        var lMainRight = wSplitter+margin;
        this.sizeElement("divMainRight", wMainRight, hMainRight, lMainRight, margin);
        //			this.sizeElement("divLlistEspecies.appendChild(link);",350,24,lMainRight+300,80);





        //if(!$("divTab1").className.toString().contains("tabbertabhide")){
        var hMap = hContainer - hBanner - hSubBanner - hToolbar - margin -10;
        this.sizeElement("divMap",false,hMap,false,0);
        //reposition the map overview window
        this.sizeElement("divOverviewMapContainer",false,false,lMainRight,hContainer-hOverviewMap-30);

        //reposition the map/pic buttons (235 is the width of the buttons)
        this.sizeElement("divMapPicButtons", false, false, wMainRight-wButtons, false);
        this.sizeElement("divRightTools",wMainRight-margin,false,false,hMap+(margin/2)-3);
        //we position the loading bar div
        this.sizeElement("divMapLoading",false,false,wMainRight-wLoadingBar,hMainRight-hLoadingBar-hTabs);
          
        this.sizeElement("divBaseLayerSwitcher",200,30,wMainRight-200,0);
        this.sizeElement("divSlideBar",null,null,wMainRight-200,30);


        //}

     
        this.sizeElement("divSplitter", wSplitter, hMainRight,margin,margin);
        //this.sizeElement("divSplitter", wSplitter, false, 1, false);

        $("divSplitter").style.backgroundImage = "url('img/accordion/collapsed_s.gif')";

      
    },

    showStatusText: function(e){

        var oDiv = e.target;

        var text;
        switch(oDiv.id){
            case "divSwitcherPic":
                text = locStrings._switcher_photo_tooltip;
                break;
            case "divSwitcherMap":
                text = locStrings._switcher_map_tooltip;
                break;
        /*
			case "divSwitcherBase":
				text = locStrings._switcher_base_tooltip;
			break;
			*/
        }

        var statusBar = eGV.getControl("stbar");
        if (statusBar){
            statusBar.show(text);
        }
        return false;
    },

    toggleBaseLayer: function(e){
        var oDiv = e.target;
        var divId = oDiv.id;
        var baseLayer;

        if (divId == "divSwitcherPic"){
            if ($("divSwitcherMap").hasClass("divSwitcherItemActive")) $("divSwitcherMap").removeClass("divSwitcherItemActive");
            $("divSwitcherPic").addClass("divSwitcherItemActive");
            baseLayer = "photo";
        } else if (divId == "divSwitcherMap"){
            if ($("divSwitcherPic").hasClass("divSwitcherItemActive")) $("divSwitcherPic").removeClass("divSwitcherItemActive");
            $("divSwitcherMap").addClass("divSwitcherItemActive");
            baseLayer = "map";
        }

        MI.switchBaseLayers(baseLayer);

    },

    showLoading: function(id){
        var divTarget = $(id);

        if (!divTarget) return false;
        divTarget.setProperty("html", "");

        var divLoading = new Element("div",{
            "class":"divLoading"
        });

        var imgLoading = new Element("img",{
            "src":"img/utils/loading.gif",
            "class":"imgLoading"
        });

        //var spanLoading = new Element("span",{"text":locStrings._generic_loading+"...","class":"spanLoading"});
        var spanLoading = new Element("span",{
            "text": "Carregant...",
            "class":"spanLoading"
        });



        imgLoading.inject(divLoading);
        spanLoading.inject(divLoading);

        divLoading.inject(divTarget);

        return divLoading;

    },

    initializeWindows: function(){

	
        MochaUI.overViewMapWindow = function(){
            new MochaUI.Window({
                id: 'divOverviewMapContainer',
                title: 'Mapa de referència',
                loadMethod: 'xhr',
                contentURL: './sections/section.overviewmap.php',
                onContentLoaded:function() {
                    this.windowEl.getElement('.mochaCloseButton').style.backgroundImage = "url('img/accordion/expanded.gif')";

                },


                onClose: function(e){
                    MochaUI.collapseToggle(this.windowEl);
                    this.isClosing = false;
                    if(this.isCollapsed)
                        this.windowEl.getElement('.mochaCloseButton').style.backgroundImage = "url('img/accordion/collapsed_right_s.gif')";
                    else
                        this.windowEl.getElement('.mochaCloseButton').style.backgroundImage = "url('img/accordion/expanded.gif')";

                    e = new Event(e).stop();
                },
                addClass: 'overViewWindow',
                width: 151,
                height: 100,
                padding: {
                    top: 12,
                    right: 12,
                    bottom: 10,
                    left: 12
                },
                resizable: false,
                maximizable: false,
                collapsible: false,
                contentBgColor: '#fff',
                shadowBlur: 6,
                useCanvasControls: false,
                footerHeight: 0,
                cornerRadius: 0,
                headerStartColor: [255,255,255],
                headerStopColor: [255,255,255]

            });
        }
        // Build windows onDomReady
        MochaUI.overViewMapWindow();
     
    },

    changeTab: function(){
        var map = eGV.getMap();
        /*var showMap = ($('divOverviewMapContainer').style.display == "none");*/
        var showMap = ($("divTab1").className.toString().contains("tabbertabhide"));

        /* for (var i=0, len=map.layers.length; i<len; i++) {
          if (map.layers[i].isVector){
              if(showMap)
                  map.layers[i].display(true);
              else
                  map.layers[i].display(false);
          }   
      }*/

        if(showMap){
            $('divOverviewMapContainer').style.display = "block";
            map.events.triggerEvent("showmap");
        }else{
            $('divOverviewMapContainer').style.display = "none";
            map.events.triggerEvent("hidemap");
        }
    },

    displayInfoSectionDiv: function(){
        if(this.getAccordion.previous != this.divInfoSectionPosition)
            this.getAccordion().display(this.divInfoSectionPosition);
    },


    showLoadingPanel: function(){

        var wWidth = $(window).getWidth();
        var wHeight = $(window).getHeight();


        $("divLoadingAppBack").setStyle("width",wWidth);
        $("divLoadingAppBack").setStyle("height",wHeight);
        $("divLoadingApp").setStyle("display","block").fade(0.6);
       


    },

    closeLoadingPanel: function() {
        $("divLoadingApp").setStyle("display","none").fadeOut(3);

    }



}

function initializeWrapper(){
    return UI.initialize();
}

function changeTabWrapper(){
    return UI.changeTab();
}



function textosCallback(XHR){
    $('tabbertab_2').innerHTML = XHR.responseText;
}





window.addEvent('domready', initializeWrapper);
window.addEvent('resize', function(event){
    if (UI) UI.resizeElements();
});
window.addEvent('load', function(event){
    if (UI){
        if(Browser.Engine.trident==true){ // just for IE
            UI.resizeElements();
        }
    }
});