var pictures;
var selectedPicture;

var isPicListRegistered;

function RegisterPicListScroll(){
	if( isPicListRegistered ) return;
	var d = document.getElementById("pageBody");
	if (document.body.addEventListener){
		d.addEventListener('DOMMouseScroll', function(oEvent) {scrollPicList(oEvent, oEvent.detail); }, false);
	}
	else
		d.onmousewheel = function() { scrollPicList(event, event.wheelDelta); return false; }
	isPicListRegistered=true;
}

function openPicViewer( picturesJSO ){
	runServerOperation( picturesJSO+"?a="+Math.floor(Math.random()*100), null, openPicViewer_Callback, picturesJSO );
	
}

function openPicViewer_Callback( picturesJSO, returnObj ){
	
	fileDateArr = picturesJSO.slice(-14, -4).split("-");
	fileDate = fileDateArr[1] + "/" + fileDateArr[2] + "/" + fileDateArr[0];
	
	var BreadCrumbHTML = "";
	BreadCrumbHTML += "<a href='javascript:closePicBrowser()' style='color:#93AFDB;'>home</a> :: Pictures " + fileDate;
	document.getElementById("breadCrumbTrail").innerHTML = BreadCrumbHTML;

	pictures = returnObj.pictures;

	DrawPicViewer();
}

function DrawPicViewer(){
	var firstPic;
	selectedPicture = 0;
	html = "<div id='picList' style='position:absolute; top:0px; left:0px; height:480px; width:146px; background:#FFF; overflow:auto; text-align:center;'>";
	for( i=0; i<pictures.length; i++ ){	
		url       = pictures[i].img;
		url_thumb = pictures[i].thumb;
		url_full  = pictures[i].full;
		caption   = pictures[i].caption;

		if( i==0 ) firstPic = url;

		var top = i * 95;
		html += "<div id='picList"+i+"' style='position:absolute; border:2px SOLID #FFF; width:124px; height:94px; left:0px; top:"+top+"px; background:#EEE; text-align:center;' ";
		html += "onClick='swapPreview("+i+");'";
		html += ">";
		html += "<img src='"+url_thumb+"'>";
		html += "</div>";
	}
	html += "</div>";
	html += "<div id='picPreview' style='position:absolute; top:0px; left:155px; width:640px; height:480px; text-align:center; background:#EEE;'>";
	html += "<img src='"+firstPic+"'>";
	html += "</div>"
	html += "<div id='loadingPreview' class='thumb_wrapper' style='position:absolute; left:153px; top:388px;'><img src='pics/IMG_0776_thumb.jpg'></div>";
	html += "<div id='caption' class='text' style='position:absolute; top:482px; left:155px; width:640; text-align:center'><i>"+pictures[selectedPicture].caption+"</i></div>";
	html += "<div style='position:absolute; left:155px; top:498px; width:640px; border-top:1px SOLID #DDD; visibility:hidden;'>";
	html += "<div id='btnPrev' style='position:absolute; cursor:pointer; top:2px; left:0px; visibility:hidden;' onclick='swapPreview( selectedPicture - 1 );'><img src='images/prev.png'></div>";
	html += "<div id='btnPlay' style='position:absolute; cursor:pointer; top:2px; left:311px;' onclick='startSlideshow();'><img src='images/play.png'></div>";
	html += "<div id='btnNext' style='position:absolute; cursor:pointer; top:2px; left:622px;' onclick='swapPreview( selectedPicture + 1 );'><img src='images/next.png'></div>";
	html += "</div>";
	document.getElementById("pageBody").innerHTML = html;

	swapPreview(0);
	RegisterPicListScroll();
}

function scrollPicList( a, b ){
	var pList = document.getElementById("picList");
	if( document.all ){
		if( b>0 ){
			pList.scrollTop = pList.scrollTop - 95;
			swapPreview( selectedPicture - 1 );	
		}
		else{
			pList.scrollTop = pList.scrollTop + 95; 
			swapPreview( selectedPicture + 1 );
		}
	}
	else{
		if( b>0 ){
			pList.scrollTop = pList.scrollTop + 95; 
			swapPreview( selectedPicture + 1 );
		}
		else{
			pList.scrollTop = pList.scrollTop - 95;
			swapPreview( selectedPicture - 1 );
		}
	}
}

function swapPreview( i ){
	if( i < 0 ) return false;
	if( i >= pictures.length ) return false;

	if( pictures.length == 1 ) document.getElementById('btnPlay').parentNode.style.visibility = "hidden";
	else document.getElementById('btnPlay').parentNode.style.visibility = "visible";
	
	if( i == 0 ) document.getElementById('btnPrev').style.visibility = "hidden";
	else document.getElementById('btnPrev').style.visibility = "visible";
	

	if( i == pictures.length-1 ) document.getElementById('btnNext').style.visibility = "hidden";
	else document.getElementById('btnNext').style.visibility = "visible";


	url = pictures[i].img;
	document.getElementById("picList"+selectedPicture).style.border = "2px SOLID #FFF";
	document.getElementById("picList"+i).style.border = "2px SOLID #99F";
	document.getElementById("caption").innerHTML = pictures[i].caption;
	setPreviewImage( pictures[i].img, pictures[i].thumb );
	selectedPicture = i;
}

var slideshowPlaying = false;

function startSlideshow(){
	if( slideshowPlaying ) stopSlideShow();
	else {
		slideshowPlaying = true;
		document.getElementById("btnPlay").childNodes[0].src="images/pause.png";
		setTimeout( "nextSlide();", 3000 );
	}
}

function nextSlide(){
	if( !slideshowPlaying || selectedPicture == pictures.length-1 )
		stopSlideShow();
	else {
		if( tmpImg.complete ) swapPreview( selectedPicture + 1 ); 
		setTimeout( "nextSlide();", 3000 );
	}
}

function stopSlideShow(){
	slideshowPlaying = false;
	document.getElementById("btnPlay").childNodes[0].src="images/play.png";
}


var tmpImg = new Image();
tmpImg.onload = setPreviewImage_Callback;

function setPreviewImage( url, thumb ){
	document.getElementById("loadingPreview").style.visiblity = "visible";
	document.getElementById("loadingPreview").childNodes[0].src = thumb;
	setAlpha('loadingPreview', 100);
	tmpImg.src = url;
}

function setPreviewImage_Callback(){
	document.getElementById("picPreview").childNodes[0].src = tmpImg.src;
	for( i=0; i<=10; i++ ){
		setTimeout( "setAlpha('loadingPreview', "+((10-i)*10)+");", i*50 );
	}
}

function closePicBrowser(){
	document.getElementById("pageBody").innerHTML="";
	document.getElementById("breadCrumbTrail").innerHTML = "";
	openStoriesList("xml/teasers.jso");
}