/*Javascript to control look and feel */
window.onresize = handleResize;
//docking main menu
//default is RIGHT
var mainMenuDockMode = "LEFT";
function lookAndFeelInit(){
    mainMenuDockMode = "LEFT";
    document.getElementById("LegendPanel").style.display = "block";  
    //document.getElementById("DrawPanel").style.display = "none";  
    arrangeMenus();
    setFocus("txtAddr");   
}
function MyWindow(){
    this.getHeight = getHeight;
    this.getWidth = getWidth;
function getHeight() {
	// Standard browsers (Mozilla, Safari, etc.)
	if (self.innerHeight)
		return self.innerHeight;
	// IE 6
	if (document.documentElement && document.documentElement.clientHeight)	
		return document.documentElement.clientHeight;
	// IE 5
	if (document.body)
		return document.body.clientHeight;
	// Just in case.
	return 0;
}
function getWidth() {
	// Standard browsers (Mozilla, Safari, etc.)
	if (self.innerHeight)
		return self.innerWidth;
	// IE 6
	if (document.documentElement && document.documentElement.clientWidth)
		return document.documentElement.clientWidth;
	// IE 5
	if (document.body)
		return document.body.clientWidth;
	// Just in case.
	return 0;
}
} //end of myWIndow class
function getMapHeight(){ 
    var myWindow = new MyWindow();
    var h = myWindow.getHeight();
   
	return ( h - document.getElementById('TopPanel').offsetHeight - 10 );	
	
}
function getWindowWidth(){
    var myWindow = new MyWindow();
    var w = myWindow.getWidth();
    //alert (w);
	return (w - 5);	
	
}

function setElementHeight(id, theHeight){
    if (theHeight < 0){
        theHeight = 0;
    }
    try {
        var ele = document.getElementById(id);
        if (ele){
            ele.style.height = theHeight + 'px';
        }
    } catch (ex){
        //alert (ex.message);
    }
}
function setElementWidth(id, theWidth){
    if (theWidth < 0){
        theWidth = 0;
    }
    try {
        var ele = document.getElementById(id);
        if (ele){
            ele.style.width = theWidth + 'px';
        }
    } catch (ex){
    
    }
}
//return the offsetHeight of the element. 
//Note:If the element is not display (display = none in CSS class), height = 0
function getEleHeight(eleId){
    
    return document.getElementById(eleId).offsetHeight;
}
function getEleWidth(eleId){
    
    return document.getElementById(eleId).offsetWidth;
}
function resizeLegend(){
    var theHeight = getMapHeight();    
    setElementHeight('LegendPanel',theHeight );   
    var contents = document.getElementById('LegendPanel').getElementsByTagName('div');
    	
    for (var i = 0; i< contents.length; i++){    	
        if (contents[i].className == "ActiveMenu" || contents[i].className == "NonActiveMenu"){	  
            contents[i].style.height = theHeight;
            
            resizeAMenu(contents[i], theHeight);
            
        }
    }
}
function resizeAMenu(theMenu, theHeight){
    var contents = theMenu.getElementsByTagName('div');
    var handler;
    var menuContent;
    for (var i = 0; i< contents.length; i++){    	
        if (contents[i].className == "MenuHandlerWraper"){
            handler = contents[i];
        }
        if (contents[i].className == "MenuContent" || contents[i].className == "MenuContentOverFlow"){
            menuContent = contents[i];
        }
    }
    if (handler != null && menuContent != null){
        menuContent.style.height = (theHeight - handler.offsetHeight) + 'px';   
    }
    
    
}
function resizeMainMenu(){
    var theHeight = getMapHeight();    
    setElementHeight('MainMenuPanel',theHeight );   
    
    var contentH = theHeight - getEleHeight('MenuHandlerWraper');
	setElementHeight('MainMenuContent',contentH); 
	  
	var tabNagWraperH = getEleHeight('TabNagWraper');	
	
	var tabContentH = contentH- tabNagWraperH  ;
	setElementHeight('TabContent',tabContentH);   	
	
	    
    	
        var tabContents = document.getElementById('TabContent').getElementsByTagName('div');
    	
        for (var i = 0; i< tabContents.length; i++){    	
            if (tabContents[i].className == "ActiveTabLayer" ){	  
                var tabContent =       tabContents[i];	                 
                resizeLayerContent(tabContent, tabContentH);
            }
        }
   
}
//Assume that there is 2 child div inside this tab
//div 1: className = "LayerTitlePanel"
//div 2: className = "TabLayerContent"
function resizeLayerContent(tabDiv, theHeight){
    var childDivs = tabDiv.getElementsByTagName('div');
    var titleH = 0;
    for (var i = 0; i < childDivs.length; i++){
        var childDiv = childDivs[i];
        if (childDiv.className == "LayerTitlePanel"){
            //alert (childDiv.id);
            var id = childDiv.id + "";
            titleH = getEleHeight(id);                
            //alert (id + " height:" + titleH);            
        }
        if (childDiv.className == "TabLayerContent"){            
            
            childDiv.style.height = (theHeight - titleH - 2 ) + 'px';
        }
    }
}
function resizeTopPanel(){
    document.getElementById('TopPanel').style.width = getWindowWidth() +    'px';    
}
function handleResize() {
    dockMainMenu(mainMenuDockMode);
    //resizeMap();
    resizeMainMenu();
    
    resizeLegend();
    resizeTopPanel();
    arrangeMenus();
}
function resizeMap(theW, theH){
    
    if (map){
            map.Resize(theW, theH);
            if (isMiniMapVisible()){
                showMiniMap(true);  
            }
    }
}
function isMiniMapVisible(){
    return document.getElementById("chkShowMiniMap").checked;
}
function showMiniMap(visible){
    var miniMapH = 200;
    if (visible == true){
        map.ShowMiniMap(12,getMapHeight()-miniMapH);      
    }else {
        map.HideMiniMap();
    }
}

function showLayer(tabButtonId, tabLayerId){
    try{
    var tabWraper = document.getElementById('TabNagWraper');
    var nags = tabWraper.getElementsByTagName('a');
    
    		
	for (var i = 0; i < nags.length;i++){
		if (nags[i].className == 'ActiveTabButton'){
			nags[i].className = 'NonActiveTabButton';
		}		
	}
	document.getElementById(tabButtonId).className = 'ActiveTabButton';
	
	
	var tabContentWraper = document.getElementById('TabContent');
    var tabLayers = tabContentWraper.getElementsByTagName('div');
    
    for (var i = 0; i < tabLayers.length;i++){
		if (tabLayers[i].className == 'ActiveTabLayer'){
			tabLayers[i].className = 'NonActiveTabLayer';
		}		
	}
	document.getElementById(tabLayerId).className = 'ActiveTabLayer';
	resizeMainMenu();
	} catch (ex){
	    return false;
	}
	return false;
	
}
//set children of a class to new class. 
//If childclass is null, then all of them is set to new class
function setChildrenClassName(parentId, childTag, childClass, newClass){
    var tabContentWraper = document.getElementById(parentId);
    var tabLayers = tabContentWraper.getElementsByTagName(childTag);
    
    for (var i = 0; i < tabLayers.length;i++){
        if (childClass){        
		    if (tabLayers[i].className == childClass){
			    tabLayers[i].className = newClass;
		    }		
		}else {
		    tabLayers[i].className = newClass;
		}
	}
}
function showMenu (parentId, menuId){
    setChildrenClassName(parentId,'div', 'ActiveMenu', 'NonActiveMenu');
    document.getElementById(menuId).className = 'ActiveMenu'; 
    resizeLegend();
    resizeMainMenu();    
}
function showViewPanelContent(){
    document.getElementById('ViewPanelContent').className = 'ViewPanelContent';
}
function hideViewPanelContent(){
    document.getElementById('ViewPanelContent').className = 'ViewPanelContentHide';
}






function dockMainMenu(side){
    if (side){
        mainMenuDockMode = side;
    }
    var mainMenuW = document.getElementById('LegendPanel').offsetWidth;
    var theWidth = getWindowWidth() - mainMenuW - 10;
    var theHeight = getMapHeight();           
    var offSet = document.getElementById('TopPanel').offsetHeight;    
    
    var miniMapH = 200;
    if (mainMenuDockMode == "RIGHT"){        
        //resize the wraper
        
        setElementWidth('MapPanel', theWidth);
        //alert('afeter width');
        setElePosition("LegendPanel", offSet, theWidth);        
        //alert('afeter postion of legend');
        setElePosition("MapPanel", offSet, 0);        
        //alert('afeter postion of map');
        //resize the actual VE map
        
        resizeMap(theWidth, theHeight);
           
    }
    if (mainMenuDockMode == "LEFT"){        
        setElePosition("LegendPanel", offSet, 0);  
        
        //resize the wraper
        setElementWidth('MapPanel', theWidth);        
        setElePosition("MapPanel", offSet, mainMenuW);                      
        //resize the actual VE map
        resizeMap(theWidth, theHeight);
    }
    if (mainMenuDockMode == "FLOAT"){                
        setElePosition("LegendPanel", offSet-30, theWidth);   
        
        setFullScreenMap();
            
        
    }
    arrangeMenus();
}
function setFullScreenMap(){
    var theHeight = getMapHeight();           
    var offSet = document.getElementById('TopPanel').offsetHeight;  
    setElePosition("MapPanel", offSet, 0);                
    resizeMap(getWindowWidth()-5, theHeight - 5);
}
function showHideLegend(){    
    //this show and hide must be before dockMainMenu
    //this  is becuasue legend not display offsetwitdth = 0 and size of map depends on this
    showHideElement("LegendPanel");    
    dockMainMenu();   
    
}
function setElePosition(eleId, top, left){
    try {
        var ele = document.getElementById(eleId);
        ele.style.position = 'absolute';
        ele.style.left = left + 'px';
        ele.style.top = top + 'px';
    } catch (ex){
        
    }
}
function moveEle(eleId, deltaTop, deltaLeft){
    try {
        var ele = document.getElementById(eleId);
        
        var left = ele.style.left;
        var top = ele.style.top;
        left = left.replace("px","");
        top = top.replace("px","");
        ele.style.top = (top*1 + deltaTop) + 'px';
        ele.style.left = (left*1 + deltaLeft) + 'px';
    } catch (ex){
        
    }
}

function displayMsgBox(tile, txt){
    
    var tileDiv = document.getElementById("divMsgTile");
    removeAllChilds(tileDiv);
    
    if (tile){
        var boldNode = document.createElement("b");
        tileDiv.appendChild(boldNode);
        boldNode.appendChild(document.createTextNode(tile));
        
    }
    
    var msgDiv = document.getElementById("divMsg");
    removeAllChilds(msgDiv);
    
    if (txt){    
        msgDiv.appendChild(document.createTextNode(txt));  
    }
    window.setTimeout("document.getElementById('MsgBoxPanel').style.display = 'block';");  
}

function removeAllChilds(e){
    if (e){
        while (e.hasChildNodes()) { 
          e.removeChild(e.firstChild); 
        } 
    }
}
function hideMsgBox(){
    window.setTimeout("document.getElementById('MsgBoxPanel').style.display = 'none';");  
}

function setCssClass(eleId, cName){
    try {
        document.getElementById(eleId).className = cName;
    } catch (ex) {
    }
}

function clearTxtBox(id){
    document.getElementById(id).value = "";
}

function arrangeMenus(){
    var mapPanel = document.getElementById("MapPanel");
    var top = mapPanel.offsetTop;
    var left = mapPanel.offsetLeft;
    var mapW = mapPanel.offsetWidth;
    
    var drawPanel = document.getElementById("DrawPanel");
    var drawW = 180;
      
    
    var drawPanelX = left + mapW - drawW - 10;
    //alert (drawPanelX);
    //alert (left + mapW);
    setElePosition("DrawPanel", top, drawPanelX);  
    
}
function showHideDrawPanel(){    
    arrangeMenus();
    showHideElement('DrawPanel');
    window.setTimeout("noOp();");
     
}
function showHideElement(theId){
    var ele = document.getElementById(theId);    
    
    if (isEleNotDisplayed(ele)){
        ele.style.display = "inline";
    }else {
        ele.style.display = "none";
    }
    
}
function isEleNotDisplayed(ele){    
    return (ele.style.display == "none" || ele.style.display == "" || !ele.style.display);
}
function showEleBelowMe(theButtonId, theEleId){
    var theButton =  document.getElementById(theButtonId);
    var top = getElementTop(theButton);
    var left = getElementLeft(theButton);
    var h = theButton.offsetHeight;
   
    setElePosition(theEleId,top+h, left );
    showElement(theEleId);
    
}
function showElement(theId){
    document.getElementById(theId).style.display = "block";
}
function hideElement (theId){
    document.getElementById(theId).style.display = "none";
}

function getElementLeft(eElement){
    if (!eElement && this){
        eElement = this;   
    }                      
    var nLeftPos = eElement.offsetLeft;
    var eParElement = eElement.offsetParent;
    while (eParElement != null){
        nLeftPos += eParElement.offsetLeft;
        eParElement = eParElement.offsetParent;
    }
    return nLeftPos;
}
function getElementTop(eElement){
    if (!eElement && this){
        eElement = this;
    }
    var nTopPos = eElement.offsetTop;
    var eParElement = eElement.offsetParent;
    while (eParElement != null){
        nTopPos += eParElement.offsetTop;
        eParElement = eParElement.offsetParent;
    }
    return nTopPos;
}