// JavaScript Document


$(document).ready(function(){

sY = 39; /* height of li.sub */
fY = 150; /* height of maximum sub lines * sub line height */
/* end CONFIG */

/* open first list item */
animate (fY)
picInit()
$("#slide .sub").click(function() {
    var index = $("#slide .sub").index(this);
	if (this.className.indexOf('clicked') != -1 ) {
		animate(sY)
		$(this).removeClass('clicked')
			   .css("color", "#fff");
	    
		}
		else {
		animate(sY)
		$('.clicked').removeClass('clicked')
					 .css("color", "#fff");
		$(this).addClass('clicked');
		
		animate(fY)
		$('.middleright img').css({display : 'none'}).removeClass('curImg');
		$('.middleright img').eq(index).addClass('curImg').fadeIn('fast');
		
		
		
		
	}
});

function animate(pY) {
$('.clicked').animate({"height": pY + "px"}, 500);
}

$("#slide .sub").hover(function(){
$(this).css("color", "#efa20f");
},function(){
if (this.className.indexOf('clicked') == -1) {
$(this).css("color", "#fff");
}
});

function picInit() {
$('.middleright').replaceWith('<div class = "middleright"><img class = "hoverImg" src="product-images/1-printsimage.jpg" /> <img class = "hoverImg" src="product-images/2-coffeetablealbums.jpg" /> <img class = "hoverImg" src="product-images/3-minialbums.jpg" /> <img class = "hoverImg" src="product-images/4-canvas.jpg" /> <img class = "hoverImg" src="product-images/5-cards.jpg" /> <img class = "hoverImg" src="product-images/6-digitalpackages.jpg" /> </div>');
$('.middleright img').css("width", "473px").not(':first').css({ display : 'none', height : '586px', width: '473px'});
}

function picAnimate() {


}

});
/* ]]> */