// This is the ready function which is executed once the page is ready
$(document).ready( function() {

	// !!! This variable must be declared do not forget this !!!
	banner_image_idx = 0;

	// make the banner the first banner image
	$("div#banner img:eq(0)").show();

	// left arrow click
	$("img#arrow-left").click( function() {
		// prepend last link to front of the coins div
		$("div#coins").prepend( $("div#coins a:last").remove() );
		// register for mouse events
		registerCoin( $("div#coins img:first") );
	});

	// right arrow click
	$("img#arrow-right").click( function() {
		// append first link to the end of the coins div
		$("div#coins").append( $("div#coins a:first").remove() );
		// register for mouse events
		registerCoin( $("div#coins img:last") );
	});

	//$("#coins").css( "overflow","hidden" );
	//$("#coins").css( "height","100" );

	// register mouse enter, mouse leave, and click for all coins
	$("img.coin").each( function(){
		registerCoin( this );
	});

	// position the player in the top right of the banner
	//$("div#player").css( { "top":$("div#banner").offset().top, "left":$("div#banner").offset().left + 910 } );  

	// player pause button
	$("img#pause").click( function(){
		window.clearInterval( banner_interval );
		$(this).hide();
		$("img#play").show();
	});

	// player play button
	$("img#play").click( function(){
		banner_interval = window.setInterval( "swapBannerImage(1)",5000 );
		$(this).hide();
		$("img#pause").show();
	});

	// player backward button
	$("img#backward").click( function(){
		swapBannerImage(-1);
	});

	// player forward button
	$("img#forward").click( function(){
		swapBannerImage(1);
	});

	// start the swap banner image interval every 5 seconds
	banner_interval = window.setInterval( "swapBannerImage(1)",5000 );

});

// swaps the banner image by hiding the current
// calculates the next image index
// then showing the next image
function swapBannerImage(value) {

	// add the value which can be +1 or -1
	var new_idx = banner_image_idx + value;
	
	// if the new index is less than zero add the image length until not less than zero
	while( new_idx < 0 ){ new_idx += $("img.banner_image").length; }

	// hide the current image
	$("div#banner img:eq(" + banner_image_idx + ")").hide();

	// calculate the new banner image index by modulus the length of images
	banner_image_idx = new_idx % $("img.banner_image").length;

	// show the next image
	$("div#banner img:eq(" + banner_image_idx + ")").show();

}

// registers coin mouse enter and leave events
// each coin image represents two states
// moving the top in a negative direction
// half the image size reveals the bottom half
// when the coin is clicked move top back down
function registerCoin( coin ) {

	$( coin ).mouseenter( function(){

		$(this).css( "top",-100 );
	
	}).mouseleave( function(){
	
		$(this).css( "top",0 );
	
	}).click( function(){

		$(this).css( "top",0 );

	});;

}