$(function() {
    var $graves = $('#graves');
	var $gList = $('#grave-list');
	var $loading = $('#loading');
	var $gName = $('#g-name');
	var $gSurv = $('#g-survive');
	var $lis	= $graves.find('li');
	var loaded = 0;
	$loading.activity({length: 5, width: 3, color: '#FFFFFF'});
	$lis.each(function(index){
		var $img = $(this).find('img');
		var img_num = index + 1;
		var g_src = './images/haka_' + img_num + '.png';
		$img.attr('src', g_src);
		if (index == 0) {
			$img.css({left:'300px',zIndex:'10'}).show();
		} else if (index == 1) {
			$img.attr({width: '306', height: '196'}).css({left:'584px',zIndex:'9'}).show();
		} else if (index == 2) {
			$img.attr({width: '252', height: '161'}).css({left:'828px',zIndex:'7'}).show();
		} else if (index == 3) {
			$img.attr({width: '152', height: '99'}).css({left:'1020px',zIndex:'5'}).show();
		} else if (index == 9) {
			$img.attr({width: '306', height: '196'}).css({left:'70px',zIndex:'8'}).show();
		} else if (index == 8) {
			$img.attr({width: '252', height: '161'}).css({left:'-120px',zIndex:'6'}).show();
		}
		$img.load(function(){
			++loaded;
			if(loaded == 10){
				$loading.fadeOut('fast');
				$gList.fadeIn(1500);
				$gName.fadeIn(1500);
				$gSurv.fadeIn(1500);
				sID = setInterval(slideLeft, 3500);
				$graves.mouseover(function(){clearInterval(sID)})
				.mouseout(function(){sID = setInterval(slideLeft, 3500)});
			}
		});
	});
	
	function slideLeft() {
		$gImg = $('#grave-list img');
			$gImg.eq(1).animate({width:'360px',height:'230px', left:'300px'}, 1000, 'swing').css('z-index', '10');
			$gImg.eq(2).animate({width:'306px',height:'196px', left:'584px'}, 1000, 'swing').css('z-index', '9');
			$gImg.eq(3).animate({width:'252px',height:'161px', left:'828px'}, 1000, 'swing').css('z-index', '7');
			$gImg.eq(8).animate({width:'180px',height:'115px', left:'-240px'}, 1000, 'swing', function(){$(this).hide();});
			$gImg.eq(9).animate({width:'252px',height:'161px', left:'-120px'}, 1000, 'swing').css('z-index', '6');
			$gImg.eq(4).attr({width: '180', height: '115'}).css({left:'1020px',zIndex:'3'}).show();
			$gImg.eq(0).animate({width:'306px',height:'196px', left:'70px'}, 1000, 'swing', function(){
				$(this).css('z-index', '8');
				fst_tmp = $gList.find('li:eq(0)').html();
				lst_tmp = '<li>'+fst_tmp+'</li>';
				$gList.append(lst_tmp);
				$gList.find('li:last').show();
				$gList.find('li:eq(0)').remove();
				gName = $gList.find('img:eq(0)').attr('title');
				$gName.html(gName);
				gSurv = $gList.find('img:eq(0)').attr('alt');
				$gSurv.html(gSurv);	
			});
	}
});