$(function(){
	
	$dw = $(document).width();
	$itemArray = [
	    $('#men'),
	    $('#woman'),
	    $('#button01'),
	    $('#button02')
	];
	
	$(document).bind('mousemove', function(e){ 
    	$cX = e.pageX;
		$itemArray[2].css({'margin-right':$cX / $dw * 50 - 25 + 'px'});
		$itemArray[3].css({'margin-right':$cX / $dw * 42 - 21 + 'px'});
		$itemArray[1].css({'margin-right':$cX / $dw * 36 - 18 + 'px'});
		$itemArray[0].css({'margin-right':$cX / $dw * 30 - 15 + 'px'});
	});
	
	/* Gallery Init */
	$curr = 0;
	$total = $('#tmbs li').length;
	$now = 0;
	$('#tmbs ul').css('width',$total*128+'px');
	$('#tmbs .prev').click(function(){
		if($curr > 0){
			$curr--;
			goto($curr)
		}
		return false;
	});
	$('#tmbs .next').click(function(){
		if($curr < $total-5){
			$curr++;
			goto($curr)
		}
		return false;
	});
	$('#container .prev').click(function(){
		if($now > 0){
			if($now > 0) $now--;
			if($now < $total-2) $curr = $now-2;
			if($curr < 0) $curr = 0;
			goto($curr,true,$now)
		}
		return false;
	});
	$('#container .next').click(function(){
		if($now < $total){
			if($now < $total-1) $now++;
			if($now > 2) $curr = $now-2;
			if($curr > $total-5) $curr = $total-5;
			goto($curr,true,$now);
		}
		return false;
	});
	$('#tmbs li a').click(function(){
		index = $(this).parent().index();
		if(index < 2) $curr = 0;
		if(index > 2){
			$curr = index-2;
			if(index > $total-3) {
		        $curr = $total-5;
		    }
		}
		//if(index > $total-5) index = $total-5;
		goto($curr,true,index);
		return false;
	})
	function goto(to,container,now){
		$('#tmbs ul').animate({'margin-left':-1*128*to+'px'},{duration:300,complete:function(){
			if(container){
		        $('#tmbs li').removeClass('active');
		        $('#tmbs li:eq('+now+')').addClass('loading');
				$('#tmbs li:eq('+now+') i').append('<span style="display:none;"/>');
				$('#tmbs li:eq('+now+') i span').fadeIn(500);
				show(now);
			}
		}});
	}
	function show(to){
		li = $('#tmbs li:eq('+to+')');
		img = new Image()
		$(img).load(function(){
			$('#container img').fadeOut(300,function(){
				$(this).remove()
				$('#desc').text($('a',li).attr('title'));
				$('#container').prepend(img);
				$(img).fadeIn(300);
			});
			$('i span',li).fadeOut(500,function(){$(this).remove()});
			li.removeClass('loading').addClass('active');
		}).attr({'src':$('a',li).attr('href'),'height':'500','style':'display:none;'});
	}
	
});