var map_gen = new map_gen();
function map_gen () {

	this.map			= '';
	this.photoObjs		= '';
	this.calendarObjs	= '';
	this.myPOV			= '';
	this.myPano			= '';
	//this.latestPhoto    = '';

	this.user_id		= '';
	//this.arg_user_id		= '';
	this.auth			= '';

	this.dateSel		= '';	//initially, all photos are retrieved.
								//it's assigned after first calendar click
								//map markers are retrieved only for this date

	this.THUMB_COUNT	= 20;
	this.DEFAULT_ZOOM	= 13;

	this.markers = [];
	this.markerClusterer = null;

	this.firstLoad		= true;
	this.introLoad		= true;
	
	this.setup = function () {

		this.user_id	= user_id;
		//this.arg_user_id	= arg_user_id;
		this.auth		= auth;

		var intro = SITE_SUMMARY;
		loadInfo("", "", intro, 0); //(date, title, summary, photosCount)

		if (GBrowserIsCompatible()) {
			
			//loadMarkers.load(map_gen.map, map_gen.dateSel, this.loadCallback);
			loadThumbs.load(this.thumbCallback);
			loadCalendar.load(this.calendarCallback);

			var latlng = new GLatLng(37.4419, -122.1419);	
			this.map = new GMap2(document.getElementById("map_panel"));
			this.map.setCenter(latlng, 10);//new GLatLng(37.4419, -122.1419), 13);
			this.map.setUIToDefault(); 
				

			 GEvent.addListener(this.map, "moveend", function() {//click|moveend
				loadMarkers.load(map_gen.map, map_gen.dateSel, map_gen.loadCallback, 0);
			 });

			return this.map;
		}
	}
	
	this.setPano = function (street_divid, latlng) {	
		this.myPano = new GStreetviewPanorama(document.getElementById(street_divid));
		this.myPOV = {yaw:370.64659986187695,pitch:-20};
		this.myPano.setLocationAndPOV(latlng, this.myPOV);
		GEvent.addListener(this.myPano, "error", this.handleNoFlash);
	}

	this.handleNoFlash = function (errorCode) {
		
		if (errorCode == 603) {
			alert("Error: Flash doesn't appear to be supported by your browser");
			return;

		}  else if (errorCode == 600) {
						//<div id='media_street_view' class='photo_button' onClick='image_controller.click(2)' style='color:black'>Street View</div>
			document.getElementById("media_street_view").style.display='none';     
			//alert("No Street View for current location.");
			return;
		}
	}

	this.calendarCallback = function(calendarObjs) {

		this.calendarObjs = calendarObjs;
		if (calendarObjs.length==0) return;

		var calendar = '';
		var today = new Date();
		for (var i=0;i<=6;i++) calendar += monthCalendar(i, calendarObjs);
		document.getElementById("calendar_panel").innerHTML = calendar;
	}

	this.thumbCallback = function(photoObjs) {

		this.photoObjs = photoObjs;
		if (photoObjs.length==0) return;

		var thumbs='';
		//var indexSel = Math.floor(Math.random()*(Math.min(photoObjs.length, 19)-1));
		var indexSel = 0;

		//var photoSel;
		//var latLngSel;
		//var dateSel;

		var timeMarks = "";

		//for (var i = map_gen.introLoad?map_gen.THUMB_COUNT:0; i < photoObjs.length; i++) {

		var THUMB_START = this.firstLoad?0:20;
//alert("thumb start"+THUMB_START);
		if (photoObjs.length>THUMB_START)
		for (var i = THUMB_START; i < photoObjs.length; i++) {

			//var filenames = photoObjs[i].filenames.split(",");
			//var photoBase = filenames[0].replace(/.*?([^\/]+\.jpg)$/, "$1");
			//var photo = "./photos/48x48/"+photoBase;
			//var photoFull = "http://gpfoyer.com/photos/"+photoBase;
			
			var photo = photoObjs[i].filenames.replace(/photos\//, "photos/48x48/");			
			thumbs += "<img src='"+photo+"' class='thumb' onClick='"+map_gen.photoFillArgs(photoObjs[i])+"'>";

			if (photoObjs[i].rating == "1") indexSel = i;

			var timestamp = photoObjs[i].timestamp;
			var hour	= parseInt(timestamp.replace(/.+(\d\d):\d\d:\d\d/, "$1"), 10);
			var minute	= parseInt(timestamp.replace(/.+\d\d:(\d\d):\d\d/, "$1"), 10);
			var offset_x	= -21*(i%3);
			var offset_y	= parseInt((24-(hour+minute/60))*40-10);
			timeMarks += "<div class=time_marks style='left:"+offset_x+";top:"+offset_y+"px'></div>";
			
			//if (i>10 && i<15) alert("ts="+timestamp+" hour="+hour+" min="+minute+"offset_y = "+offset_y);
			
			/*
			var onClickFunc = "map_gen.fillPhoto(\"";
			onClickFunc	+= photoFull				+"\",\"";
			onClickFunc	+= photoObjs[i].latitude	+"\",\"";
			onClickFunc	+= photoObjs[i].longitude	+"\",\"";
			onClickFunc	+= photoObjs[i].date		+"\",\"";
			onClickFunc	+= photoObjs[i].title		+"\",\"";
			onClickFunc	+= photoObjs[i].summary		+"\",\"";
			onClickFunc	+= photoObjs[i].db_id		+"\")";
			*/
/*
			var onClickFunc = map_gen.photoFillArgs(photoObjs[i].filenames,
													photoObjs[i].latitude,
													photoObjs[i].longitude,
													photoObjs[i].date,
													photoObjs[i].title,
													photoObjs[i].summary,
													photoObjs[i].db_id);
													*/


			/*
			if (i==indexSel) {
				photoSel = photoFull;
				latLngSel = new GLatLng(photoObjs[i].latitude, photoObjs[i].longitude);
				dateSel = photoObjs[i].date;
			}*/
		}
		document.getElementById("thumb_panel").innerHTML = thumbs;
		document.getElementById("time_marks_panel").innerHTML = timeMarks;

		thumbs = "";
		for (var i = 0; i < Math.min(photoObjs.length, map_gen.THUMB_COUNT); i++) {

			var photo = photoObjs[i].filenames.replace(/photos\//, "photos/48x48/");			
			thumbs += "<img src='"+photo+"' class='thumb' onClick='"+map_gen.photoFillArgs(photoObjs[i])+"'>";

			if (photoObjs[i].rating == "1") indexSel = i;
		}		
		document.getElementById("latest_thumbs_panel").innerHTML = thumbs;
		//document.getElementById("latest_thumbs_panel").src = thumbs;

		if (map_gen.introLoad) {//without, thumbcallback() is called over-and-over again
			
			map_gen.introLoad = false;
			map_gen.firstLoad = false;
			map_gen.fillPhotoObj(photoObjs[0]);			
		
		} else if (map_gen.firstLoad) {//without, thumbcallback() is called over-and-over again
			
			map_gen.firstLoad = false;
			map_gen.fillPhotoObj(photoObjs[indexSel]);
			
			/*
			var photoObj = photoObjs[indexSel];
			map_gen.fillPhoto(	photoSel,
									photoObj.latitude,
									photoObj.longitude,
									photoObj.date,
									photoObj.title,
									photoObj.summary,
									photoObj.db_id);
									*/
/*

			map_gen.map.setCenter(latLngSel, 16);

			document.getElementById("street_panel").style.display='none';     
			document.getElementById("photo_panel").style.display='block';  
			
			document.getElementById("photo_date").innerHTML = dateSel;
			document.getElementById("photo_panel").src = photoSel; 

			map_gen.myPano = new GStreetviewPanorama(document.getElementById("street_panel"));//street_divid));
			map_gen.myPOV = {yaw:370.64659986187695,pitch:-20};
			map_gen.myPano.setLocationAndPOV(latLngSel, map_gen.myPOV);
			GEvent.addListener(this.myPano, "error", map_gen.handleNoFlash);

			*/


		}
	}

	this.photoFillArgs = function (photoObj) {
	
		var onClickFunc = "map_gen.fillPhoto(\"";
		onClickFunc	+= photoObj.filenames	+"\",\"";
		onClickFunc	+= photoObj.latitude	+"\",\"";
		onClickFunc	+= photoObj.longitude	+"\",\"";
		onClickFunc	+= photoObj.date		+"\",\"";
		onClickFunc	+= escape(photoObj.title)		+"\",\"";
		onClickFunc	+= escape(photoObj.summary)		+"\",\"";
		onClickFunc	+= photoObj.db_id		+"\")";

		return onClickFunc;
	}
/*
	this.photoFillArgs = function (filename, lat, lng, date, title, desc, db_id) {
	
		var onClickFunc = "map_gen.fillPhoto(\"";
		onClickFunc	+= filename				+"\",\"";
		onClickFunc	+= lat		+"\",\"";
		onClickFunc	+= lng		+"\",\"";
		onClickFunc	+= date		+"\",\"";
		onClickFunc	+= title	+"\",\"";
		onClickFunc	+= desc		+"\",\"";
		onClickFunc	+= db_id	+"\")";

		return onClickFunc;
	}
	*/

	this.loadCallback = function(photoObjs, update_info_panel_sw) {//update
		
		//if (!update_info_panel_sw) return;

//alert(photoObjs.length);

		map_gen.photoObjs = photoObjs;
		if (photoObjs.length==0) return;
		map_gen.map.clearOverlays();

		map_gen.markers = [];
		map_gen.markerClusterer = null;

		var title = '';
		var introduction = '';
		for (var i = 0; i < photoObjs.length; i++) {
		//for (var i = 0; i < 1; i++) {
			var latlng = new GLatLng(photoObjs[i].latitude, photoObjs[i].longitude);
			//this.map.addOverlay(map_gen.createMarker(latlng, i+1));

			var filenames = photoObjs[i].filenames.split(",");
			var photoBase = filenames[0].replace(/.*?([^\/]+\.jpg)$/, "$1");
			var photo = "./photos/48x48/"+photoBase;//"http://gpfoyer.com/photos/48x48/"+photoBase;
			
			if (photoObjs[i].rating=="1") {
				title		 =  photoObjs[i].title;
				introduction = photoObjs[i].summary;
			}
			//this.map.addOverlay(map_gen.photoMarker(latlng, photo));
			map_gen.markers.push(map_gen.photoMarker(photoObjs[i]));//latlng, photo));
		}
		map_gen.markers.reverse();
		map_gen.mapUpdate();

		if (update_info_panel_sw)
			loadInfo(this.dateSel?this.dateSel:"", title, introduction, photoObjs.length);
			//loadInfo(this.dateSel?dateTran(this.dateSel):"", title, introduction, photoObjs.length);

/*
		var thumbs='';
		for (var i = 0; i < photoObjs.length; i++) {
			var latlng = new GLatLng(photoObjs[i].latitude, photoObjs[i].longitude);
			this.map.addOverlay(map_gen.createMarker(latlng, i+1));

			var filenames = photoObjs[i].filenames.split(",");
			var photoBase = filenames[0].replace(/.*?([^\/]+\.jpg)$/, "$1");
			var photo = "http://gpfoyer.com/photos/48x48/"+photoBase;
			var photoFull = "http://gpfoyer.com/photos/"+photoBase;
			thumbs += "<img src='"+photo+"' class='thumb' onClick='map_gen.fillPhoto(\""+photoFull+"\",\""+photoObjs[i].latitude+"\",\""+photoObjs[i].longitude+"\");'>";
		}

		document.getElementById("thumb_panel").innerHTML = thumbs;
		*/
	}

	this.mapUpdate = function() {
		if (map_gen.markerClusterer != null) map_gen.markerClusterer.clearMarkers();
		map_gen.markerClusterer = new MarkerClusterer(map_gen.map, map_gen.markers, {maxZoom: 14, gridSize: null, styles: null});
	}

	this.photoMarker = function (photoObj) {//latlng, filename) {

		var latlng = new GLatLng(photoObj.latitude, photoObj.longitude);
		//var photoBase = photoObj.filenames.replace(/.*?([^\/]+\.jpg)$/, "$1");
		//var filename = "./photos/"+photoBase;
		var filename = photoObj.filenames;
		
		// Create a base icon for all of our markers that specifies the
		// shadow, icon dimensions, etc.
		var baseIcon = new GIcon(G_DEFAULT_ICON);
		//baseIcon.shadowSize = new GSize(35, 35);
		baseIcon.iconAnchor = new GPoint(24, 24);
		baseIcon.infoWindowAnchor = new GPoint(9, 2);

		//var size = iconData[filename];
		//baseIcon.iconSize = new GSize(size.width, size.height);
		baseIcon.iconSize = new GSize(48, 48);
		
		//baseIcon.shadow = "http://gpfoyer.com/graphics/shadow30.png";
		//baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";

		// Creates a marker whose info window displays the letter corresponding
		// to the given index.
		var photoIcon = new GIcon(baseIcon);
		photoIcon.image = filename;

		// Set up our GMarkerOptions object
		markerOptions = { icon:photoIcon };
		var marker = new GMarker(latlng, markerOptions);

		GEvent.addListener(marker, "click", function() {
			
			map_gen.map.setCenter(latlng, 12);//latlng, 15);//
			
			var myHtml = "<b>#" + filename + "</b><br/>";// + message[number -1];			
			map_gen.map.openInfoWindowHtml(latlng, myHtml);
						
			map_gen.fillPhotoObj(photoObj);
			//loadBoundedThumbs.load(map_gen.map, map_gen.dateSel, map_gen.thumbCallback);
			});
		
		return marker;
	}

	this.createMarker = function (latlng, number) {
		
		var marker = new GMarker(latlng);
		marker.value = number;

		/*
		Markers: http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/examples/advanced_example.html?
		http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008C00,000000&ext=.png
		http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/heart50.png
		people35,45,55 - conv30,40,50 - heart30,40,50

		marker claster:
		http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/src/markerclusterer.js
		http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/src/markerclusterer_packed.js		*/
		
		GEvent.addListener(marker,"click", function() {

			//alert("abc");
			var myHtml = "<b>#" + number + "</b><br/>";// + message[number -1];
			map_gen.map.openInfoWindowHtml(marker.getLatLng(), myHtml);
			map_gen.map.setCenter(marker.getLatLng(), 14);//latlng, 15);//

			////panoClient.getNearestPanorama(latlng, null);
			//map_gen.myPano.setLocationAndPOV(marker.getLatLng(), map_gen.myPOV);
			
			this.myPano = new GStreetviewPanorama(document.getElementById("street_panel"));//street_divid));
			this.myPOV = {yaw:370.64659986187695,pitch:-20};
			this.myPano.setLocationAndPOV(latlng, this.myPOV);
			GEvent.addListener(this.myPano, "error", this.handleNoFlash);

			document.getElementById("street_panel").style.display='block';     
			document.getElementById("photo_panel").style.display='none';    
		});

		return marker;
		}

	this.fillPhotoObj = function (photoObj) {
			
			map_gen.fillPhoto(		photoObj.filenames,
									photoObj.latitude,
									photoObj.longitude,
									photoObj.date,
									photoObj.title,
									photoObj.summary,
									photoObj.db_id);

	}

	this.fillPhoto = function (filename, lat, lng, date, title, desc, db_id) { //when thumb clicked onThumbclick()
	
		//alert(lat);
		
		document.getElementById("media_street_view").style.display='block';     
		document.getElementById("street_panel").style.display='none';     
		document.getElementById("photo_desc").style.display='none';     
		document.getElementById("photo_panel").style.display='block';     

		var latLng = new GLatLng(lat, lng);
		map_gen.myPano = new GStreetviewPanorama(document.getElementById("street_panel"));//street_divid));
		map_gen.myPOV = {yaw:370.64659986187695,pitch:-20};
		map_gen.myPano.setLocationAndPOV(latLng, map_gen.myPOV);
		GEvent.addListener(map_gen.myPano, "error", map_gen.handleNoFlash);
		
		map_gen.map.setCenter(latLng, map_gen.DEFAULT_ZOOM);//latlng, 15);//ZOOM zoom setting

		var zoom = map_gen.DEFAULT_ZOOM+1;
		var static_map	= "url('http://maps.google.com/staticmap?";
		static_map += "zoom="+zoom+"&size=100x107&sensor=false";
		static_map += "&key=ABQIAAAA_KySUQnM7OdWB364sT4rZhTM5gszE-8Ibpgo2SfNvIcq3EeyTBRQfeqdQGms26zIGz761c_rniPhdg";
		static_map += "&markers="+lat+","+lng+",tinyred";
		static_map += "&center="+lat+","+lng+"')";
		//experiment...
		//static_map = "url('../graphics/white1x1_a25.png')";
		document.getElementById("map_thumb").style.background = static_map;  
		//document.getElementById("map_thumb").src = static_map;  
		//alert(static_map);
		/*
		var static_map	= "http://maps.google.com/staticmap?";
		static_map += "zoom=13&size=150x107&sensor=false";
		static_map += "&key=ABQIAAAA_KySUQnM7OdWB364sT4rZhSPgNhxjkuQ4z_exkn_3Ebrz7TAZRRjUKTBb1kifJEa5vqUtpFAyJspSA";
		static_map += "&markers="+lat+","+lng+",tinyred";
		static_map += "&center="+lat+","+lng;
		//experiment...
		//static_map = "../graphics/white1x1_a25.png";
		document.getElementById("map_thumb").src = static_map;  
		//document.getElementById("map_thumb").src = static_map;  
		//alert(static_map);
		*/

		document.getElementById("photo_panel").src = "graphics/pleaseWait.jpg";     
		document.getElementById("photo_panel").src = filename;//"<img src='"+filename+"'>";     
		//document.getElementById("photo_panel").style.background = filename;  
		
		document.getElementById("photo_date").innerHTML = "Photo ID:#"+db_id+"    "+date;
		
		var description = unescape(desc)+""; //to make it String!!
		title = unescape(title)+"";
		if ((description.length + title.length)>4) {
			
			document.getElementById("photo_narration").style.display = "block";

			var content = "<div style='font: bold 13px helvetica, sans-serif;'>"+title+"</div>";
			if (description.length>200) description=description.substr(0,199)+"...";
			content += "<div style='color:black;font-szie:11px;'>"+description+"</div>";
			document.getElementById("photo_narration").innerHTML = content;
		
		} else document.getElementById("photo_narration").style.display = "none";


		/*
		var desc_cont = ""
		desc_cont = "<a href='#' class=photo_edit onClick='photo_editor.go(\""+escape(title)+"\",\""+escape(desc)+"\","+db_id+");'>"+"Edit"+"</a>";
		desc_cont += "<div class=photo_title>"+unescape(unescape(title))+"</div>";
		desc_cont += "<pre>"+unescape(unescape(desc))+"</pre>";
		document.getElementById("photo_desc").innerHTML = desc_cont;
		*/

		if (title.length<2) title = "Click \"Edit\" to set title";
		if (desc.length<2) desc = "Description goes here.";
		photo_editor.init(title, desc, db_id);
		image_controller.db_id = db_id;
		
	}
/*
	this.addMarkers = function (markerCount) {

	  // Add 5 markers to the map at random locations
		// Note that we don't add the secret message to the marker's instance data
		var bounds = this.map.getBounds();
		var southWest = bounds.getSouthWest();
		var northEast = bounds.getNorthEast();
		var lngSpan = northEast.lng() - southWest.lng();
		var latSpan = northEast.lat() - southWest.lat();
		
		for (var i = 0; i < markerCount; i++) {
			var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
			southWest.lng() + lngSpan * Math.random());
			this.map.addOverlay(this.createMarker(latlng, i + 1));
		}
	}*/
}

var table_gen = new table_gen();
function table_gen () {

	this.tableObject	= '';
	this.tableDataObj	= '';

	this.build = function (tableId, tableDataObj) {
		this.tableObject	= document.getElementById(tableId);
		this.tableDataObj	= tableDataObj;
		
		this.buildCaption(tableDataObj.caption);
		this.buildHeader(tableDataObj.header);
		this.buildRows(tableDataObj.rows);
		this.buildFooter(tableDataObj.footer);
	}		

	//Table Caption
	this.buildCaption = function (caption) {
		var newCap = this.tableObject.createCaption();
		newCap.innerHTML = caption;
	}	

	//Header Row
	this.buildHeader = function (header) {
		var newHead	= this.tableObject.createTHead();
		var newHeadRow	= newHead.insertRow(0);
		for (i=0; i<header.length; i++) {
			var newHeadCell	= newHeadRow.insertCell(newHeadRow.cells.length); 
			newHeadCell.innerHTML = header[i];
		}
	}			

	//Table Rows
	this.buildRows = function (rows) {

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

			var trElem = mainTable.insertRow(this.tableObject.rows.length);
			trElem.className = "tr"+i;

			for (j=0; j<rows[i].length; j++) {

				var tdElem = trElem.insertCell(trElem.cells.length);
				tdElem.className = rows[i][j]+j;
				tdElem.innerHTML = rows[i][j];
			}
		}
	}

	//Footer Row
	this.buildFooter = function (footer) {

		if (footer != null) {
			var newFoot	= this.tableObject.createTFoot();
			var newFootRow	= newFoot.insertRow(0);
			for (i=0; i<footer.length; i++) {
				var newFootCell	= newFootRow.insertCell(newFootRow.cells.length);
				newFootCell.innerHTML = footer[i];
			}
		}
	}
}

var select_gen = new select_gen();
function select_gen () {

	this.selectObj			= '';
	this.selectDataArray	= '';
	this.callback			= '';

	this.build = function (selectObj, selectDataArray, callback) {

		this.selectObj			= selectObj;
		this.selectDataArray	= selectDataArray;
		this.callback			= callback;
	
		for (i=0; i<selectDataArray.length; i++) {
			var selectData = selectDataArray[i];
			selectObj.options[selectObj.length] = new Option(selectData.text, selectData.value);//(text,value)
		}

		if (this.selectObj.addEventListener)	//evejrything else except IE
			this.selectObj.addEventListener("change", this.onChange, false);

		else if (this.selectObj.attachEvent)	//IE only
			this.selectObj.attachEvent("onchange", this.onChange);
	}

	this.onChange = function changed() {

		var selectObj = select_gen.selectObj;	//CAUSION: this.selectObj does not work!!
		var selIndex  = selectObj.selectedIndex;

		select_gen.callback(selectObj.options[selIndex]);
	}
}

function loadBookmark(index) {
	var SUMMARY_LIMIT = 1000;
	var bookmark_str = '';
	bookmark_str += "<div class='bookmark_cell' id='bookmark_"+index+"' onClick='loadContent("+index+");' title='Click to view'>";//javascript:loadContent("+i+");'>";

	if (itemObjs[index].filenames.length>5) {			
		var filenames = itemObjs[index].filenames.split(",");
		//bookmark_str += "<image src="+filenames[0]+" class='bookmark_image'>";
		if (filenames[0].match("smashingmagazine.com")		||
			filenames[0].match("ziffdavisinternet.com")		||
			filenames[0].match("noupe.com")) {
			//alert(filenames[0]);

			//bookmark_str += "<image src='http://www.xeeku.com/proxy.php?link="+filenames[0]+"' class='bookmark_image'>";
		
		} else bookmark_str += "<image src="+filenames[0]+" class='bookmark_image'>";

		SUMMARY_LIMIT = 40;
	}
	
	else if (itemObjs[index].video_keys.length>5) {
		var video_keys = itemObjs[index].video_keys.split(",");
		bookmark_str += "<image src='http://img.youtube.com/vi/"+video_keys[0]+"/default.jpg' class='bookmark_image'>";
		SUMMARY_LIMIT = 40;
	}

	bookmark_str += "<div class=bookmark_body>";
	if (unescape(itemObjs[index].host_title).length>3)
		bookmark_str += "<div class=bookmark_subtitle>"+unescape(itemObjs[index].host_title)+"</div>";
	
	var title = unescape(itemObjs[index].title);
	if (title.length>SUMMARY_LIMIT) title = title.substr(0, SUMMARY_LIMIT)+"...";
	bookmark_str += "<div class=bookmark_title>"+title+"</div>";
	bookmark_str += "<div class=bookmark_subtitle>"+unescape(itemObjs[index].date)+"</div>";
	bookmark_str += "</div>";
	
	bookmark_str += "</div>";
	return bookmark_str;
}

var activeIndex=0;
function loadContent(index) {

	var width	= 512;
	var height	= 296;

	var currentObj = document.getElementById("bookmark_"+activeIndex);
	currentObj.style.backgroundColor = "#ffffff";

	activeIndex = index;
	var currentObj = document.getElementById("bookmark_"+index);
	currentObj.style.backgroundColor = "#ccccff";

	var content_str = "";
	if (unescape(itemObjs[index].host_title).length>3)
		var host_title = unescape(itemObjs[index].host_title);
	
	else  {
		var host_title  = itemObjs[index].link;
		if (host_title.length>30) host_title = host_title.substr(0, 30)+"...";
		//host_title		= host_title.replace("/(http:\/\/[^\]+).*/", "$1");
	}
		
	host_title = "<a href='"+itemObjs[index].link+"' class=content_subtitle target='#'>"+host_title+"</a>";
	content_str += "<div class=content_subtitle>"+host_title+"</div>";

	var title = unescape(itemObjs[index].title);
	content_str += "<div class=content_title>"+title;
	//content_str += "<a href='"+itemObjs[index].link+"' style='margin:0 0 4 8;' title='"+itemObjs[index].link+"' target='#'>[Read]</a>";
	content_str += "</div>";

	content_str += "<div class=content_subtitle>"+unescape(itemObjs[index].date)+"</div>";

	if (itemObjs[index].video_keys.length>5) {
		
		var keys = itemObjs[index].video_keys.split(",");
		for (i=0; i<keys.length; i++ ) {

			content_str += "<div class='content_image' style='margin:10 0 10 0'>";
			if (keys[i].match(/^\d+$/)) {

				//alert("find vimeo");
				
				content_str += "<object width='"+width+"' height='"+height+"'><param name='allowfullscreen' value='true' /><param name='movie' value='http://vimeo.com/moogaloop.swf?clip_id="+keys[i]+"&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1'></param><param name='allowscriptaccess' value='always'></param>";				
				content_str += "<embed src='http://vimeo.com/moogaloop.swf?clip_id="+keys[i]+"&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width='"+width+"' height='"+height+"'></embed></object>";

			} else if (keys[i].length>20) {
				
				content_str += "<object width='"+width+"' height='"+height+"'><param name='movie' value='http://www.hulu.com/embed/"+keys[i]+"/0'></param><param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param>";				
				content_str += "<embed src='http://www.hulu.com/embed/"+keys[i]+"/0' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width='"+width+"' height='"+height+"'></embed></object>";

			} else {
				content_str += "<object width='"+width+"' height='"+height+"'><param name='movie' value='http://www.youtube.com/v/"+keys[i]+"&hl=en&fs=1'></param><param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param>";
				
				content_str += "<embed src='http://www.youtube.com/v/"+keys[i]+"&hl=en&fs=1' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width='"+width+"' height='"+height+"'></embed></object>";
			}
				content_str += "</div>";
		}
	}

	if (itemObjs[index].filenames.length>5) {	
		
		var filenames = itemObjs[index].filenames.split(",");

		switch (true)
		{
			case filenames.length == 1:
				content_str += "<img src="+filenames[0]+" width="+width+" class='content_image'>";
				break;
			
			case filenames.length == 2:
				var w = width/2-4;
				content_str += "<img src="+filenames[0]+" width="+w+" style='float:right'class='content_image'>";
				content_str += "<img src="+filenames[1]+" width="+w+" style='margin-right:4' class='content_image'>";
				break;
		
			case filenames.length == 3:
				var w = width/3-4;
				content_str += "<img src="+filenames[0]+" width="+w+" style='float:right'class='content_image'>";
				content_str += "<img src="+filenames[1]+" width="+w+" style='margin-right:4' class='content_image'>";
				content_str += "<img src="+filenames[2]+" width="+w+" style='margin-right:4' class='content_image'>";
				break;		
		}
		
		if (filenames.length>3) {
			
			content_str += "<img src="+filenames[0]+" width="+width+" class='content_image' name='image_0'>";
			
			var fn_count = Math.min(filenames.length, 5);
			var margin_right;
			var pic_w;
			currentImgFn = filenames[0];

			for (i=1; i<fn_count; i++ ) {
				
				pic_w = width/(fn_count-1) - 6;
				content_str += "<img src="+filenames[i]+" width="+pic_w+" style='margin:8 4 8 0;float:right;' class='content_image' name='image_"+i+"' onClick='switchImage("+i+");' title='Click to view'>";
			}
		}
	}

	var summary = unescape(itemObjs[index].summary).replace(/[\r\n\s]{2,}/g,"<p>");
	content_str += "<div class=content_summary>"+summary;//unescape(itemObjs[index].summary);
	content_str += " [Via <a href='"+itemObjs[index].link+"' style='margin:0 0 4 0;' title='"+itemObjs[index].link+"' target='#'>"+host_title+"</a>]";
	content_str += "</div>";
	
	var content_bar = document.getElementById("content_body");
	content_bar.innerHTML = content_str;
	}

function switchImage(index) {

	eval("var currentImage = document.image_0.src");
	eval("var activeImage  = document.image_"+index+".src");
	document.image_0.src = activeImage;
	eval("document.image_"+index+".src = currentImage");
}


function loadHeader(header, sub_header) {

	var header_str = "";
	header_str += "<div class=header_title>";
	header_str += "<div style='font: normal 10px helvetica,sans-serif;line-height:10px;'><i>"+sub_header+"</i></div>";		
	header_str += header;
	header_str += "<div style='font: italic 11px helvetica,sans-serif;line-height:16px;color:#555555;' id='digi_clock'></div>";		
	header_str +="</div>";

	header_str += "<div class=header_subtitle>Mobile and Location Based Photo Publisher"
	header_str += "</div>"
	var owner = user_id.substr(0, 1).toUpperCase() + user_id.substr(1, user_id.length-1);
	var logo = "Xeeku Twitter Photos";//owner + escape("'s Bookmarks");
	header_str += "<img style='margin-left:28px' class='rss_label' src='gd_text.php?text="+logo+"&width=400&rotate=0&font=2&size=24&color=black'>";

	var header_bar = document.getElementById("content_header");
	header_bar.innerHTML = header_str;
	}


function loadInfo (photoDate, title, summary, photoCount) {

	var info_str = "<div class='intro_text'>";
	
	//info_str += "<div style='float:right;text-align:right;'>";		
	//info_str += "<div>Total photos</div>";		
	//info_str += "<div style='font: bold 16px helvetica,sans-serif;line-height:24px;color:#558855;'>"+photoCount+" Photos</div>";		
	//info_str +="</div>";

	//info_str += "<div style='margin:0px;'>Photos taken on: </div>";
	
	/*
	if (photoDate.length>0) {
		info_str += "<div class=day_calendar style='float:left;color:#666666;font: italic 20px helvetica,sans-serif;margin:0 8 0 0'>"+photoDate+"<br>";
		//info_str += "<img style='float:left' src='gd_text.php?text="+photoDate+"&width=300&rotate=0&font=2&size=20&color=black'>";
		//info_str += "<div style='text-align:left;color:#336633;font-size:10px;'>Daily Highlight</div>W";
		info_str += "</div>";
	}
	*/
	
	var rawDate = photoDate+"";
	var week_day = "";

	//var week_day = photoDate;
	var year=rawDate.replace(/(\d{4})\d{4}/, '$1');
	var month=rawDate.replace(/\d{4}(\d\d)\d\d/, '$1');
	var date=rawDate.replace(/\d{6}(\d\d)/, '$1');
	var dateObj = new Date();
	dateObj.setFullYear(year,month-1,date);

	var weekDays = ["Sunday", "Monday","Tuesday","Wendensay","Thursday","Friday","Saturday"];
	week_day = weekDays[dateObj.getDay()];
	var monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December"];
	month = monthNames[month-1];
	var color = "";
	switch (dateObj.getDay())
	{
		case 0: var color="#bb3333";break;
		case 6: var color="#338833";break;
		default: var color="#555555";
	
	}

	if (rawDate.length>0) {
		info_str += "<div class=day_calendar style='font: italic 12px helvetica,sans-serif;color:"+color+"'>";
		info_str += "<div style='padding:4;'>"+week_day+"</div>";
		info_str += "<div style='font:bold 24 Verdana,Geneva,sans-serif;line-height:30px;background-image: url(../graphics/white1x1_a25.png);'>"+date+"</div>";
		info_str += "<div style='padding:2;font: bold 14 Verdana,Geneva,sans-serif;'>"+month+"</div>";
		info_str += "</div>";
	}
	
	//info_str += "<img style='float:left' src='gd_text.php?text="+photoDate+"&width=300&rotate=0&font=2&size=20&color=black'>";
	//info_str += "<div style='text-align:left;color:#336633;font-size:10px;'>Daily Highlight</div>W";

	if (title.length>0) {
		info_str += "<div class=info_title>" + title + "</div>";
	}

	switch(true) {
		case summary.length<2:	summary = "No daily highlight is available.<div style=clear:both></div>";break;
		default:				summary = summary.length>700?summary.substr(0,696)+"...":summary;
	}
	summary = unescape(summary).replace(/(.+)(http:\/\/\S+)(.*)/, "<br><br><a href='$2' target='#'>$1</a> $3");

	info_str += "<div style='line-height:1.4em;text-align:top;'>" + summary + "</div>";
	info_str += "<div style='text-align:right;margin-top:8px;font:italic 11px helvetica,sans-serif;'>click on thumbnail at the bottom or to the right to switch main photo</div></div>";
	info_str += "<div style='clear:both></div>";

	var header_bar = document.getElementById("info_panel");
	header_bar.innerHTML = info_str;
	}

function dateTran(date) {//yyyymmdd

	var rawDate = date+"";

	var year=rawDate.replace(/(\d{4})\d{4}/, '$1');
	var month=rawDate.replace(/\d{4}(\d\d)\d\d/, '$1');
	var date=rawDate.replace(/\d{6}(\d\d)/, '$1');

	var monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December"];
	
	return monthNames[month-1]+" "+date+", "+year;
}

function todayDate() {

	var today = new Date();
	var date = today.getDate();
	var day = today.getDay();
	var year = today.getYear() + 1900;
	var month = today.getMonth(); //0-jan 1=feb...11 dec

	var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30,31, 30, 31];
	if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;
	//alert (monthDays[month]);

	var weekNames = ["Sundary", "Monday","Tuesday","Wendnsday","Thursday","Friday","Saturday"];
	var monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December"];

	return /*weekNames[day]+" "+*/monthNames[month]+" "+date+", "+year;
}

function monthCalendar(index, calendarObjs) {//0: current month, 1-> last month...


	var today = new Date();
	var date = today.getDate();
	var year = today.getYear() + 1900;
	var month = today.getMonth(); //0-jan 1=feb...11 dec
	
	if (month<index) year -= 1;
	today.setYear(year);

	month = (month-index+12)%12;
	today.setMonth(month);

	today.setDate(1);
	var firstWeekday = today.getDay();

	var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30,31, 30, 31];
	if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;
	//alert (monthDays[month]);

	var monthNames = ["January","February","March","April","May","June","July","August","September","October","November","December"];
	var outputStr = "";
	outputStr += "<div class=calendar_title>";
	outputStr += "<div style='font: normal 10px helvetica,sans-serif;line-height:10px;'><i>"+year+"</i></div>";		
	outputStr +=monthNames[month]+"</div>";

	outputStr += "<table><tr style='font-size:9px'>";
	outputStr += "<td style='color:red;'>Sun</td>";
	outputStr += "<td>Mon</td>";
	outputStr += "<td>Tue</td>";
	outputStr += "<td>Wed</td>";
	outputStr += "<td>Thu</td>";
	outputStr += "<td>Fri</td>";
	outputStr += "<td style='color:green'>Sat</td>";
	outputStr += "</tr>";
	var j=1;
	var k=1;
	var firstWeek = true;
	while (j<=monthDays[month]) {
		for (var i=0; i<=6; i++) {
			
			var style='';
			switch(i) {
				case 0: style="color:red;";break;
				case 6: style="color:green;";break;
			}

			if (j==date && index==0) style+="background-color:#eeee88;";

				if (i<firstWeekday && firstWeek) outputStr += "<td></td>";
				
				else {
					firstWeek = false;
					var dayCal = j;
					for (var calIndex in calendarObjs) {

						var photo_ts = calendarObjs[calIndex].photo_calendar;
						var yr=photo_ts.replace(/(\d{4})\d{4}/, '$1');
						var mo=photo_ts.replace(/\d{4}(\d\d)\d\d/, '$1');
						var da=photo_ts.replace(/\d{6}(\d\d)/, '$1');

						if (year==yr && month==mo-1 && j==da) {
							
							var calObj = calendarObjs[calIndex];
							var itemTitle = unescape(calObj.title);
							itemTitle = itemTitle.replace(/\'/g, "-");
							itemTitle = itemTitle.replace(/\+/g, " ");
							//var itemTitle = calObj.title;
							var title = itemTitle+" ("+calObj.photo_count+" photos)";
							
							var on_click = "loadCalendarPhotos.load("+photo_ts+");";
							on_click += "loadThumbs.auto_update=false;";
							on_click += "map_gen.firstLoad = true;";//activate core photo refresh
							on_click += "map_gen.introLoad = false;";//introduction load
							on_click += "document.getElementById(\"tick_panel\").style.display=\"block\";";   
							on_click += "document.getElementById(\"latest_thumbs_panel\").style.display=\"none\";";   
							//on_click += "document.getElementById(\"photo_panel\").src = \"graphics/pleaseWait.jpg\";";     

							on_click += "map_gen.dateSel="+photo_ts+";";//alert('abcd here');
							
							dayCal = "<a href='#' title='"+title+"' onClick='"+on_click+"'>"+j+"</a>";
						}
					}
	
					outputStr += "<td style='"+style+"'>"+dayCal+"</td>";
					j++;
				}

			if (j>monthDays[month]) break;
		}

		outputStr += "</tr>";

		if (j<monthDays[month]) outputStr += "<tr>";
	}
	outputStr += "</table>";
	outputStr += "<div style='margin-bottom:20px'></div>";
	return outputStr;



/*
	var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec";
	
	var nDays = monthDays[today.getMonth()];
	


	

	firstDay = today;
	firstDay.setDate(1);
	testMe = firstDay.getDate();
	if (testMe == 2)
	firstDay.setDate(0);
	startDay = firstDay.getDay();
	document.writeln("<CENTER>");
	document.write("<TABLE BORDER>");
	document.write("<TR><TH COLSPAN=7>");
	document.write(monthNames.substring(today.getMonth() * 3,
	(today.getMonth() + 1) * 3));
	document.write(". ");
	document.write(year);
	document.write("<TR><TH>Sun<TH>Mon<TH>Tue<TH>Wed<TH>Thu<TH>Fri<TH>Sat");
	document.write("<TR>");
	column = 0;
	for (i=0; i<startDay; i++) {
	document.write("<TD width=30>");
	column++;
	}
	for (i=1; i<=nDays; i++) {
	document.write("<TD width=30>");
	if (i == thisDay)
	document.write("<FONT COLOR=\"#FF0000\">")
	document.write(i);
	if (i == thisDay)
	document.write("</FONT>")
	column++;
	if (column == 7) {
	document.write("<TR>");
	column = 0;
	}
	}
	document.write("</TABLE>");
	document.writeln("</CENTER>");
	}
	greeting();
	document.write("</br>");
	calendar();
	document.write("");
	// End -->
	</SCRIPT>
	*/

}

function show_input_pan() {
	var overlayMask = document.getElementById("overlay_mask");
	var entryPanel = document.getElementById("entry_panel");
	overlayMask.style.visibility = "visible";
	entryPanel.style.visibility = "visible";
}

function hide_input_pan() {

	var overlayMask = document.getElementById("overlay_mask");
	var entryPanel = document.getElementById("entry_panel");
	overlayMask.style.visibility = "hidden";
	entryPanel.style.visibility = "hidden";
}
function onSubmit () {
	//var overlayMask = document.getElementById("overlay_mask");
	var entryPanel = document.getElementById("entry_panel");
	//overlayMask.style.visibility = "visible";
	entryPanel.style.visibility = "hidden";
}

var digi_clock = new digi_clock();
function digi_clock () {//update_period) {

	this.t				 = 0;
	this.update_period   = 10000;
	
	this.disp = function() {

		var cal = '';
		var date_obj = new Date();
		cal = date_obj.toLocaleString();
		cal=cal.replace(/(.+):\d\d(.+)/,'$1$2');

		if(document.getElementById('digi_clock'))
			document.getElementById('digi_clock').innerHTML =cal

		window.clearTimeout(this.t);
		this.t = window.setTimeout('digi_clock.disp()', this.update_period);
	}

  	this.disp();
}

var image_controller = new image_controller();
function image_controller () {//update_period) {

	this.type				= 0;
	this.db_id				= 0;
	
	this.click = function(type) {

		this.type = type;

		switch (type) {
			case 1:	//photo
				document.getElementById("map_thumb").style.display='block';     
				document.getElementById("photo_narration").style.display='block';     
				document.getElementById("photo_panel").style.display='block';    
				document.getElementById("street_panel").style.display='none';     
				document.getElementById("photo_desc").style.display='none';     
				break;

			case 2: //street
				document.getElementById("map_thumb").style.display='block';     
				document.getElementById("photo_desc").style.display='none';     
				document.getElementById("street_panel").style.display='block';     
				document.getElementById("photo_panel").style.display='none';    
				break;
		
			case 3:	//photo desc
				document.getElementById("map_thumb").style.display='none';     
				document.getElementById("photo_narration").style.display='none';     
				document.getElementById("street_panel").style.display='none';     
				document.getElementById("photo_panel").style.display='none';    
				document.getElementById("photo_desc").style.display='block';     
				break;

			case 4:	//photo delete
				
				var feedback=confirm("Once click on OK, the photo alone with meta data will be permanently deleted. There will be no undo, preceed with caution.");
				
				if(feedback) {
					deletePhoto.setId(this.db_id, null);
				}

				break;

			case 5:	//photo desc
				document.getElementById("map_thumb").style.display='none';     
				show_input_pan();     
				break;

		}
	}

	this.set_visible = function (visible) {
		if (visible) {
				document.getElementById("photo_overlay").style.display='block'; 
		} else {
				document.getElementById("photo_overlay").style.display='none'; 
		}
	}

}

var photo_editor = new photo_editor();
function photo_editor () {//update_period) {

	this.title_org = '';	
	this.summary_org = '';	
	this.db_id	= '';

	this.init = function(title, summary, db_id) {//loading none-editable
		
		var desc_cont = "";
		if (auth>0) desc_cont = "<a href='#' class=photo_edit onClick='photo_editor.go(\""+escape(title)+"\",\""+escape(summary)+"\","+db_id+");'>"+"Edit"+"</a>";
		desc_cont += "<div class=photo_title>"+unescape(unescape(title))+"</div>";
		desc_cont += "<pre>"+unescape(unescape(summary))+"</pre>";
		
		document.getElementById("photo_desc").innerHTML = desc_cont;
	}

	this.go = function(title, summary, db_id) {//start editable

		this.title_org		= unescape(unescape(title));
		this.summary_org	= unescape(unescape(summary));
		this.db_id			= db_id;

		var desc_cont = "<form name='input_form'>"
		
		desc_cont += "<div style='margin-bottom:8px'>";
		desc_cont += "<div style='float:right'>";
		desc_cont += "<input type='radio' name='permission' style='margin:12 4 0 0'  value='public'  >Public";
		desc_cont += "<input type='radio' name='permission' style='margin:12 4 0 16' value='nonpublic' checked>Non-Public";
		desc_cont += "</div>";
		desc_cont += "<input type='checkbox' name='intro' style='margin:12 4 0 0' value='intro'>Introduction";
		desc_cont += "</div>";
		
		desc_cont += "<input  id='title_edit'  class='photo_editor photo_title' value='"+unescape(unescape(title))+"'>";//
		desc_cont += "<textarea id='summary_edit' class='photo_editor' style='height:60%;margin-bottom:4px' >"+unescape(unescape(summary))+"</textarea>";

		desc_cont += "<button style='float:right;margin-left:4px;' onClick='photo_editor.load();'>Submit</button>";
		desc_cont += "<button style='float:right;margin-left:4px;' onClick='photo_editor.cancel();'>Cancel</button>";
		desc_cont += "</form>";

		document.getElementById("photo_desc").innerHTML = desc_cont;
	}


	this.cancel = function() {//after cancel button pressed. Restore original

		var funcArg = "photo_editor.go(\""+escape(photo_editor.title_org)+"\",\""+escape(photo_editor.summary_org)+"\",\""+photo_editor.db_id+"\");";
		var desc_cont = "<a href='#' class=photo_edit onClick='"+funcArg+"'>"+"Edit"+"</a>";
		desc_cont += "<div class=photo_title>"+photo_editor.title_org+"</div>";
		desc_cont += "<pre class=''>"+photo_editor.summary_org+"</pre>";
		document.getElementById("photo_desc").innerHTML = desc_cont;
	}

	this.load = function() { //after Submit pressed: 1) load new data into none-editable, 2)request server update

		var title		= document.getElementById('title_edit').value;
		var summary		= document.getElementById('summary_edit').value;
		var permission	= document.input_form.permission[0].checked?"public":"private";
		var intro		= document.input_form.intro.checked?"1":"0";

		editPhoto.go(title, summary, permission, intro, this.db_id);//server DB update reqeust (ajax.js)

		//var funcArg = "photo_editor.go(\""+escape(photo_editor.title_org)+"\",\""+escape(photo_editor.summary_org)+"\",\""+photo_editor.db_id+"\");";
		var funcArg = "photo_editor.go(\""+escape(title)+"\",\""+escape(summary)+"\",\""+photo_editor.db_id+"\");";
		var desc_cont = "<a href='#' class=photo_edit onClick='"+funcArg+"'>"+"Edit"+"</a>";
		desc_cont += "<div class=photo_title>"+title+"</div>";
		desc_cont += "<pre>"+summary+"</pre>";
		document.getElementById("photo_desc").innerHTML = desc_cont;
	}

}

function newWindow(url) {

	var content = "<html lang=\"en\">\
					<head>\
						<title>XeekU Photos</title>\
						<link rel=\"stylesheet\" type=\"text/css\" href=\"javascripts/style.css\"/>\
					</header>\
					<body>\
					";
	content += "<img src='"+url+"'>";
	content += "</body></html>";

	mywindow = window.open (url, "mywindow", "location=0,status=0,scrollbars=0,width=976,height=656");
	mywindow.moveTo(100,100);
}