//SCROLLING SIDEBAR CODE// 

var ignoreNextClick = false;

function scrollAmount(){
	var temp = new Array();
	temp = $('sidebar_scrollarea').style.top.split("px");
	return parseFloat(temp[0]);
}

function initializeScrollbar(){
	 s1 = new Control.Slider('scrollbar_slider','scrollbar',{axis:'vertical'});
	 s1.options.onSlide = function(value){
		$('sidebar_scrollarea').style.top = -($('sidebar_scrollarea').getHeight()-$('sidebar_scrollview').getHeight()) * value;
	 };
	 
	 s2 = new Draggable('sidebar_scrollarea',{constraint: 'vertical', starteffect:false, endeffect: false, reverteffect:false});
	 s2.options.onDrag = function(){
		
		var top = scrollAmount();
		var v = ( top) / ($('sidebar_scrollview').getHeight() - $('sidebar_scrollarea').getHeight());
		s1.setValue( v );
	 }
	 s2.options.onStart = function(){
		ignoreNextClick = true;
	 }
	 s2.options.onEnd = function(){
		var top = scrollAmount();
		var topMax =  $('sidebar_scrollarea').getHeight() - $('sidebar_scrollview').getHeight();
		
		if (top > 0){
			new Effect.Move('sidebar_scrollarea',{ duration: 0.25, x: 0, y: -top, mode: 'relative'});
		} else if (-top > topMax){
			new Effect.Move('sidebar_scrollarea',{ duration: 0.25, x: 0, y: (-top-topMax), mode: 'relative'});
		}
		
		
	 }
 }
//BROWSER CODE//

var motion = false;

//load the thumbnails into the sidebar. We want to wait to do this, to ensure that the browser
//gives top priority in the load queue to the big image in the browser.

setTimeout(function(){
	var html = "";
	for (i = 0; i < images.length; i++){
		html = html + "<img onclick='jumpToIndex("+i+");' style='width:120px; height:120px; margin-left:6px; margin-top:5px;' src='"+URLForImage(i,120,120)+"'>";
	}
	$("sidebar_scrollarea").innerHTML = html;
	initializeScrollbar();
}, 2000);

setTimeout(backgroundLoadNext,1000);

//also, begin loading the larger images. We want the sliding to be as smooth as possible, and most
//people will click one of the first five images.

var loadedImages = new Array; 
var prevLoadedImage = 0;
function backgroundLoadNext(){ 
	prevLoadedImage++; 
	loadedImages[prevLoadedImage] = new Image;
	loadedImages[prevLoadedImage].src = URLForImage(prevLoadedImage,750,600);
	loadedImages[prevLoadedImage].onload = backgroundLoadNext;
}

function URLForImage(s,w,h){
	return "http://www.gotow.net/creative/img.php?f("+images[s]+")+w("+w.toString()+")+h("+h.toString()+")";
}

//this function is called when the effect has completed. We update the buttons at the bottom of
//the browser and prepare to reset the browser to its initial state (you can't keep sliding to
//the left - we have to jump back to the center without the user noticing).

function goCompleted(obj){	
	jumpToIndex(currentIndex);
	a = setTimeout("goReset();",100);
}

//we wait 100ms to actually move the scroll area, because in internet explorer changing the 
//background of the center table cell is not instantaneous as it is in all other browsers.

function goReset(){
	$("browser_scrollarea").style.left = -750;
}

//begin a slide. c should be +1, or -1 indicating the direction to slide. 

function go(c){
	if (motion == false && (currentIndex + c) < images.length && (currentIndex+c) >= 0){
		currentIndex = currentIndex + c;
		motion = c;
			
		$("browser").innerHTML = "";
		new Effect.Fade("hover_nav_play_button",{duration:0.0});
	
		/*
		if(loadedImages[currentIndex] === null){
			loadedImages[currentIndex] = new Image;
			loadedImages[currentIndex].onload = goReady;
			loadedImages[currentIndex].src = URLForImage(currentIndex,750,600);
		} else*/
		//we're not gonna wait for the page to load anymore, because it makes the buttons seem
		//unresponsive. we try to load the images before the user can get to them, but it if doesn't
		//work just go anyway.
			goReady();			
	}
}

//called when the next image has been loaded. Now we put it in the background of the next cell,
//and begin the slide!

function goReady(){
	if (motion == -1){			
		$("browserprev").style.background = "url('"+URLForImage(currentIndex, 750, 600)+"')";
		new Effect.Move('browser_scrollarea', { duration: 0.5, x:750, y: 0, mode: 'relative', afterFinish: goCompleted });
	}else{		
		$("browsernext").style.background = "url('"+URLForImage(currentIndex, 750, 600)+"')";
		new Effect.Move('browser_scrollarea', { duration: 0.5, x:-750, y: 0, mode: 'relative', afterFinish: goCompleted });
	}
}

function jumpToIndex(index){
	if (ignoreNextClick){
		ignoreNextClick = false;
		return;
	}
	var visibleHeight = $("sidebar_scrollview").getHeight();
	var totalHeight = $("sidebar_scrollarea").getHeight();
	
	var k = totalHeight/(images.length);
	
	var firstVisible = (-scrollAmount()/k);
	var lastVisible = (-scrollAmount() + visibleHeight)/k-1;

	//alert("Index: "+index.toString()+" First: "+firstVisible.toString()+" Last: "+lastVisible.toString());
		
	var amount = 0;
	if (index < firstVisible)
		amount = (firstVisible-index)*k;
	else if (index > lastVisible)
		amount = (lastVisible-index)*k;
	
	if (amount != 0){
		new Effect.Move('sidebar_scrollarea', {duration: 0.5, x:0, y: amount, mode:'relative'});
		s1.setValue((scrollAmount()+amount) / (visibleHeight - totalHeight));
	}
	currentIndex = index;
	
	if (currentIndex == 0)
		$("hover_prev").style.visibility = "hidden";
	else
		$("hover_prev").style.visibility = "inherit";
	
	if (currentIndex == images.length-1)
		$("hover_next").style.visibility = "hidden";
	else
		$("hover_next").style.visibility = "inherit";
		
	$("browser").style.background = "url('"+URLForImage(index,750,600)+"')";
	
	setTimeout('motion = false',100);
	
	$("browser").innerHTML = "";

	if (images[currentIndex].lastIndexOf("mov") != -1)
		new Effect.Appear("hover_nav_play_button",{duration:0.5});
	else
		new Effect.Fade("hover_nav_play_button",{duration:0.0});
}

function play(){
	var video_url = "http://www.gotow.net/creative/content/"+images[currentIndex];
	html = '<object style="margin:auto;" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"';
	html = html + 'codebase="http://www.apple.com/qtactivex/qtplugin.cab" id="movie1">'; 
	html = html + '<param name="src" value="'+video_url+'">';
	html = html + '<param name="AUTOPLAY" value="true">';
	html = html + '<param name="CONTROLLER" value="false">';
	html = html + '<embed src="'+video_url+'" id="movie1" name="movie1" enablejavascript="true" bgcolor="black" scale="Aspect" width="750" height="470"';
	html = html + ' controller="false" autoplay="true">';
	html = html + '</object>';

	$("browser").innerHTML = html;
	$("browser").style.background = "none";
	
	new Effect.Fade("hover_nav_play_button",{duration:0.1});
}