/*
 * last update: 24.09.2009
 * file: jquery.init.js
*/

$(document).ready(function () {
	
	// images array
	var images = new Array();
	var position = 0;
	var index = 0;
	var testindex = 0;
	var containerWidth = 0;
	
	// set some important css
	$("body").css("overflow-x","hidden"); 
	
	// push all images into the array
	$(".initImage").each(function(){
		images.push(this);
	});
	
	// calculate the container width and set it in the dom
	//for(var i=0;i<=images.length-1;i++) {
	//	containerWidth = containerWidth + 1 + images[i].width;
	//}
	//containerWidth = containerWidth + 30;
	
	// every image get a click event
	$(".initImage").click(function () {
		
		testindex = $(".initImage").index(this);
		
		if( testindex != index ) {
		
			index = testindex;
			
			if ( index >= 1 ) {
			
				for(var i=0;i<=(index-1);i++) {
					position = (position - images[i].width) - 1;
				}
			
				$("#imageContainer").animate( { left: position } , 500 );
				
				position = 0;
				
				// test's....
				//position = position - (images[index].width + 1);
				//$("#imageContainer").animate( { left: position } , 500 );	
				//++index;
			}
		}
    });
	
	// the back button get its own handler
	$("#goBack").click(function() {
		position = 0;
		$("#imageContainer").animate( { left: position } , 500 );
	});
	
});