// Ajax reader
var Photo = Ext.data.Record.create([
   {name: 'author'},
   {name: 'title'},
   {name: 'description'},
   {name: 'metadata'},
   {name: 'camera'},
   {name: 'location'},
   {name: 'latitude'},
   {name: 'longitude'},
   {name: 'date'},
   {name: 'tag'},
   {name: 'thumbnailPath'},
   {name: 'thumbnailWidth'},
   {name: 'thumbnailHeight'},
   {name: 'imagePath'},
   {name: 'imageWidth'},
   {name: 'imageHeight'},
   {name: 'page'},
   {name: 'totalPages'},
   {name: 'totalImages'}
]);

var photoReader = new Ext.data.XmlReader({
	   totalRecords: "count",
	   record: "photo",
	   id: "id"
	}, Photo);

var photoArray;

var mapwin;

function showMap(photoTitle, latitude, longitude) {
	if (! mapwin) {
	    mapwin = new Ext.Window({
	    	closeAction: 'hide',
	        layout: 'fit',
	        title: "Map: " + photoTitle,
	        width: 500,
	        height: 300,
	        contentEl: 'singleMapPanel'
	    });
	}
	mapwin.show();

	var map = new GMap2(document.getElementById("map_canvas"));
	map.setCenter(new GLatLng(latitude, longitude), 13);
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	
	map.addOverlay(new GMarker(new GLatLng(latitude, longitude), { title: photoTitle } ));
}

function parseTags(tagString) {
	if (tagString == null || tagString.length == 0) return null;
	
	var tagArray = new Array();
	var prevI = 0;
	var i = tagString.indexOf('|', 0);	
	while (i > -1) {
		tagArray.push(tagString.substring(prevI, i));

		prevI = i+1;
		i = tagString.indexOf('|', i+1);
	}	
	tagArray.push(tagString.substring(prevI, tagString.length));

	return tagArray;
}

function showPhoto(contextPath, imageId) {
	var oPhoto = photoArray[imageId];
	photoPanel.setTitle(oPhoto.get('title'));

	var oImg = document.createElement("img");
	oImg.style.padding = "10px";
	oImg.src = "/photos/" + oPhoto.get('imagePath');
	oImg.width = oPhoto.get('imageWidth');
	oImg.height = oPhoto.get('imageHeight');

	var oDescriptionTable = document.createElement("table");
	oDescriptionTable.align = "left";
	oDescriptionTable.width = "100%";
	oDescriptionTable.cellSpacing = 0;
	var oRow = oDescriptionTable.insertRow(-1);
	var oCell = oRow.insertCell(-1);
	oCell.className = "x-panel-body-noheader";
	oCell.innerHTML = oPhoto.get('description') + " ";
	oCell.style.padding = "2px";
	oCell.vAlign = "top";
	oCell.rowSpan = 2;
	oCell.colSpan = 2;
	oCell = oRow.insertCell(-1);
	oCell.style.padding = "2px";
	oCell.className = "x-panel-body-noheader";
	oCell.vAlign = "top";
	oCell.innerHTML = oPhoto.get('date') + " / " + oPhoto.get('author');

	oRow = oDescriptionTable.insertRow(-1);
	oCell = oRow.insertCell(-1);
	oCell.style.padding = "2px";
	var oPermaLink = document.createElement("a");
	oPermaLink.href= contextPath + "/photo/view/" + oPhoto.id;
	oPermaLink.innerHTML = "Permalink <img src='" + contextPath + "/static/images/link.png' border='0' height='16' width='16' title='Permalink' align='absbottom'>";
	oCell.appendChild(oPermaLink);

	oRow = oDescriptionTable.insertRow(-1);
	oCell = oRow.insertCell(-1);
	oCell.style.padding = "2px";
	oCell.innerHTML = "Location:";
	oCell.width = "1%";
	oCell = oRow.insertCell(-1);
	oCell.style.padding = "2px";
	if (oPhoto.get('latitude') !== null && oPhoto.get('latitude').length > 0 && oPhoto.get('longitude') !== null && oPhoto.get('longitude').length > 0) {
		var oMapLink = document.createElement("a");
		oMapLink.href = "#";
		oMapLink.onclick = function() { showMap(oPhoto.get('title'), oPhoto.get('latitude'), oPhoto.get('longitude')); return false; };
		oMapLink.innerHTML = oPhoto.get('location') + "&nbsp;<img border='0' height='16' width='16' title='View Map' src='" + contextPath + "/static/images/magnifier.png' align='absbottom'>";
		oCell.appendChild(oMapLink);
	} else {
		oCell.innerHTML = oPhoto.get('location');
	}		 

	oCell = oRow.insertCell(-1);
	oCell.style.padding = "2px";
	var oMailLink = document.createElement("a");
	oMailLink.href = "#";
	oMailLink.onclick = function() { window.open(contextPath + "/photo/sendmail.do?photoId=" + oPhoto.id, "_blank", "directories=no,height=500,width=550,location=no,menubar=no,status=no,toolbar=no,scrollbars=yes"); };
	oMailLink.innerHTML = "E-mail <img src='" + contextPath + "/static/images/email.png' border='0' height='16' width='16' title='E-mail' align='absbottom'>";
	oCell.appendChild(oMailLink);

	oRow = oDescriptionTable.insertRow(-1);
	oCell = oRow.insertCell(-1);
	oCell.style.padding = "2px";
	oCell.innerHTML = "Camera:";
	oCell = oRow.insertCell(-1);
	oCell.style.padding = "2px";
	oCell.innerHTML = "<a href='" + contextPath + "/photo/search.do?search=true&cameraName=" + escape(oPhoto.get('camera')) + "'>" + oPhoto.get('camera') + "</a>";

	oCell = oRow.insertCell(-1);
	oCell.style.padding = "2px";
	var embedDiv = document.createElement("div");
	embedDiv.className = "navigation";
	embedDiv.innerHTML = "Embed";
	var embedPanel = new Ext.Window({
		closeAction: 'hide',
        collapsible: false,
        floating: true,
        title: "To embed this photo...",
        html: "<textarea rows='3' cols='50'><a href=\"http://www.penny-and-eli.com" + contextPath + "/photo/view/" + oPhoto.id + "\"><img src=\"http://www.penny-and-eli.com/photos/" + oPhoto.get('imagePath') + "\" border=\"0\" height=\"" + oPhoto.get('imageHeight') + "\" width=\"" + oPhoto.get('imageWidth') + "\" alt=\"" + escape(oPhoto.get('title')) +" - penny-and-eli.com\" /></a></textarea>"
    });	
	embedDiv.onclick = function() { 
		embedPanel.show(embedDiv);
	};
	oCell.appendChild(embedDiv);

	if (oPhoto.get('metadata') !== null && oPhoto.get('metadata').length > 0) {
		oRow = oDescriptionTable.insertRow(-1);
		oCell = oRow.insertCell(-1);
		oCell.style.padding = "2px";
		oCell.innerHTML = "Meta-data:";
		oCell.vAlign = "top";
		oCell = oRow.insertCell(-1);
		oCell.style.padding = "2px";
		oCell.innerHTML = oPhoto.get('metadata');
	}

	oRow = oDescriptionTable.insertRow(-1);
	oCell = oRow.insertCell(-1);
	oCell.style.padding = "2px";
	oCell.innerHTML = "Tags:";
	oCell = oRow.insertCell(-1);
	oCell.style.padding = "2px";
	var tagArray = parseTags(oPhoto.get('tag'));
	for (var i=0; i<tagArray.length; i++) {
		var oTagLink = document.createElement("a");
		oTagLink.href = contextPath + "/photo/view/tag/" + escape(tagArray[i]) + "?search=true"; 
		oTagLink.innerHTML = tagArray[i];
		oCell.appendChild(oTagLink);

		var spacer = document.createElement("span");
		spacer.innerHTML = "&nbsp;";
		oCell.appendChild(spacer);
	}
	
	var oImgDiv = document.getElementById("displayPanel");
	oImgDiv.innerHTML = "";
	oImgDiv.appendChild(oImg);
	oImgDiv.appendChild(oDescriptionTable);

	var element = Ext.get(oImg);
	element.fadeIn({duration: 2});	
}

var mapWindow;
var map;

function showGroupMap(contextPath) {
	if (photoArray == null || photoArray.length == 0) {
		if (mapWindow) mapWindow.hide();
		return;
	}
	
	var easternPoint;
	var northernPoint;
	var westernPoint;
	var southernPoint;

	if (! mapWindow) {
		mapWindow = new Ext.Panel({
	        title: 'Search Results Map',
	        height: 200,
	        contentEl: 'mapPanel',
	        collapsible:true,
	        renderTo: 'mapContainer'
	    });
	}
	mapWindow.show();

	if (! map) map = new GMap2(document.getElementById("mapPanel"), {size: new GSize(152,200)});
	var photoCount = 0;
	for (var i=0; i<photoArray.length; i++) {
		var oPhoto = photoArray[i];
		if (oPhoto.get('latitude') !== null && oPhoto.get('latitude').length > 0 && oPhoto.get('longitude') !== null && oPhoto.get('longitude').length > 0) {
			var gll = new GLatLng(oPhoto.get('latitude'), oPhoto.get('longitude'));
			if (westernPoint == null || gll.lng() < westernPoint) westernPoint = gll.lng();
			if (southernPoint == null || gll.lat() < southernPoint) southernPoint = gll.lat();
			if (easternPoint == null || gll.lng() > easternPoint) easternPoint = gll.lng();
			if (northernPoint == null || gll.lat() > northernPoint) northernPoint = gll.lat();
			
			if (i == 0) map.setCenter(gll);
			
			var marker = new GMarker(gll, { title: oPhoto.get('title')});
			marker.value = i;
			GEvent.addListener(marker, "click", function() {
				showPhoto (contextPath, this.value);
		    });

			map.addOverlay(marker);
			photoCount++;
		}
	}

	if (photoCount > 0) {
		var centerLatitude = northernPoint == southernPoint ? northernPoint : northernPoint - ((northernPoint - southernPoint) / 2); 
		var centerLongitude = easternPoint == westernPoint ? easternPoint : easternPoint - ((easternPoint - westernPoint) / 2); 
		var centerCoordinates = new GLatLng(centerLatitude, centerLongitude);
		map.setCenter(centerCoordinates);
		
		map.addControl(new GSmallMapControl());
		// resize to fit all markers
		var mapBounds = new GLatLngBounds(new GLatLng(westernPoint, southernPoint), new GLatLng(easternPoint, northernPoint));	
		map.setZoom(map.getBoundsZoomLevel(mapBounds));		
	} else {		
		mapWindow.hide();
	}
}

var currentSlideShowImage = 0;
var currentSlideShowSpeed = 5;
var slideShowTimerId;

function endSlideShow() {
	clearTimeout(slideShowTimerId);
	slideShowTimerId = null;
}

function nextSlideShowImage(contextPath) {
	showPhoto(contextPath, currentSlideShowImage);
	currentSlideShowImage++;
	if (currentSlideShowImage < photoArray.length) { 
		slideShowTimerId = setTimeout(function(){nextSlideShowImage(contextPath);}, currentSlideShowSpeed * 1000);
	}
}

function startSlideShow(contextPath, speed) {
	if (slideShowTimerId != null) {
		endSlideShow();
		return;
	}
	
	if ("fast" == speed) {
		currentSlideShowSpeed = 2;
	} else {
		currentSlideShowSpeed = 6;
	}

	nextSlideShowImage(contextPath);
}

function setPhotoBackgroundColor(color) {
	var oImgDiv = document.getElementById("displayPanel");
	
	oImgDiv.style.backgroundColor = color;
}

function loadSearchResults(contextPath, baseUrl, searchUrl) {
	//create the Data Store
	var store = new Ext.data.Store({
	    url: searchUrl,
	    reader: photoReader
	});

	var loadingMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait, loading...", store:store});
	loadingMask.show();

	store.load({callback: function(records, options, success) {
		var pageCount;
		var currentPage;
		var totalImages;
		var oOutputPanel = document.getElementById('resultsPanel');
		oOutputPanel.innerHTML = "";

		if (records.length == 0) {
			photoPanel.setVisible(false);
			thumbPanel.setTitle("No matching photos found");
			return;
		}
		photoPanel.setVisible(true);
		
		photoArray = records;
		for (i=0; i<records.length; i++) {
			var oPhoto = records[i];
			
			pageCount = parseInt(oPhoto.get('totalPages'));
			currentPage = parseInt(oPhoto.get('page'));
			totalImages = parseInt(oPhoto.get('totalImages'));

			var oImg = document.createElement("img");
			oImg.src = '/photos/' + oPhoto.get('thumbnailPath');
			oImg.border = 0;
			oImg.width = oPhoto.get('thumbnailWidth');
			oImg.height = oPhoto.get('thumbnailHeight');
			oImg.title = oPhoto.get('title');
			oImg.className = 'thumbnail';
			oImg.id = i;
			oImg.onclick = function(){showPhoto(contextPath, this.id);};
			
			oOutputPanel.appendChild(oImg);

			if (i == 0) showPhoto(contextPath, i);
		}

		var oFirstButton = document.createElement("img");
		oFirstButton.height = 16;
		oFirstButton.width = 16;
		oFirstButton.className = 'navigation';
		oFirstButton.align = 'absmiddle';
		if (currentPage == 1) {
			oFirstButton.src = contextPath + '/static/images/first_page_disabled.png';
		} else {
			oFirstButton.src = contextPath + '/static/images/first_page.png';
			oFirstButton.title = 'First Page';
			oFirstButton.onclick = function() {
				loadResultsPage(contextPath, baseUrl, 1);
				return false; 
			};		
		}

		var oBackButton = document.createElement("img");
		oBackButton.height = 16;
		oBackButton.width = 16;
		oBackButton.className = 'navigation';
		oBackButton.align = 'absmiddle';
		if (currentPage == 1) {
			oBackButton.src = contextPath + '/static/images/prev_page_disabled.png';
		} else {
			oBackButton.src = contextPath + '/static/images/prev_page.png';
			oBackButton.title = 'Previous Page';
			oBackButton.onclick = function() {
				loadResultsPage(contextPath, baseUrl, currentPage - 1);
				return false; 
			};		
		}
		
		var oForwardButton = document.createElement("img");
		oForwardButton.height = 16;
		oForwardButton.width = 16;
		oForwardButton.className = 'navigation';
		oForwardButton.align = 'absmiddle';
		if (currentPage == pageCount) {
			oForwardButton.src = contextPath + '/static/images/next_page_disabled.png';
		} else {
			oForwardButton.src = contextPath + '/static/images/next_page.png';
			oForwardButton.title = 'Next Page';
			oForwardButton.onclick = function() {
				loadResultsPage(contextPath, baseUrl, currentPage + 1);
				return false; 
			};		
		}

		var oLastButton = document.createElement("img");
		oLastButton.height = 16;
		oLastButton.width = 16;
		oLastButton.className = 'navigation';
		oLastButton.align = 'absmiddle';
		if (currentPage == pageCount) {
			oLastButton.src = contextPath + '/static/images/last_page_disabled.png';
		} else {
			oLastButton.src = contextPath + '/static/images/last_page.png';
			oLastButton.title = 'Next Page';
			oLastButton.onclick = function() {
				loadResultsPage(contextPath, baseUrl, pageCount);
				return false; 
			};		
		}

		var oPage = document.createElement("span");
		oPage.innerHTML = "&nbsp;&nbsp;[Page " + currentPage + " of " + pageCount + "]&nbsp;&nbsp;";
		
		var oPager = document.createElement("div");
		oPager.style.marginTop = "6px";
		oPager.appendChild(oFirstButton);
		oPager.appendChild(oBackButton);
		oPager.appendChild(oPage);
		oPager.appendChild(oForwardButton);
		oPager.appendChild(oLastButton);

		oOutputPanel.appendChild(oPager);

		thumbPanel.setTitle("Photo Results - " + totalImages + " found");
		
		showGroupMap(contextPath);
	}});
}

function loadResultsPage(contextPath, baseUrl, pageNumber) {
	thumbPanel.setTitle("Loading...");
	loadSearchResults(contextPath, baseUrl, baseUrl + "&page=" + pageNumber);
}