var thumTotalW = 0;

var detailCaption_img = "ul#caption-area li.pict-area img";
var detailCaption_txt = "ul#caption-area li.capt-txt";

var thumPict_class_active = "active";
var thumPict_class_hover  = "on";


function hotelDetailMainPhoto_init() {
    //first pict change active
    $(".thum ul li:first img").addClass(thumPict_class_active);
    

    var thumMargin_r = parseInt($(".thum ul li").css("margin-right"));
    var thumMargin_l = parseInt($(".thum ul li").css("margin-left"));

    $(".thum ul li").each(function() {
    	thumTotalW += $(this).width()+thumMargin_r + thumMargin_l;
    	//click action
    	$("img" , this).hover(
    		function(){ $(this).addClass(thumPict_class_hover); },
    		function(){ $(this).removeClass(thumPict_class_hover); }
    		
    	);
    	$("img" , this).click(function() {
    		changeMainPhoto(this);
    		$(".thum ul li img."+thumPict_class_active).removeClass(thumPict_class_active);
    		$(this).addClass(thumPict_class_active);
    	});
    });

    if($(".thum").width() < thumTotalW){
    	$(".thum ul").css("width",thumTotalW + thumMargin_r);
    }
}

//thumbnail pict click -> change photo
function changeMainPhoto(photoObj) {
	var photo_src = $(photoObj).attr("src");
	var photo_capt_txt = $(photoObj).attr("title");

	$(detailCaption_img).attr("src" , photo_src);
	$(detailCaption_txt).html(photo_capt_txt);
}

$(function(){
    hotelDetailMainPhoto_init();
});