// JScript File
var xmlHttp = null;

var host = "MapViewer.aspx";

// Gets the xmlHttp object for the current browser
function GetXmlHttpObject()
{
	var xmlHttp = null;
	
	try
	{
		// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	}
	catch (e)
	{
		// Internet Explorer
		try
		{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	
	return xmlHttp;
}

// Does something when state changes
function stateChanged()
{
	if (xmlHttp.readyState == 4)
	{ 		
		var xmlDoc = xmlHttp.responseXML;
		
		switch(alarmType)
		{
		    case "ALERT":
				if(alerts != null)
					RemoveMarkers(alerts);
		        alerts = new Array();
		        ParseXML(xmlDoc, alerts);
		        break;
		    case "ADVICE":
				if(advices != null)
					RemoveMarkers(advices);
		        advices = new Array();
		        ParseXML(xmlDoc, advices);
		        break;
		    case "WEBCAM":
				if(webcams != null)
					RemoveMarkers(webcams);
		        webcams = new Array();
		        ParseXML(xmlDoc, webcams);
		        break;
		    case "PANEL":
				if(panels != null)
					RemoveMarkers(panels);
				panels = new Array();
		        ParseXML(xmlDoc, panels);
		        break;
		    case "TRAIN":
				if(trains != null)
					RemoveMarkers(trains);
				trains = new Array();
		        ParseXML(xmlDoc, trains);
		        break;
		}
	}	
}


var mapCenterLat = 44.465000;
var mapCenterLng = 8.933989;
var mapCenterZoom = 11;

var swAllowedLat = 44.0;
var swAllowedLng = 8.0;

var neAllowedLat = 45.0;
var neAllowedLng = 10.0;

function CenterMap()
{
	map.setCenter(new GLatLng(mapCenterLat, mapCenterLng), mapCenterZoom);
}

function RefreshMap(chk)
{   
	switch(chk)
	{
		case "chkAlert":
			var chkAlert = document.getElementById("chkAlert");
			AlertData(chkAlert);
			break;
		case "chkAdvice":
			var chkAdvice = document.getElementById("chkAdvice");
			AdviceData(chkAdvice);
			break;
		case "chkWebCam":
			var chkWebCam = document.getElementById("chkWebCam");
			WebCamData(chkWebCam);
			break;
		case "chkPanel":
			var chkPanel = document.getElementById("chkPanel");
			PanelData(chkPanel);
			break;
		case "chkTrain":
			var chkTrain = document.getElementById("chkTrain");
			TrainData(chkTrain);
			break;
	}
}

function getURLParam(strParamName)
{
  var strReturn = "";
  var strHref = window.location.href;
  if (strHref.indexOf("?") > -1)
  {
    var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
    var aQueryString = strQueryString.split("&");
    
    for (var iParam = 0; iParam < aQueryString.length; iParam++)
    {
      if (aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 )
      {
        var aParam = aQueryString[iParam].split("=");
        strReturn = aParam[1];
        break;
      }
    }
  }
  
  return unescape(strReturn);
}

var viewMode = null;

function onLoad()
{
	viewMode = getURLParam("viewMode");
		
	if (GBrowserIsCompatible()) 
	{		
		map = new GMap2(document.getElementById("map"));
		
		// map.addControl(new CommandControl({centerMapUrl:"images/resize.gif", fullScreenUrl: "images/openfull.png", direction: ""}));
		map.addControl(new CommandControl({centerMapUrl:"images/resize.gif", fullScreenUrl: "images/openfull.png", direction: "horizontal"}), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(0,0)));
		
		var zoomPosition = new GSize(155,34);
		
		/*
		if(navigator.userAgent.indexOf("Firefox") != -1)
		{
			var versionindex = navigator.userAgent.indexOf("Firefox") + 8
			if(parseInt(navigator.userAgent.charAt(versionindex)) >= 1)
			{
				var zoomPosition = new GSize(155,34);
			}
		}
		else
		{
			var zoomPosition = new GSize(198,34);
		}
		*/
		
		map.addControl(new GZoomControl(
		/* first set of options is for the visual overlay.*/
		{
			nOpacity:.2,
			sBorder:"2px solid red"
		},
		/* second set of optionis is for everything else */
		{
			sButtonHTML:"<img src='images/centerMap.gif' />",
			sButtonZoomingHTML:"<img src='images/centerMap.gif' />",
			oButtonStartingStyle:{width:'24px',height:'24px'},
			bForceCheckResize:true
		},
		/* third set of options specifies callbacks */
		{}
		), 
		// new GControlPosition(G_ANCHOR_TOP_LEFT,new GSize(32,20))
		new GControlPosition(G_ANCHOR_TOP_RIGHT,zoomPosition)
		);
		
		map.checkResize();
		
		if(viewMode == "full")
		{
			mapCenterLat = 44.431000;
			mapCenterLng = 8.903989;
			mapCenterZoom = 12;
			
			// map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT,new GSize(17,130)));
			map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT,new GSize(7,7)));
			
			document.getElementById("map").className = "mapFull rightWidth";
			// document.getElementById("trMapFull").style.visibility = "hidden";
			map.enableScrollWheelZoom();
		}
		else
		{
			mapCenterLat = 44.42936692430196;
			mapCenterLng = 8.825454711914062;
			mapCenterZoom = 11;
			
			// map.addControl(new GSmallMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT,new GSize(27,130)));
			map.addControl(new GSmallMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT,new GSize(7,7)));
			
			document.getElementById("map").className = "map rightWidth";
		}
		
		map.setCenter(new GLatLng(mapCenterLat, mapCenterLng), mapCenterZoom); 
		
		map.addControl(new GMapTypeControl());
				
		GEvent.addListener(map, "zoomend", function(oldLevel, newLevel) 
		{
			if(newLevel < 10) 
			{
				map.setZoom(10);
			}
		});
		
		// Add a move listener to restrict the bounds range
		GEvent.addListener(map, "move", function() {
			checkBounds();
		});

		// The allowed region which the whole map must be within
		var allowedBounds = new GLatLngBounds(new GLatLng(swAllowedLat, swAllowedLng), new GLatLng(neAllowedLat, neAllowedLng));
	      
		// If the map position is out of range, move it back
		function checkBounds() 
		{
			// Perform the check and return if OK
			if (allowedBounds.contains(map.getCenter())) 
			{
				return;
			}

			var C = map.getCenter();
			var X = C.lng();
			var Y = C.lat();

			var allowedMaxX = allowedBounds.getNorthEast().lng();
			var allowedMaxY = allowedBounds.getNorthEast().lat();
			var allowedMinX = allowedBounds.getSouthWest().lng();
			var allowedMinY = allowedBounds.getSouthWest().lat();

			// Cerca il nuovo centro della mappa
			if (X < allowedMinX) {X = allowedMinX;}
			if (X > allowedMaxX) {X = allowedMaxX;}
			if (Y < allowedMinY) {Y = allowedMinY;}
			if (Y > allowedMaxY) {Y = allowedMaxY;}        
			
			map.setCenter(new GLatLng(Y,X));
		}
	}
		
	setUserOptions();
		
	var chkAlert = document.getElementById("chkAlert");
	chkAlert.checked = true;
	AlertData(chkAlert);
	
	document.getElementById("chkAdvice").checked = false;
	
	document.getElementById("chkPanel").checked = false;
	
	document.getElementById("chkWebCam").checked = false;
	
	document.getElementById("chkTrain").checked = false;
}

var alerts = [];
var advices = [];
var webcams = [];
var panels = [];
var trains = [];

var map;
var tooltip;

// Parse the XML document
function ParseXML(xmlDoc, array)
{
	var markers = xmlDoc.documentElement.childNodes;
    
    if (GBrowserIsCompatible()) 
	{
	    // Set up marker mouseover tooltip div
		tooltip = document.createElement("div");
		map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
		tooltip.style.visibility="hidden"; 

	    for (var i = 0; i < markers.length; i++) 
	    {
		    if(markers[i].nodeName != "#text")
		    {
				var lat = parseFloat(markers[i].getElementsByTagName("lat")[0].childNodes[0].nodeValue);
			    var lng = parseFloat(markers[i].getElementsByTagName("lng")[0].childNodes[0].nodeValue);
			    var description = markers[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
			    var shortDescription = markers[i].getElementsByTagName("shortDescription")[0].childNodes[0].nodeValue;
    			
    			var point = new GLatLng(lat,lng);
				var marker = createMarker(point, description, shortDescription);
			    
			    map.addOverlay(marker);
			    array.push(marker);
		    }
		}
	}
	
	hideProgressbar();
}


var alarmType;

function OnEvent(url)
{
	xmlHttp = GetXmlHttpObject();
	
	if(xmlHttp == null)
	{
		alert("Your browser does not support AJAX!");
		return;
	}
	
	xmlHttp.onreadystatechange = stateChanged;
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null);
	
	showProgressbar();
}


//Show progress bar at center of the window
function showProgressbar() 
{
	var prg = document.getElementById("progressbar");
	
	var winW, winH;
	if(parseInt(navigator.appVersion) > 3) 
	{
        if(navigator.appName == "Netscape") 
        {
           winW = window.innerWidth;
           winH = window.innerHeight;
        }
        if(navigator.appName.indexOf("Microsoft") != -1)
        {
            winW = document.body.offsetWidth;
            winH = document.body.offsetHeight;
        }
    }

	prg.style.left = winW / 2 ;
	prg.style.top = winH / 2 ;
	
	prg.style.visibility = "visible";
}

//Disables the progress bar
function hideProgressbar() 
{
	var prg = document.getElementById("progressbar");
	prg.style.visibility = "hidden";
}
		
// Gets the alert data	from DB
function AlertData(chkAlert)
{
    if(chkAlert.checked)
    {
        alarmType = "ALERT";
        var url = host + "?sid=" + Math.random() + "&key=ALERT";
        OnEvent(url);
    }
    else
    {
        RemoveMarkers(alerts);
    }
}	

// Gets the advice data from DB
function AdviceData(chkAdvice)
{
    if(chkAdvice.checked)
    {
        alarmType = "ADVICE";
        var url = host + "?sid=" + Math.random() + "&key=ADVICE";
        OnEvent(url);
    }
    else
    {
        RemoveMarkers(advices);
    }
}

// Gets the Webcam data from DB
function WebCamData(chkWebCam)
{
    if(chkWebCam.checked)
    {
        alarmType = "WEBCAM";
        var url = host + "?sid=" + Math.random() + "&key=WEBCAM";
        OnEvent(url);
    }
    else
    {
        RemoveMarkers(webcams);
    }
}

// Gets the panel data from DB
function PanelData(chkPanel)
{
    if(chkPanel.checked)
    {
        alarmType = "PANEL";
        var url = host + "?sid=" + Math.random() + "&key=PANEL";
        OnEvent(url);
    }
    else
    {
        RemoveMarkers(panels);
    }
}

// Gets the train data from DB
function TrainData(chkTrain)
{
    if(chkTrain.checked)
    {
        alarmType = "TRAIN";
        var url = host + "?sid=" + Math.random() + "&key=TRAIN";
        OnEvent(url);
    }
    else
    {
        RemoveMarkers(trains);
    }
}

// Removes the markers passed in the array
function RemoveMarkers(array)
{
    for(var i = 0; i < array.length; i++)
    {
        map.removeOverlay(array[i])
    }
}

// Creates  a marker for a GLatLng point with description (in the infowindow) and shortdescription (in  the tooltip)
function createMarker(point, description, shortDescription) 
{
	var icon = new GIcon();
	
	var infoTabs = null;
	
	var WINDOW_HTML = null;
	
	var tooltipHTML = "<div class='tooltip'><font class='tooltipText'>" + shortDescription + "</font></div>";
	
	switch(alarmType)
	{
		case "ALERT":
			icon.image = "Images/Alert.gif";
			WINDOW_HTML = "<div><div class='InfoWindowImage'><img src='Images/Alert.gif'></div><div class='InfoWindowDescription'>" + description + "</div></div>";

			infoTabs = [new GInfoWindowTab("Descrizione allarme", WINDOW_HTML)];
			break;
		case "ADVICE":
			icon.image = "Images/Advice.gif";
			WINDOW_HTML = "<div><div class='InfoWindowImage'><img src='Images/Advice.gif'></div><div class='InfoWindowDescription'>" + description + "</div></div>";
			infoTabs = [new GInfoWindowTab("Descrizione segnalazione", WINDOW_HTML)];
			break;
		case "WEBCAM":
		    icon.image = "Images/WebCam.png";
			WINDOW_HTML = "<div style='width: 250px; padding-right: 10px'><CENTER><IMG alt='Immagine temporaneamente non disponibile' HEIGHT='210px' WIDTH='250px' SRC='" + description + "'><br><B>" + shortDescription + "</B></CENTER></div>";
		    infoTabs = [new GInfoWindowTab("Immagine webcam", WINDOW_HTML)];
		    break;
		case "PANEL":
		    icon.image = "Images/Panel.png";
		    WINDOW_HTML = "<div><div class='InfoWindowImage'><img src='Images/Panel.png'></div><div class='InfoWindowDescription'>" + description + "</div></div>";
		    infoTabs = [new GInfoWindowTab("Pannello informativo", WINDOW_HTML)];
		    break;
		case "TRAIN":
			var tooltipIcon = "Images/ViaggiaTreno.gif";
		    icon.image = "Images/Train.png";
		    var tooltipText = "I treni in tempo reale a " + description;
		    var iframeUrl = "../viaggiatreno.aspx?stazione=" + description;
		    var IFrameHeader = "<div class='IFrameHeader'>Stazione di " + description + " (" + shortDescription +  ")" + "</div>";
			var IFrameBody = "<div class='IFrameBody'><iframe id='iframe1' frameborder='0' class='IFrame' src='" + iframeUrl + "'></iframe></div>";

			WINDOW_HTML = IFrameHeader + IFrameBody;
			
			iframeUrl = "http://mobile.viaggiatreno.it/viaggiatreno/mobile/numero";
		    IFrameHeader = "<div class='IFrameHeader'>Cerca per numero di treno</div>";
			IFrameBody = "<div class='IFrameBody'><iframe id='iframe1' frameborder='0' class='IFrame' src='" + iframeUrl + "'></iframe></div>";

			var BY_NUMBER = IFrameHeader + IFrameBody;
			
			iframeUrl = "http://mobile.viaggiatreno.it/viaggiatreno/mobile/tragitto";
		    IFrameHeader = "<div class='IFrameHeader'>Cerca per numero dati di viaggio</div>";
			IFrameBody = "<div class='IFrameBody'><iframe id='iframe1' frameborder='0' class='IFrame' src='" + iframeUrl + "'></iframe></div>";

			var BY_DATA = IFrameHeader + IFrameBody;
			
			iframeUrl = "http://mobile.viaggiatreno.it/viaggiatreno/mobile/programmato";
		    IFrameHeader = "<div class='IFrameHeader'>Orario treni</div>";
			IFrameBody = "<div class='IFrameBody'><iframe id='iframe1' frameborder='0' class='IFrame' src='" + iframeUrl + "'></iframe></div>";

			var TIMETABLE = IFrameHeader + IFrameBody;
			
			
			
			infoTabs = [
				new GInfoWindowTab("Tempo reale", WINDOW_HTML),
				new GInfoWindowTab("Numero treno", BY_NUMBER),
				new GInfoWindowTab("Tragitto", BY_DATA), 
				new GInfoWindowTab("Orario", TIMETABLE)
				];		
			
			tooltipHTML = "<div class='tooltip'><div class='tooltipImage'><img align='left'  src='" + tooltipIcon + "'></div><div class='tooltipText tooltipImage'>" + tooltipText + "</div></div>";
		    
		    break;
	}		
			
	icon.iconSize = new GSize(20, 20);
	// icon.shadowSize = new GSize(22, 20);
	icon.iconAnchor = new GPoint(10, 20);
	icon.infoWindowAnchor = new GPoint(5, 1);
		
	var marker = new GMarker(point, icon);
	
	switch(alarmType)
	{
	case "WEBCAM":
		if (description.charAt(11) == 'a')
		{
		GEvent.addListener(marker, "click", function() {
			tooltip.style.visibility="hidden";
			map.savePosition();
			window.open(description,'','width=340,height=390,scrollbars=no,status=no,resizable=no')
			});
		}
		else
		{
			GEvent.addListener(marker, "click", function() {
			tooltip.style.visibility="hidden";
			map.savePosition();
			marker.openInfoWindowTabsHtml(infoTabs);
			});
		}
		break;
	default:
		GEvent.addListener(marker, "click", function() {
			tooltip.style.visibility="hidden";
			map.savePosition();
			marker.openInfoWindowTabsHtml(infoTabs);
		});
		break;
	}
	
	GEvent.addListener(map, 'infowindowopen', patchTabCSS);

	function patchTabCSS()
    {
        var container = (map.getInfoWindow().getContentContainers())[0].previousSibling;

        while(container.tagName.toLowerCase() == "div")
        {
            container.lastChild.style.fontSize = "9px";
            container.lastChild.style.fontFamily = "tahoma, Arial,Helvetica,Verdana,sans-serif;";
            container = container.previousSibling;
        }
    } 
	
	// Recenters map view after closing infowindow
    GEvent.addListener(map, "infowindowclose", function()
    {
		map.returnToSavedPosition();
	}); 
    	
	marker.tooltip = tooltipHTML;
	
	GEvent.addListener(marker,"mouseover", function() {
		showTooltip(marker);
	});
	 
	GEvent.addListener(marker,"mouseout", function() {
		tooltip.style.visibility="hidden";
	});     
		
	return marker;
}


// This function displays the tooltip
function showTooltip(marker) 
{
	tooltip.innerHTML = marker.tooltip;
	
	var point = map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0, 0), true), map.getZoom());
	var offset = map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(), map.getZoom());
	var anchor = marker.getIcon().iconAnchor;
	var width = marker.getIcon().iconSize.width;
	var height = tooltip.clientHeight;
	var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y - anchor.y - height)); 
	
	pos.apply(tooltip);
	tooltip.style.visibility = "visible";
}


// Salva lo stato della mappa (zoom e posizione)
var prefsLoaded = false;

// Gestione Cookies
function createCookie(name, value, days) 
{
	if (days) 
	{
		var date = new Date();
		date.setTime(date.getTime() + (days*24*60*60*1000));
		var expires = "; expires=" + date.toGMTString();
	}
	else expires = "";
  
	document.cookie = name + "=" + value + expires + "; path=/";
};

function readCookie(name) 
{
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	
	for(var i=0;i < ca.length;i++) 
	{
		var c = ca[i];
		while (c.charAt(0)==' ') 
			c = c.substring(1,c.length);
		
		if (c.indexOf(nameEQ) == 0) 
			return c.substring(nameEQ.length,c.length);
	}
	
	return null;
};

function setUserOptions()
{
	if(!prefsLoaded)
	{
		cookie = readCookie("mapSettings");
		if(cookie != null)
			setMapSettings(cookie);
				
		prefsLoaded = true;
	}

}

function saveUserSettings()
{	
	var mapSettings = map.getCenter().y + "_" + map.getCenter().x + "_" + map.getZoom();
	createCookie("mapSettings", mapSettings, 365);
}

function setMapSettings(mapSettings)
{
	var array = mapSettings.split('_');
		
	map.setCenter(new GLatLng(array[0], array[1]), array[2]);
}


// UnLoad
function onUnLoad()
{
	GUnload();
	saveUserSettings();
}


// A CommandControl is a GControl that displays 
// button to zoom center the map and to open
// it in  new window
function CommandControl(oOptions) 
{
	var opt = CommandControl.Options;
	for (var s in oOptions) {opt[s]=oOptions[s]};
}

CommandControl.Options = 
{
		centerMapUrl: "",
		fullScreenUrl: "", 
		direction: ""
};


CommandControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
CommandControl.prototype.initialize = function(map) {
  var opt = CommandControl.Options;

  var container = document.createElement("div");
  this.setContainerStyle_(container);
  
  // Header
  var opt = CommandControl.Options;
  if(opt.direction == "horizontal")
  {
	var divHeader = document.createElement("div");

	container.appendChild(divHeader);  
  
	divHeader.style.width = "100%";
	divHeader.style.height = "20px";
  }
  
  // Blank
  var divBlank = document.createElement("div");

  container.appendChild(divBlank);  
  
  this.setButtonStyle_(divBlank);
  
  
  // Center map
  var divCenter = document.createElement("div");

  container.appendChild(divCenter);  
  
  var centerMap = document.createElement("img");
  centerMap.src = opt.centerMapUrl;
  centerMap.border = "0px";
  centerMap.height = "17";
  centerMap.width = "17";
  divCenter.appendChild(centerMap);
  centerMap.style.cursor = "pointer";
  this.setButtonStyle_(divCenter);

  GEvent.addDomListener(centerMap, "click", function() {
    CenterMap();
  });
  
  GEvent.addDomListener(centerMap, "mouseover", function() {
    ddrivetip('<img src=\'/InfomobilityWeb/Images/EventLogs_Info.png\'> Centra la mappa');
  });
  
  GEvent.addDomListener(centerMap, "mouseout", function() {
    hideddrivetip();
  });

  if(viewMode != "full")
  {
	// Full screen	
	var divFullScreen = document.createElement("div");
	
	container.appendChild(divFullScreen);
	  
	var fullScreen = document.createElement("img");
	fullScreen.src = opt.fullScreenUrl;
	divFullScreen.appendChild(fullScreen);
	fullScreen.style.cursor = "pointer";
	this.setButtonStyle_(divFullScreen);
	
	GEvent.addDomListener(fullScreen, "click", function() {
		var w= window.open('MapViewer.aspx?viewMode=full','map','width=891,height=716,scrollbars=no,menubar=no,resizable=no');
	});
	  
	GEvent.addDomListener(fullScreen, "mouseover", function() {
		ddrivetip('<img src=\'/InfomobilityWeb/Images/EventLogs_Info.png\'> Apri a tutto schermo');
	});
	  
	GEvent.addDomListener(fullScreen, "mouseout", function() {
		hideddrivetip();
	});
  }
  

  map.getContainer().appendChild(container);
  return container;
};

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
CommandControl.prototype.getDefaultPosition = function() 
{
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
};

// Sets the proper CSS for the given button element.
CommandControl.prototype.setButtonStyle_ = function(button) 
{
  var opt = CommandControl.Options;
  if(opt.direction == "horizontal")
  {
	button.setAttribute("style","float:left");
	button.style.styleFloat = "left";
	// button.style.height = "70px";
	button.style.padding = "10px 2px 5px 5px";
	button.style.width = "30%";
  }
  else
  {
	button.style.width = "30px";
	button.style.height = "30px";
	button.style.padding = "5px 2px 5px 5px";
  }

  button.style.textDecoration = "underline";
  button.style.color = "#0000cc";
  button.style.backgroundColor = "#eeeeee";
  button.style.font = "small Arial";
  button.style.border = "0px";
  
  button.style.marginBottom = "3px";
  button.style.textAlign = "center";
  
  // button.style.height = "30px";
  // button.style.cursor = "pointer";
};

CommandControl.prototype.setContainerStyle_ = function(container) 
{
  var opt = CommandControl.Options;
  if(opt.direction == "horizontal")
  {
	
	if(navigator.userAgent.indexOf("Firefox") != -1)
	{
		var versionindex = navigator.userAgent.indexOf("Firefox") + 8
		if(parseInt(navigator.userAgent.charAt(versionindex)) >= 1)
		{
			container.style.width = "208px";
		}
	}
	else
	{
		container.style.width = "212px";
	}
	
	
	// container.style.width = "212px";
	// container.style.height = "auto";
	container.style.height = "55px";
  }
  else
  {
	container.style.width = "70px";
    container.style.height = "70%";
  }
  
  container.style.textDecoration = "underline";
  container.style.color = "#000000";
  container.style.backgroundColor = "#eeeeee";
  container.style.font = "small Arial";
  container.style.border = "1px solid black";
  container.style.padding = "2px";
  container.style.marginBottom = "3px";
  container.style.textAlign = "center";
};