$(function() {
	//the loading image
	var $loader		= $('#st_loading');
	//the ul element 
	var $list		= $('#st_nav');
	//the current image being shown
	var $currImage 	= $('#bgpicture');
	var $height;
	//let's load the current image 
	//and just then display the navigation menu
	$loader.hide();
	$currImage.show();
	setTimeout(function(){
			$list.animate({'left':'0px'},500);
			
		},1000);
	$($currImage).load(function(){
		//slide out the menu
		
	}).attr('src',$currImage.attr('src'));
	//$('#mirrorLogo').show();
	//calculates the width of the div element 
	//where the thumbs are going to be displayed
	buildThumbs();
	
	function buildThumbs(){
		$list.children('li.album').each(function(){
			var $elem 			= $(this);
			var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
			var $thumbs 		= $thumbs_wrapper.children(':first');
			//each thumb has 180px and we add 3 of margin
			var finalW 			= $thumbs.find('img').length * 183;
			$thumbs.css('width',finalW + 'px');
			//make this element scrollable
			makeScrollable($thumbs_wrapper,$thumbs);
		});
	}

	function openList($thisitem){
		var $this = $thisitem;
		hideThumbs();
		$this.addClass('st_arrow_up').removeClass('st_arrow_down');
		var $elem = $this.closest('li');
		$elem.addClass('current').animate({'height':'180px'},1000);
		var $thumbs_wrapper = $this.parent().next();
		$thumbs_wrapper.show(1000);
		$('#st_details').fadeOut(500);
		$('#product').fadeOut(500);
		$('#shoppingCart').fadeOut(500);
		
	}
	function closeList($thisitem){
		var $this = $thisitem;
		$this.addClass('st_arrow_down').removeClass('st_arrow_up');
		hideThumbs();
		$('#st_details').fadeIn(500);
		$('#product').fadeIn(500);
		$('#shoppingCart').fadeIn(500);
		
		}
	//clicking on the menu items (up and down arrow)
	//makes the thumbs div appear, and hides the current 
	//opened menu (if any)
	$list.find('.st_arrow_down').live('click',function(){
		openList($(this));
	});

	$list.find('.st_arrow_up').live('click',function(){
		closeList($(this));
	});
	
	$list.find('.st_link').live('click',function(){
		$(this).find('.st_arrow_down').click();
		$(this).addClass('st_link_opened').removeClass('st_link');
	});

	$list.find('.st_link_opened').live('click',function(){
		$(this).find('.st_arrow_up').click();
		$(this).addClass('st_link').removeClass('st_link_opened');
	});
	
	//clicking on a thumb, replaces the large image
	$list.find('.st_thumbs img').bind('click',function(){
		var $this = $(this);
		//$loader.show();
		$('<img class="st_preview"/>').load(function(){
			var $this = $(this);
			var $currImage = $('#product').children('img:first');
			$this.insertBefore($currImage);
			$loader.hide();
			/*$currImage.fadeOut(2000,function(){
				$(this).remove();
			});*/
		}).attr('src',$this.attr('alt'));
		$('.st_arrow_up').click();
		}).bind('mouseenter',function(){
			$(this).stop().animate({'opacity':'1'});
		}).bind('mouseleave',function(){
			$(this).stop().animate({'opacity':'1'});
		//$('#st_details').fadeIn(500);	
	});
	$('#makeres').click(function(){
		$('#sepet').append('<li><ul><li><input name="delete" class="delete" type="button" value="sil" /></li><li>erdem Oval</li><li>1</li><li>150 TL</li></ul></li>');
		$("#shoppingCart").css("height",$height+20);
		$height=$("#shoppingCart").css("height");
		//alert($height);
		if($("#shoppingCart").css('right')!="0px"){
		$('#shopBtn').click();
		}
	});
	
	$('#shopBtn').bind('click',function(){
		if($("#shoppingCart").css('right')=="0px"){
			//$("#shoppingCart").animate({height:50},{duration: 1000,easing: "easeOutBounce"});
			$("#shoppingCart").animate({'right':'-400px'},1000);
			//$("#shoppingCart").animate({height:$height},{duration: 1000,easing: "easeOutBounce"});	
		}else{
			$("#shoppingCart").animate({'right':'0px'},1000);			
			//$("#shoppingCart").animate({height:$height},{duration: 1000,easing: "easeOutBounce"});	
		}
	});
	$('#sepet').find('.delete').live('click',function(){
		//alert($(this).parent().parent().id);
		setTimeOut($(this).parent().parent().fadeOut(1000),1000);
		$(this).parent().parent().parent().remove();
	});
	
	//function to hide the current opened menu
	function hideThumbs(){
			 $list.find('li.current').find('.st_thumbs_wrapper')
			 .fadeOut(500)
			 .andSelf()
			 .find('.st_link span')
			 .addClass('st_arrow_down')
			 .removeClass('st_arrow_up');
			 $list.find('li.current')
			 .animate({'height':'50px'},600,function(){
				$(this).removeClass('current');
			 })
	}

	//makes the thumbs div scrollable
	//on mouse move the div scrolls automatically
	function makeScrollable($outer, $inner){
		var extra 			= 800;
		//Get menu width
		var divWidth = $outer.width();
		//Remove scrollbars
		$outer.css({
			overflow: 'hidden'
		});
		//Find last image in container
		var lastElem = $inner.find('img:last');
		$outer.scrollLeft(0);
		//When user move mouse over menu
		$outer.unbind('mousemove').bind('mousemove',function(e){
			var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
			var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
			$outer.scrollLeft(left);
		});
	}
	
	$('.st_link').hover(function() { //mouse in
		$(this).animate({ paddingLeft: '50px' },{duration: 500,easing: "easeOutQuad"});
	}, function() { //mouse out
		$(this).animate({ paddingLeft: '20px' },{duration: 500,easing: "easeOutQuad"});
	});
});

/*MENU*/
$(document).ready(function() {
			$('a.nudge').hover(function() { //mouse in
				$(this).animate({ paddingLeft: '20px' },400);
			}, function() { //mouse out
				$(this).animate({ paddingLeft: '0px' }, 1000);
			});
		});
$(document).ready(function() {	

	//Background color, mouseover and mouseout
	var colorOver = '#31b8da';
	var colorOut = '#1f1f1f';

	//Padding, mouseover
	var padLeft = '20px';
	var padRight = '20px';
	
	//Default Padding
	var defpadLeft = $('#menu li a').css('paddingLeft');
	var defpadRight = $('#menu li a').css('paddingRight');
		
	//Animate the LI on mouse over, mouse out
	$('#menu li').click(function () {	
		//Make LI clickable
		window.location = $(this).find('a').attr('href');
		
	}).mouseover(function (){
		
		//mouse over LI and look for A element for transition
		$(this).find('a')
		.animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
		.animate( { backgroundColor: colorOver }, { queue:false, duration:200 });

	}).mouseout(function () {
	
		//mouse oout LI and look for A element and discard the mouse over transition
		$(this).find('a')
		.animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
		.animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
	});	
	
	//Scroll the menu on mouse move above the #sidebar layer
	/*$('#sidebar').mousemove(function(e) {

		//Sidebar Offset, Top value
		var s_top = parseInt($('#sidebar').offset().top);		
		
		//Sidebar Offset, Bottom value
		var s_bottom = parseInt($('#sidebar').height() + s_top);
	
		//Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs
		var mheight = parseInt($('#menu li').height() * $('#menu li').length);
	
		//I used this coordinate and offset values for debuggin
		$('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
		$('#debugging_status').html(Math.round(((s_top - e.pageY)/100) * mheight / 2));
			
		//Calculate the top value
		//This equation is not the perfect, but it 's very close	
		var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
		
		//Animate the #menu by chaging the top value
		$('#menu').animate({top: top_value}, { queue:false, duration:800});
	});*/

	
});