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

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

        //Resize elements
        this.resizeElements();

        //Initialize map
        init();
        this.displayOverviewMap();
        showApplication();
    },
	
    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;

    },

    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){
                              
                /*
                              $('divLlenyosesTitle').style.backgroundColor = "#e5ba80";
                              $('divTopoTitle').style.backgroundColor = "#e5ba80";
                              $('divLayerTitle').style.backgroundColor = "#e5ba80";                          

                              
                              $('divLlenyosesTitle').style.color = "#44403b";
                              $('divTopoTitle').style.color = "#44403b";
                              $('divLayerTitle').style.color = "#44403b";
                              */
                $('divEstudiTitle').style.color = "#44403b";
                $('divCreditTitle').style.color = "#44403b";
                $('divEstudiTitle').style.backgroundColor = "#e5ba80";
                $('divCreditTitle').style.backgroundColor = "#e5ba80";
                              

                $('divEstudiSection').style.overflow = "auto";
                $('divCreditsSection').style.overflow = "auto";
                $('divLayerSection').style.overflow = "auto";

                              

                //això arregla el tembleque
                $('divLlenyosesTitle').style.overflow = "auto";
                $('divTopoTitle').style.overflow = "auto";
                $('divLayerTitle').style.overflow = "auto";
                             
                             
                             
            },
            alwaysHide:false,
            display: displayed,
            fixedHeight: height
        }, $('divMainLeft'));
    },

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

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

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

        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("divTitleLlenyosa",240,24,lMainRight+300,80);
        this.sizeElement("divBaseLayerSwitcher",200,30,wMainRight-200,10);
        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("divMapLegendContainer",false,false,wContainer-wMapLegendContainer,hBanner+hToolbar+margin+hTabs+marginMapLegend);
        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("divLlenyosesSection", false, hSections, 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 - 45);
        this.sizeElement("divBaseLayerSwitcher",200,30,wMainRight-200,10);

        //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("divMapLegendContainer",false,false,wContainer-wMapLegendContainer,hBanner+hToolbar+margin+hTabs+marginMapLegend);
        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);

    },

  
    initializeWindows: function(){

	
        MochaUI.overViewMapWindow = function(){
            new MochaUI.Window({
                id: 'divOverviewMapContainer',
                title: 'Mapa de referència',
                loadMethod: 'xhr',
                contentURL: './sections/section.overviewmap.php',
                //content: document.getElementById('divOverviewMap'),
                onContentLoaded: function(){
                    new Request({
                        url: 'js/mi.js',
                        method: 'get',
                        onSuccess: function() {
                            this.windowEl.getElement('.mochaCloseButton').style.backgroundImage = "url('img/accordion/expanded.gif')";
                            UI.ovmWindowLoaded = true;
                        /*MI.createOverViewMap();*/
                        }.bind(this)
                    }).send();
                },
                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();
	
        MochaUI.legendWindow = function(){
            new MochaUI.Window({
                id: 'divMapLegendContainer',
                title: 'Recobriment',
                loadMethod: 'xhr',
                contentURL: './sections/section.legend.php',
                //content: document.getElementById('divOverviewMap'),
                onContentLoaded: function(){
                    new Request({
                        url: 'js/mi.js',
                        method: 'get',
                        onSuccess: function() {
                            this.windowEl.getElement('.mochaCloseButton').style.backgroundImage = "url('img/accordion/expanded.gif')";
                            UI.ovmWindowLoaded = true;
                        /*MI.createOverViewMap();*/
                        }.bind(this)
                    }).send();
                },
                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: 'legendWindow',
                width: 152,
                height: 108,
                padding: {
                    top: 2,
                    right: 12,
                    bottom: 10,
                    left: 2
                },
                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.legendWindow();
    },

    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";
            $('divMapLegendContainer').style.display = "block";
            map.events.triggerEvent("showmap");
        }else{
            $('divOverviewMapContainer').style.display = "none";
            $('divMapLegendContainer').style.display = "none";
            map.events.triggerEvent("hidemap");
        }
    },

    displayLayersManagerDiv: function(){
        if(this.getAccordion.previous != this.divLayersManagerPosition)
            this.getAccordion().display(this.divLayersManagerPosition);
          
    }


}

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

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

function showInfo(){
    if(!($("divTab1").className.toString().contains("tabbertabhide"))){
        UI.changeTab();
        this.tabber.tabberNav.tabber.tabShow(1);
    }
		
}

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

function showApplication(){
    //sets view after loading components
    $("divMainLoading").style.display = "none";
    $("divMain").style.visibility = "visible";
}

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