var TOP_FORM = "<div><div style=position:absolute;left:0px;top:0px><img id=hoverbackground width=" + mediaPanelProps.dialogWidth + " height=" + mediaPanelProps.dialogHeight + " src=images/hoverform/background-hp.png></div><div style=position:absolute;top:29px;right:30px><img style=cursor:pointer src=images/hoverform/close.gif onclick=\"hideModalDialog()\" onmouseover=\"this.src='images/hoverform/close_over.gif';\" onmouseout=\"this.src='images/hoverform/close.gif'\"></div><div id=hoverFormMainPanel style=position:absolute;top:30px;left:30px;>";
var BOTTOM_FORM = "</div></div>";

var mediaInfo = null;

var IMAGE_WIDTH = 91;
var IMAGE_HEIGHT = 61;
var SPACE_WIDTH = 30;
var SLIDE_DISTANCE = mediaPanelProps.slideDistance;
var SHIFT_VALUE = 6;
var SLIDER_FACTOR_DEFAULT = 4;
var IMAGE_BATCH=10;

var lastReflectionIndex = 0;

function showMediaPanelForSchool(type, trail, schoolName){
	showMediaPanel(type, trail, null, null, true, true, true, schoolName)
}

function showMediaPanel(mediaInfoObj){
	mediaInfo = mediaInfoObj;
	loadLists();
	mediaInfo.selectedIndex = 0;
	buildMediaPanel();
	if(mediaInfo.type == VIDEO_TYPE){
		document.getElementById("mediaPanel").style.backgroundColor = "#000000";
	}
	setTimeout("postCreationUpdates()", 100);
}

function switchMediaPanel(type){
	mediaInfo.type = type;

	loadLists();	
	mediaInfo.selectedIndex = 0;
	document.getElementById("mediaPanel").innerHTML = "";
	document.getElementById("hoverFormMainPanel").innerHTML = createMediaSection() + createMediaSidePanel();
	if(mediaInfo.type == VIDEO_TYPE){
		document.getElementById("mediaPanel").style.backgroundColor = "#000000";
	}
	setTimeout("postCreationUpdates()", 100);
}

function postCreationUpdates(){
	resetSliderMediaText();
	//setReflections(0);
	if(document.getElementById("mediaObjectId")){
		document.getElementById("mediaObjectId").style.display = "";
	}
}

function setReflections(startIndex){
	var list = mediaInfo.getList();
	var i = startIndex; 
	for(i= startIndex; i <startIndex+IMAGE_BATCH && i < list.length; i++){
		addReflection("img_" + i);
	}
	lastReflectionIndex = i;
}

function loadLists(){
	var data = "";
	if(mediaInfo.hasVideo && mediaInfo.type == VIDEO_TYPE && mediaInfo.videoList == null){
		if(mediaInfo.isPoint()){
			data = loadHtmlDoc("functions.php?method=getVideos&tag=" + escape(mediaInfo.keyword) + "&trail=" + mediaInfo.trail + "&waypointid=" + mediaInfo.waypointid);
		}else{
			data = loadHtmlDoc("functions.php?method=getVideos&tag=" + mediaInfo.trail + "&trail=" + mediaInfo.trail);
		}
		mediaInfo.videoList = eval(trim(data));
	}
	if(mediaInfo.hasPanorama && mediaInfo.type == PANORAMA_TYPE && mediaInfo.panoramaList == null){
		if(mediaInfo.isPoint()){
			data = loadHtmlDoc("functions.php?method=getPanoramas&trail=" + mediaInfo.trail + "&waypointid=" + mediaInfo.waypointid);
		}else{
			data = loadHtmlDoc("functions.php?method=getPanoramas&trail=" + mediaInfo.trail);
		}
		mediaInfo.panoramaList = eval(trim(data));
	}
	if(mediaInfo.hasPicture && mediaInfo.type == PICTURE_TYPE && mediaInfo.pictureList == null){
		if(mediaInfo.isPoint()){
			data = loadHtmlDoc("functions.php?method=getPictures&trail=" + mediaInfo.trail + "&waypointid=" + mediaInfo.waypointid);
		}else{
			data = loadHtmlDoc("functions.php?method=getPictures&trail=" + mediaInfo.trail);
		}
		mediaInfo.pictureList = eval(trim(data));
	}
}

function buildMediaPanel(){
	if(mediaInfo.getList().length > 0){
		createModalDialog();
		var html = TOP_FORM + createMediaSection(true) + createMediaSidePanel() + BOTTOM_FORM;
		displayModalDialog(mediaPanelProps.dialogWidth, mediaPanelProps.dialogHeight, html, getY("bodycontainer") + mediaPanelProps.startingPositionVerticalShift);
	}
}

function createMediaSidePanel(){
	var html = '<div style="position:absolute;left:' + mediaPanelProps.sidePanelWidth + 'px;top:10px;"><table width=66><tr>';
	if(mediaInfo.hasVideo){
		if(mediaInfo.type == VIDEO_TYPE){
			html = html + '<tr><td ><img src="images/hoverform/videosicon-a-s.png"></td></tr>';
		}else{
			html = html + "<tr><td style=\"cursor:pointer\" onclick=\"javascript:switchMediaPanel(VIDEO_TYPE)\"><img src=\"images/hoverform/videosicon-a.png\" onmouseout=\"this.src='images/hoverform/videosicon-a.png';\" onmouseover=\"this.src='images/hoverform/videosicon-a-h.png';\"></td></tr>";
		}
	}else{
		html = html + '<tr><td ><img src="images/hoverform/videosicon-a-i.png"></td></tr>';
	}
	if(mediaInfo.hasPanorama){
		if(mediaInfo.type == PANORAMA_TYPE){
			html = html + '<tr><td style=padding-top:20px><img src="images/hoverform/360icon-a-s.png"></td></tr>';
		}else{
			html = html + "<tr><td style=padding-top:20px;cursor:pointer onclick=\"javascript:switchMediaPanel(PANORAMA_TYPE)\"><img src=\"images/hoverform/360icon-a.png\" onmouseout=\"this.src='images/hoverform/360icon-a.png';\" onmouseover=\"this.src='images/hoverform/360icon-a-h.png';\"></td></tr>";
		}
	}else{
		html = html + '<tr><td style=padding-top:20px><img src="images/hoverform/360icon-a-i.png"></td></tr>';
	}
	if(mediaInfo.hasPicture){
		if(mediaInfo.type == PICTURE_TYPE){
			html = html + '<tr><td style=padding-top:20px><img src="images/hoverform/photosicon-a-s.png"></td></tr>';
		}else{
			html = html + "<tr><td style=padding-top:20px;cursor:pointer onclick=\"javascript:switchMediaPanel(PICTURE_TYPE)\"><img src=\"images/hoverform/photosicon-a.png\" onmouseout=\"this.src='images/hoverform/photosicon-a.png';\" onmouseover=\"this.src='images/hoverform/photosicon-a-h.png';\"></td></tr>";
		}
	}else{
		html = html + '<tr><td style=padding-top:20px><img src="images/hoverform/photosicon-a-i.png"></td></tr>';
	}
	html = html + "</table></div>";
	return html;
}

function createMediaSection(firstTimeSetup){
	var html = '<div style="position:absolute;top:8px;left:10px;" width=' + mediaPanelProps.mediaSectionWidth + ' height=' + mediaPanelProps.mediaSectionHeight + ' id="mediaPanel"><div id=screencontainer>' + createMediaScreen(firstTimeSetup) + "</div></div>";
	html = html + '<div id=sliderMediaItemsPanel style="position:absolute;left:29px;top:' + (mediaPanelProps.mediaSectionHeight-108) + 'px;height:100px;width:' + (mediaPanelProps.mediaSectionWidth-90) + 'px">' + createSliderMediaItemsPanel() + "</div>";
	return html;
}

function createSliderMediaItemsPanel(){
	var width = mediaPanelProps.mediaSectionWidth;
	return '<div style="position:absolute;top:37px"><a href="javascript:slideLeft()"><img src="images/hoverform/previous.gif" ' + 
				"onmouseover=\"this.src='images/hoverform/previous-h.gif'\" onmouseout=\"this.src='images/hoverform/previous.gif'\"></a></div>" + 
		   '<div id=mediaPanelItems style="position:absolute;left:50px;width:' + (width-90) + 'px;overflow:hidden">' + createMediaItems() + '</div>' + 
		   '<div style="position:absolute;left:' + (width-25) + 'px;top:37px"><a href="javascript:slideRight()"><img src="images/hoverform/next.gif" ' + 
				'onmouseover="this.src=\'images/hoverform/next-h.gif\'" onmouseout="this.src=\'images/hoverform/next.gif\'"></a></div>' + 
		   '<div style="position:absolute;left:50px;top:80px;width:' + (width-90) + 'px;overflow:hidden;z-index:10;color:#ffffff" id=sliderMediaText></div>';
}

function createMediaItems(){
	var list = mediaInfo.getList();
	var html = "<div id=mediaItemsTable style=position:relative;left:0px;top:0px;width:" + (list.length * (IMAGE_WIDTH+SPACE_WIDTH)) + "px><table style=width:" + (list.length * (IMAGE_WIDTH+SPACE_WIDTH)) + "px><tr>";
	var i = 0;
	for(i; i < list.length; i++){
		var onload = "";
		if(i == IMAGE_BATCH || (i == list.length-1 && i < IMAGE_BATCH)){
			onload = " onload=\"setReflections(0)\" ";
		}
		var img = '<div style="position:relative" onmouseover="setSliderMediaText(' + i+ ');" onmouseout="resetSliderMediaText();">' +
					'<img class=reflect width=' + IMAGE_WIDTH + ' height=' + IMAGE_HEIGHT + onload + ' id=img_' + i + ' src=' + createPngImage(list[i].thumbnail) + '>' +
					'<div style="position:absolute;top:0px;left:0px;width:' + (IMAGE_WIDTH-2) + 'px;height:' + (IMAGE_HEIGHT-2) + 'px;" onmouseover="this.style.border=\'1px solid #888800\'" onmouseout="this.style.border=\'0px solid\'"><table width=100% height=100%><tr><td>&nbsp;</td></tr></table></div>' ;

		if(i != mediaInfo.selectedIndex){
			html = html + "<td id=mediaItem_" + i + " valign=top align=center " + 
				"style=\"letter-spacing:0.05em;font-size:6pt;font-weight:bold;color:#ffffff;cursor:pointer;\" width=" + IMAGE_WIDTH + " height=90 " + "onclick=\"javascript:playMedia(" + i + ")\">" + 
					img + "</td><td width=" + SPACE_WIDTH + ">&nbsp;</td>";
		}else{
			html = html + "<td id=mediaItem_" + i + "  valign=top align=center " + 
				"style=\"letter-spacing:0.05em;font-size:6pt;font-weight:bold;color:#F9FB37;\" width=" + IMAGE_WIDTH + " height=90 >" + img + "</td><td style=width:" + SPACE_WIDTH + "px>&nbsp;</td>";
		}
	}
	html = html + "</tr></table></div>";
	return html;
}

function setSliderMediaText(i){
	document.getElementById("sliderMediaText").innerHTML = mediaInfo.getList()[i].title;
}

function resetSliderMediaText(location_optional){
	var thumbs = 0;
	if(!location_optional){
		thumbs = getTotalDisplayedThumbs();
	}else{
		thumbs = getTotalThumbsAtPos(location_optional);
	}
	document.getElementById("sliderMediaText").innerHTML = thumbs + "/" + mediaInfo.getList().length;
}
	

function createMediaScreen(firstTimeSetup){
	return mediaInfo.getList()[mediaInfo.selectedIndex].createHtml(mediaPanelProps.mediaScreenWidth, mediaPanelProps.mediaScreenHeight, firstTimeSetup);
}

function playMedia(index){
	document.getElementById("mediaItem_" + mediaInfo.selectedIndex).style.cursor = "pointer";
	document.getElementById("mediaItem_" + mediaInfo.selectedIndex).style.color = "#ffffff";
	document.getElementById("mediaItem_" + mediaInfo.selectedIndex).onclick = new Function("playMedia(" + mediaInfo.selectedIndex + ")");
	mediaInfo.selectedIndex = index;
	document.getElementById("mediaItem_" + mediaInfo.selectedIndex).style.cursor = "";
	document.getElementById("mediaItem_" + mediaInfo.selectedIndex).style.color = "#F9FB37";
	document.getElementById("mediaItem_" + mediaInfo.selectedIndex).onclick = "";
	document.getElementById("mediaPanel").innerHTML = "";
	document.getElementById("mediaPanel").innerHTML = '<div id=screencontainer>' + createMediaScreen() + '</div>';
	
}

var timerValue = 0;
var sliderFactor = 0;
var isSliding = false;
function slideLeft(){
	if(isSliding)return;
	var viewportWidth = stripPX(document.getElementById("mediaPanelItems").style.width);
	var left = stripPX(document.getElementById("mediaItemsTable").style.left);

	if(left < 0){
		slide(left+Math.min(SLIDE_DISTANCE, Math.abs(left)), SHIFT_VALUE);
	}
} 

function slideRight(){
	if(isSliding)return;
	var viewportWidth = stripPX(document.getElementById("mediaPanelItems").style.width);
	var left = stripPX(document.getElementById("mediaItemsTable").style.left);
	var width = stripPX(document.getElementById("mediaItemsTable").style.width);

	if(left + width > viewportWidth){
		slide(left-Math.min(SLIDE_DISTANCE, width - (Math.abs(left) + viewportWidth)), -1*SHIFT_VALUE);
	}
}

function slide(to, shiftValue){
	isSliding = true;
	if(shiftValue < 0){
		var totalThumbsAtPos = getTotalThumbsAtPos(to);
		if(totalThumbsAtPos > lastReflectionIndex - 5){
			setReflections(lastReflectionIndex);
		}
	}
	sliderFactor = SLIDER_FACTOR_DEFAULT;
	timerValue = setTimeout(function(){automatedShift(to, shiftValue);}, 40);
	resetSliderMediaText(to);
}

function automatedShift(to, shiftValue){
	var current = stripPX(document.getElementById("mediaItemsTable").style.left);
	var stopTimer = false
	if((shiftValue < 0 && to > current) || (shiftValue > 0 && to < current)){
		isSliding = false;
		stopTimer = true;
		//clearInterval(timerValue);
		return;
	}
	
	if(sliderFactor > 1){
		shiftValue *= sliderFactor;
		sliderFactor--;
	}
	var newValue = current + shiftValue;
	if((shiftValue < 0 && newValue <= to) || (shiftValue > 0 && to <= newValue)){
		isSliding = false;
		newValue = to;
		stopTimer = true;
		//clearInterval(timerValue);
	}
	document.getElementById("mediaItemsTable").style.left = newValue + "px";
	if(!stopTimer){
		setTimeout(function(){automatedShift(to, shiftValue);}, 40);
	}
}

function getTotalDisplayedThumbs(){
	var current = stripPX(document.getElementById("mediaItemsTable").style.left);
	return getTotalThumbsAtPos(current);
}

function getTotalThumbsAtPos(position){
	var viewportWidth = stripPX(document.getElementById("mediaPanelItems").style.width);
	var possibleThumbs = Math.ceil((viewportWidth + -1*position)/(IMAGE_WIDTH + SPACE_WIDTH));
	return Math.min(possibleThumbs, mediaInfo.getList().length);
}

var VIDEO_TYPE = 0;
var PANORAMA_TYPE = 1;
var PICTURE_TYPE = 2;

function MediaInfo(type, trail, waypointid, hasVideo, hasPanorama, hasPics, keyword){
	this.panoramaList = null;
	this.pictureList = null;
	this.videoList = null;
	this.selectedIndex = -1;
	this.type = type;
	this.trail = trail;
	this.keyword = keyword;
	this.hasVideo = hasVideo;
	this.hasPanorama = hasPanorama;
	this.hasPicture = hasPics;
	this.waypointid = waypointid
}

MediaInfo.prototype.isPoint = function(){
	return this.waypointid != null;
}

MediaInfo.prototype.getList = function(){
	if(this.type == VIDEO_TYPE){
		return this.videoList;
	}
	if(this.type == PANORAMA_TYPE){
		return this.panoramaList;
	}
	if(this.type == PICTURE_TYPE){
		return this.pictureList;
	}
}

function Picture(title, url, thumbnail){
	this.url = url;
	this.title = title;
	this.thumbnail = thumbnail;
	this.isSimpleThumbnail = false;
}

Picture.prototype.createHtml = function(width, height, hidden){
	var widthCss = 'max-width:' + width + 'px;width:expression(this.width>' + width + '?' + width + ':true);';
	var heightCss = 'max-height:' + height + 'px;height:expression(this.height>' + height + '?' + height + ':true);';
	var string = 
		'<table width=' + width + ' height= ' +height + '>\
				<tr><td align=center valign=middle><img style="' + widthCss + heightCss + '"\
						 src="' + this.url + '"\
						 alt="' + this.title + '">\
		 </td></tr></table>';
	return string;
}

function Panorama(title, url, thumbnail, panoramaid, description, fileType){
	this.url = url;
	this.title = title;
	this.thumbnail = thumbnail;
	this.isSimpleThumbnail = false;
	this.panoramaid = panoramaid;
	this.description = description;
	this.fileType = fileType;
}

Panorama.prototype.createHtml = function(width, height, hidden){
	if(this.fileType == "fl"){
		return p2q_EmbedFlashString(this.url , width, height,
			    'play', 'true',
			    'cache','true',
			    'allowFullscreen','true',
			    'autoplay','true'); 
	}
	if(this.fileType == "qt"){
		return p2q_EmbedQuicktimeString(this.url, width, height,
				'cache', 'true',
				'controller', 'true', 
				'autoplay', 'true');
	}
	return "";
}

function Video(title, youtubeId, description){
	this.url = "http://www.youtube.com/?v=" + youtubeId;
	this.title = title;
	this.thumbnail = "http://img.youtube.com/vi/" + youtubeId + "/default.jpg";
	this.picture = "http://img.youtube.com/vi/" + youtubeId + "/0.jpg";
	this.youtubeId = youtubeId;
	this.isSimpleThumbnail = true;
	this.description = description;
}

Video.prototype.createHtml = function(width, height, hidden){
	var string = '<object ' + (hidden?"style=display:none":"") + ' width=' + width + ' height=' + height + ' id=mediaObjectId> \
				  <param name="movie" value="http://www.youtube.com/v/' + this.youtubeId + '&rel=0"></param>\
				  <param name="wmode" value="transparent"></param>\
				  <embed\
				  	src="http://www.youtube.com/v/' + this.youtubeId + '&rel=0"\
					type="application/x-shockwave-flash"\
					wmode="transparent"\
					width="' + width + '"\
					height="' + height + '"></embed>\
				</object>';
	return string;
}