/**

	Movie page JavaScript code.
	
	this page uses some calls to the jQuery library mostly in order to pull in the ability to move the images about.
	
	author:	Andrew Fisher (andrew.fisher@xmlinfinity.com)
	version:	0.3
	
**/

var imageCount = 0;
var windowsize = 10; // optimum window size
var windowview = 10; // current window view
var windowstart = 0;
var thezindex = 101; // used to make sure zindexes go upwards

// so we find out how many pics we have on load so we know where we're at.
$(document).ready(function(){
	imageCount = $("div#image_list img").length;
	
	// turn off the previous button
	//$("div#moviefooter a.prev").hide();
	
	// turn off the next button if not got to image count
	if (windowsize >= imageCount) {
		//$("div#moviefooter a.next").hide();
	}

	// now we set up the pop up thing for the mouse over of the images	
	$("div#image_list a img").mouseover(function(e){
			
		// get the position of the rollover
		var offset = $(this).offset();
		e.stopPropagation();
		
		// get the id of the link so we know which damn div to swtich on.
		var theid = $(this).parent().attr("id");
		theid = theid.substring(5);

		
		// now get the height of the popup.
		var moviefloaterheight = $("#moviedetails_" + theid).height();
		
		/**$('#status').html("doc offset: " + offset.left + ", " + offset.top + " :: this offset: " + this.offsetLeft + ", " + this.offsetTop + " screen height: " + $(window).height() + " :: scroll pos: " + scrollpos + " :: screeny " + screeny + " :: pic h" + moviefloaterheight);**/
		
		
		
		$("#moviedetails_" + theid)
			.css('left', offset.left + "px")
			.css('top', (offset.top - 44 - moviefloaterheight) + "px")
			.css('z-index', thezindex++)
			.show();
			
		if ($(this).hasClass('last')) {
			$("#moviedetails_" + theid).css('left', (offset.left - 40) + "px");
		}
	});
	
	$("div#image_list a img").mouseout(function(){
		// get the id of the link so we know which damn div to swtich on.
		var theid = $(this).parent().attr("id");
		theid = theid.substring(5);
	
		$("#moviedetails_" + theid)
			.animate({opacity: 1.0}, 200)
			.fadeOut("fast", function(){
				//$(this).remove();
			});
	});
	
});


function seeNext() {
	// we use this function to advance the window position. 
	if (windowstart + (windowsize * 2) > imageCount) {
		//windowstart = imageCount - windowsize;
		windowstart += windowsize;
		windowview = imageCount - windowstart;
		
	} else {
		windowstart += windowsize;
		windowview = windowsize;

	}
	displayImages();
}

function seePrevious() {
	// use this function to move the window position backwards.
	if (windowstart - windowsize < 0) {
		windowstart = 0;
	} else {
		windowstart -= windowsize;
	}
	windowview = windowsize;
	displayImages();
}

function displayImages() {
	// this function actually displays the images, using the window position and slicing the array list in jquery

	var ws = windowstart;
	var we = windowstart + windowview;

	// switch off all of the images
	$("div#image_list img").attr("class", "off");
	// switch on all the items in the window
	$("div#image_list img").slice(ws, we).attr("class", "on");
	// set the margin of the last one to that of the last item.
	$("div#image_list img:eq(" + (we -1) + ")").attr("class", "on last");

	// now deal with the navigation:
	if (ws == 0) {
		// at the start turn off prev
		//$("div#moviefooter a.prev").hide();
	} else {
		// turn it on
		//$("div#moviefooter a.prev").show();
	} 
	
	if (we == imageCount) {
		// at the end turn off next
		//$("div#moviefooter a.next").hide();
	} else {
		// turn it on
		//$("div#moviefooter a.next").show();
	}
	
}