var map;
var bounds = new GLatLngBounds();
var mappoints = new Array();
var arrLegend = new Array();
var imgpath = "http://media.sacbee.com/static/newsroom/maps/holidaylights2007/images/";
var thumbpath = "http://media.sacbee.com/static/newsroom/maps/holidaylights2007/thumbnails/";
var properties = new Array();
		var arrMenus = new Array();


    var baseIcon = new GIcon();
      baseIcon.image = "images/light.png";
     // baseIcon.shadow = "shadow.png";
		baseIcon.iconSize = new GSize(10, 20);
	baseIcon.shadowSize = new GSize(10, 17);
	baseIcon.iconAnchor = new GPoint(4, 17);
	baseIcon.infoWindowAnchor = new GPoint(4, 2);
	baseIcon.infoShadowAnchor = new GPoint(9, 12);
	
	

    var moreIcon = new GIcon();
    moreIcon.image = "images/lights.png";
 	moreIcon.iconSize = new GSize(30, 20);
	moreIcon.shadowSize = new GSize(10, 17);
	moreIcon.iconAnchor = new GPoint(4, 17);
	moreIcon.infoWindowAnchor = new GPoint(4, 2);
	moreIcon.infoShadowAnchor = new GPoint(9, 12);
	

	var videoIcon = new GIcon(baseIcon);
	videoIcon.image = "images/video.png";
	videoIcon.iconSize = new GSize(30, 30);

	var photoIcon = new GIcon(baseIcon);
	photoIcon.image = "images/photo.png";
	photoIcon.iconSize = new GSize(16, 13);
	
function initmap(){

		if(GBrowserIsCompatible()){
			map = new GMap2(document.getElementById("map"));
			var loc = new GLatLng(38.568837, -121.376);
			map.setCenter(loc, 11);
			map.addControl(new GLargeMapControl());		
		//	map.addControl(new GMapTypeControl());	
		}
		
	
		centerAndZoomOnBounds(bounds); 
		drawTable();
		
		loadPoints();
		resizeStuff();
		
	
}


window.onload = initmap;
window.onunload = GUnload;
window.onresize = resizeStuff;


function loadPoints(){
	var point;
 	for(var i=0; i< holidaylights.length; i++){		
		point = fillPointWithArrayInfo(holidaylights[i][0]);
		loadPoint(point); 
	}
		
	centerAndZoomOnBounds(bounds);
}

function fillPointWithArrayInfo(row){
	var point = new Object();
	for(var id in row){
		point[id] = row[id];
	}
	return point;

}

function resizeStuff(){
	//var diff = document.getElementById("map").offsetHeight - document.getElementById("infoBox").offsetHeight;
	//document.getElementById("listwrap").style.height = (diff-20)+"px";
	
	//document.getElementById("consolebox").style.top = document.getElementById("map").offsetTop + 20 +"px";
//	document.getElementById("infoBox").style.width = document.getElementById("map").offsetHeight+"px";

}





function drawTable(){

		var tablerows='<table id="tablerows" valign="middle" class="sortable"><thead><tr><th>Address</th><th>City</th><th>Family name</th><th></th></tr></thead>';
		for(var i=0; i< holidaylights.length; i++){
		
			tablerows+="<tr valign=\'middle\'><td class=\"tds\"><a href='#mapanchor' onclick='gotoMapPoint("+holidaylights[i][0]['id']+")'>"+holidaylights[i][0]['address']+"</a></td><td class=\"tds\">"+holidaylights[i][0]['city']+"</td><td class=\"tds\">"+holidaylights[i][0]['familyname']+"</td><td>"+outputThumbnail(holidaylights[i][0]['pictures'])+"</td></tr>";
		}
		tablerows+="</table>";
		
		document.getElementById("infoTable").innerHTML = tablerows;
		//sorttable.makeSortable(document.getElementById("tablerows"));

}



function loadPoint(point){


	
	var marker;
	var latlng = new GLatLng(point["latitude"], point["longitude"]);
	
	if( !isEmpty(point["videos"]) ){
		marker=new GMarker(latlng, videoIcon);
	}
	else if( !isEmpty(point["pictures"]) ){
		marker=new GMarker(latlng, photoIcon);
	}	
	else if(point["displaytype"] == "multiple"){
		marker=new GMarker(latlng, moreIcon);
	
	}else{
		marker=new GMarker(latlng, baseIcon);

	}

	function gotoPoint(){
		/*window.location.hash="mapanchor"; 
	
	
		var txt="<b>Address</b><br />"+point['address']+", " + point['city'] + "<br /><b>Family</b><br />"+point['familyname'];
	

		marker.openInfoWindowHtml(txt);

		map.panTo(latlng);
		loadInfo(point);
		changeTabs(1);
		*/
		gotoMapPoint(point["id"]);
		
	}
	

	GEvent.addListener(marker, 'click', gotoPoint);	
	map.addOverlay(marker);	
	bounds.extend(latlng);
	var id = point['id'];
	point.marker = marker;
	properties[id] = point;
	

	
}

function loadInfo(point){

	clearInfo();

	document.getElementById("infoAddress").innerHTML = point['address'] +" in "+ point['city'] + '<br /><a href="#mapanchor" onclick="changeTabs(0)" >Go back to list view</a>';
	
	if(!isEmpty(point['familyname']))
		document.getElementById("infoFamilyName").innerHTML = "Display by the "+point['familyname']+ " Family";
if(!isEmpty(point['videos']))
		document.getElementById("infoVideos").innerHTML += "<h2>Videos</h2>"+outputVideoLinks(point['videos']);


	if(!isEmpty(point['narrative']))
		document.getElementById("infoNarrative").innerHTML += "<h2>Description</h2>"+point['narrative'] + '<br /><a href="#mapanchor" onclick="changeTabs(0)" >Go back to list view</a>';

	
	
	if(!isEmpty(point['description']))
		document.getElementById("infoDescription").innerHTML = "<h2>From the submitter</h2>"+point['description'];
	
	if(!isEmpty(point['pictures']))
		document.getElementById("infoPictures").innerHTML = outputPictureTags(point['pictures']);


}

function clearInfo(){
	document.getElementById("infoNarrative").innerHTML = document.getElementById("infoVideos").innerHTML = document.getElementById("infoAddress").innerHTML = document.getElementById("infoFamilyName").innerHTML = document.getElementById("infoDescription").innerHTML = document.getElementById("infoPictures").innerHTML = "";

}

function outputPictureTags(arrpics){

	
	if(isEmpty(arrpics))
		return "";
		
	var arr = arrpics.split(";");
	var txt="";

	for(var i=0; i<arr.length; i++){
		txt +='<div class="picture">';
		txt +='<img alt="Picture of display" src="'+imgpath+arr[i]+'" />';
		txt +='</div>';
	}
	return txt;

}

function outputVideoLinks(arrvids){
	if(isEmpty(arrvids))
		return "";
		
	var arr = arrvids.split(";");
	var txt="";

	for(var i=0; i<arr.length; i++){

		txt +='<a target="video" href="'+arr[i]+'">Video '+(i+1)+"</a>  ";

	}
	return txt;


}

function outputThumbnail(arrpics){
	if(isEmpty(arrpics))
		return "";
	var arr = arrpics.split(";");
	var txt="";
	if(arr.length > 0){
		txt='<div class="thumb">';
		txt +='<img alt="thumbnail" src="'+thumbpath+arr[0]+'" />';
		txt +='</div>';
		
		
	}
	
	return txt;

}

function gotoMapPoint(id){
	
		var point = properties[id];	
				map.setZoom(11);
		map.panTo(new GLatLng(point['latitude'], point['longitude']) );
		var txt="<div style='width:300px'>"+point['address']+"<br />";
		if(!isEmpty(point['narrative']))
			txt+="<p style='font-size: smaller'>"+point['narrative'] + "</p>";
		else if(!isEmpty(point['description']))
			txt+="<p style='font-size: smaller'>From the submitter: "+point['description'] + "</p>";
		
		txt+=outputThumbnail(point['pictures']);
		txt+="<br />"+outputVideoLinks(point['videos']);
		
		if( !isEmpty(point['pictures']) || !isEmpty(point['videos']) ){	
			txt+="<br /><a href='#detailanchor'>See more details</a>";
		}
				
		txt+="</div>";	
		properties[id].marker.openInfoWindowHtml(txt);
		loadInfo(point);
		changeTabs(1);

		

}



function centerAndZoomOnBounds(bounds) {
var center = bounds.getCenter();
var newZoom = map.getBoundsZoomLevel(bounds);
	map.setCenter(center, newZoom);

} 

function trace(txt){

document.getElementById("trace").innerHTML += txt+"<br/>";
}



function changeTabs(tabnum){	


	var tabNodes = document.getElementById("linkTabBar").getElementsByTagName("li");

	for(var i=0; i<tabNodes.length; i++){
	
	trace(i);
		if(i==tabnum){
			tabNodes[i].childNodes[0].style.color = "#b00";	
			tabNodes[i].style.background = "none";
			displayMenus(i, 1);
			//tabNodes[i].childNodes[0].style.textDecoration="underline";		
		}
		else{
			tabNodes[i].childNodes[0].style.color = "#999";
			tabNodes[i].style.background = "none";
			displayMenus(i, 0);
			//tabNodes[i].childNodes[0].style.textDecoration="none";
		}
	}


}


function displayMenus(id, d){	

	arrMenus[0] = document.getElementById("infoTable");
	arrMenus[1] = document.getElementById("infobox");
	
	var a = arrMenus[id];
	

	if( (a.style.display =="none" || !a.style.display ) && d==1){
		a.style.display = "block";
		
	}
	
	else if(a.style.display !="none" && d==0){
		a.style.display = "none";
			
	}

}




function trace(txt){
	//document.getElementById("debug").innerHTML += "<br />"+txt;
}

function isEmpty(val){

	if(val==null || val==undefined || val=="")
		return true;
	else
		return false;

}