$(function () { 

	// Stack initialize
	var openspeed = 300;
	var closespeed = 300;



	function open_cup(cup_id){


		// set alt attribute of the cup
		$('#'+cup_id+'').attr('alt','open_cup');

		if( $( document ).scrollTop() >= 530 ){

		    throw_out_posters(cup_id);
		}else{
		    //move the cup to its anchor position
		    $('html, body').animate({scrollTop:530}, 300, function ( e) { 

			throw_out_posters(cup_id);
		    });
		}

	}

	function throw_out_posters(cup_id){

		var vertical = 0;
		var horizontal = 0;

		var $el = $("#"+cup_id+" .stack .front_side");

		$el.next().children().each(function(){
			$(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);
			vertical = vertical + 60;
			horizontal = (horizontal+.75)*2;
		});
		$el.next().animate({top: '-50px', left: '27px'}, openspeed).addClass('openStack')
		    .find('li a>img').animate({width: '50px', marginLeft: '5px'}, openspeed);

		// add class so that animation on image hover can work now when stack is open
		$el.next().find('li a').addClass("doit");

		// Do animation on image hovers
		var browser=navigator.appName;
		$('#'+cup_id+' .stack li a.doit').hover( function(){
			if( browser == "Microsoft Internet Explorer" ) { 
			    $("img",this).animate({width: '56px'}, 100);
			    $("span",this).animate({marginRight: '-20px'});
			} else {
			    $("img",this).animate({width: '56px'}, 100);
			    $("span",this).animate({marginRight: '30px'});
			}
		    }, function(){
			//alert( 'sdf' );
			if( browser == "Microsoft Internet Explorer" ) { 
			    $("img",this).animate({width: '50px'}, 100);
			    $("span",this).animate({marginRight: '-50px'});
			} else {
			    $("img",this).animate({width: '50px'}, 100);
			    $("span",this).animate({marginRight: '0px'});
			}
		});

	}


	function close_cup(cup_id){

		//reverse the open cup

		// set alt attribute of the cup
		$('#'+cup_id+'').attr('alt','closed_cup');


		var $el = $("#"+cup_id+" .stack .front_side");

		//move the cup to its anchor position
		$('#'+cup_id+'').removeAttr("style");

		$el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);
		$el.next().find('li a>img').animate({width: '70px', marginLeft: '5'}, closespeed);
		$el.next().find('li a').removeClass("doit");
		//$el.animate({paddingTop: '35px'});
		
		// Disable the animation on image hovers
		$('#'+cup_id+' .stack li a').unbind();
	    
	}

	// Function for cup_left 
	$('#cup_left .stack .front_side img').live('click',function( e){

		$el = $("#cup_left");
		var t = new Date().getTime();

		if( ( t - $('#cup_left .stack .back_side').attr('alt')) < 200 ){
		    // Prevent the click for those who are doing it for the fun of it
		    e.preventDefault();					
		}else{

			if( $el.attr('alt') == "closed_cup") { 

			    open_cup('cup_left');

			} else {

			    close_cup('cup_left');
		        }
			// write the current click timestamp 
			$('#cup_left .stack .back_side').attr('alt', t);
		}

	});

	$('#cup_left .stack .front_side img').live( 'mouseover', function( e){

		$el = $("#cup_left");
		var t = new Date().getTime();

		if( ( t - $('#cup_left .stack .back_side').attr('alt')) < 200 ){
			// do nothing
			
		}else{

			if( $el.attr('alt') == "closed_cup") { 

			    open_cup('cup_left');

			} else {

			    close_cup('cup_left');
		        }
			// write the current timestamp 
			$('#cup_left .stack .back_side').attr('alt', t);
		}
		
	});


	// Function for cup_right 
	$('#cup_right .stack .front_side img').live('click',function(){

		$el = $("#cup_right");
		var t = new Date().getTime();

		if( ( t - $('#cup_right .stack .back_side').attr('alt')) < 200 ){
			    // Prevent the click for those who are doing it for the fun of it
			    e.preventDefault();		
		}else{

			if( $el.attr('alt') == "closed_cup") { 

			    open_cup('cup_right');

			} else {

			    close_cup('cup_right');
		        }
			// write the current timestamp 
			$('#cup_right .stack .back_side').attr('alt', t);
		}

	});

	$('#cup_right .stack .front_side img').live( 'mouseover', function(){

		$el = $("#cup_right");
		var t = new Date().getTime();

		if( ( t - $('#cup_right .stack .back_side').attr('alt')) < 200 ){
		    // do nothing
		}else{
		    //console.log( $('#cup_right .stack .back_side').attr('alt'));
			if( $el.attr('alt') == "closed_cup") { 

			    open_cup('cup_right');

			} else {

			    close_cup('cup_right');
		        }
			// write the current timestamp 
			$('#cup_right .stack .back_side').attr('alt', t);
		}

	});


    });