var UI = {
	
    divInfoSectionPosition: 1,
    ovmWindowLoaded: false,
    tabber: null,
    initialize: function(){
        this.clearInputElements();
        this.initializeWindows();

        //Create tabs
        var tabberOptions = {
            'manualStartup':true,
            'addLinkId': true
        }
        tabber = tabberAutomatic("divTabsContainer",tabberOptions);

        //Resize elements
        this.resizeElements();

        //Initialize map
        //init();
        this.displayOverviewMap();
        this.displaySlideBar();
        loadHelp("planejament");
    },
	

	
    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.7;
        var hToolbar = 32;
		
        var hOverviewMap = 190;
        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;

        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 tabs = $$('div.tabbertab');
        //var hTab = hTabs - hTabsHeader - border;
        for (tab in tabs){
            this.sizeElement(tabs[tab].id,wMainRight,hMainRight-hTabs,false,false);
        }

        var hMap = hContainer - hBanner - hSubBanner - hToolbar - 3*margin - hTabs;
        this.sizeElement("divMap",false,hMap,false,false);
        this.sizeElement("linksInfo",false,hMap,false,false);
        this.sizeElement("divOverviewMapContainer",false,false,lMainRight,hContainer-hOverviewMap);
        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);
				
        /*var newWidth = (value) ? "80%" : "100%";
		var newLeft = (value) ? "20%" : "0";
		divMainRight.setStyle("width",newWidth);
		divMainRight.setStyle("left",newLeft);*/

        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 = 30;

        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 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);

        var tabs = $$('div.tabbertab');
        //var hTab = hTabs - hTabsHeader - border;
        for (tab in tabs){
            this.sizeElement(tabs[tab].id,wMainRight,hMainRight-hTabs,false,false);
        }

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

        //reposition the map/pic buttons (235 is the width of the buttons)
        this.sizeElement("divMapPicButtons", false, false, wMainRight-wButtons, false);

        //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("divRightTools",false,false,false,hMap)

        //}


        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 = ($("divTab1").className.toString().contains("tabbertabhide"));

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

        if ($("divTab1").className.toString().contains("tabbertabhide")){
            $('divOverviewMapContainer').style.display = "none";
        }else{
            $('divOverviewMapContainer').style.display = "block";
        }
      
    },

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

  
    displaySlideBar: function(){
        // transparency text and slidebar
        var divMain = $('divSlideBar');
  	    
        var spanSliderText = document.createElement("span");
        spanSliderText.className ="spanSliderText";
				
        var txtNode2 = document.createTextNode(ca.transparency);
        spanSliderText.appendChild(txtNode2);
				
        divMain.appendChild(spanSliderText);
				
        var spanSliderWrapper  = document.createElement("span");
        spanSliderWrapper.className = "spanSliderWrapper";
				
        var divSlider = document.createElement("div");
        divSlider.setAttribute('id', 'idSlider');
        divSlider.className = "slider";
        divSlider.setAttribute("class","slider");
				
        var divSliderInput = document.createElement("div");
        divSliderInput.setAttribute('id', 'idSliderInput');
        divSliderInput.className = "slider-input";
        divSliderInput.setAttribute("class","slider-input");
				
        divSlider.appendChild(divSliderInput);
        spanSliderWrapper.appendChild(divSlider);
        divMain.appendChild(spanSliderWrapper);

				
        slider = new Slider(document.getElementById("idSlider"), document.getElementById("idSliderInput"),'horizontal');
        slider.setValue(90);
        
        slider.onchange = function () {
            var newOpacity= slider.getValue()/100;
            eGV.getControl("controlTransparency").changeOpacities(newOpacity);
						
        };
    }
}

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

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

function showTab(index){// 0, 1

    if(!($("divTab1").className.toString().contains("tabbertabhide"))){
        //UI.changeTab();
        this.tabber.tabberNav.tabber.tabShow(index);
    }else	if(!($("divTab2").className.toString().contains("tabbertabhide"))){
        //UI.changeTab();
        this.tabber.tabberNav.tabber.tabShow(index);
    }
    UI.changeTab();
}

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


function showMap(){
    //UI.changeTab();
    this.tabber.tabberNav.tabber.tabShow(0);
		
}


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();
        }
    }
});