/*

코드 작성 예.................

항상 <DIV id = "main">에서 부터 레이어 삽입

글로벌 변수
puzzle.view.call_page_url		//페이지 넘김시 Call시키는 URL (default : '');
puzzle.view.domain				//현 호스트 도매인정보값 (예:http://ebook.puzzle.com)
puzzle.view.bookcode			//현재 북코드
puzzle.view.skin				//현재 스킨명
thumb_xml						//현재 스킨xml 변수

메소드
puzzle.view.gotoPage()			//해당페이지이동



$(document).ready(function(){
	//여기서 부터 코드 시작
});
*/

thumb_xml = '';
thumb_init_flag = 0;
thumb_flag = 0;
thumb_totalCnt = 0;
thumb_setOutCnt = 7;
thumb_start_range = 0;
thumb_end_range = 0;

$(document).ready(function(){

	var html  = "";
	html +="<div id='thumbnail'>";
	html +="<ul><li class='thumbnail_left' id='thumbnail_bnt_left'></li>";
	html +="<li class='thumbnail_center' id='thumbnail_area'></li>";
	html +="<li class='thumbnail_rigth' id='thumbnail_bnt_right'></li></ul>";
	html +="</div>";
	$("#main").append(html);
	
});

//	$.xml2json(xml);
var thumbnails = function()
{
	//초기 한번만 로딩함
	if(thumb_init_flag == 0)
	{
		thumb_init_flag++;
		thumb_init();
	}
					
	if(thumb_flag == 0) thumb_show();
	else thumb_out();
}
	
var thumb_init = function()
{
	thumb_xml = $.xml2json(puzzle.view.thumb_xml);
	
	if(typeof(thumb_xml.thumbnails) == "undefined") return false;	
	
	if(typeof(thumb_xml.thumbnails.img[1]) == "undefined" ) thumb_totalCnt = 1;
	else thumb_totalCnt = thumb_xml.thumbnails.img.length;
	
	if(thumb_totalCnt < thumb_setOutCnt) thumb_end_range = thumb_totalCnt;
	else thumb_end_range = thumb_setOutCnt;
										
	$("#thumbnail_bnt_left").click (function() {
		if(thumb_start_range > 0){
			thumb_start_range = thumb_start_range - thumb_setOutCnt;
			if(thumb_end_range > thumb_totalCnt) 
			{
				thumb_end_range = thumb_totalCnt;
			}
			else
			{
				thumb_end_range = thumb_start_range + thumb_setOutCnt;
			}
			
			displayThumbnails();
		}
		else
		{
			//alert('맨 앞입니다.');
			return false;
		}
	});
				
	$("#thumbnail_bnt_right").click (function() {
		if(thumb_end_range >= thumb_totalCnt)
		{
			//alert('맨 뒤입니다.');
		}
		else
		{
			thumb_start_range = thumb_start_range + thumb_setOutCnt;
			if((thumb_end_range+thumb_setOutCnt) > thumb_totalCnt) 
			{
				thumb_end_range = thumb_totalCnt;
			}
			else
			{
				thumb_end_range = thumb_end_range + thumb_setOutCnt;
			}
			
			displayThumbnails();
		}
	});
		
}

	
var displayThumbnails = function(){
	$("#thumbnail_area").children().remove();

	var thumb_html = '';
	if(typeof(thumb_xml.thumbnails.img[1]) == "undefined" )
	{
		thumb_html += "<div id=\"img_box\"><span><img id=\"" + thumb_xml.thumbnails.img.id + "\" class=\"thum_imgs\" rel=\"external\" src=\"" + thumb_xml.thumbnails.img.url + ".jpg\" /><p>" + thumb_xml.thumbnails.img.id +"</p></span></div>";
	}
	else
	{
		for(var i=thumb_start_range;i<thumb_end_range;i++) {
			thumb_html += "<div id='img_box'><span><img  id='" + thumb_xml.thumbnails.img[i].id + "' class='thum_imgs' rel='external' src='" + thumb_xml.thumbnails.img[i].url + ".jpg' /><p>" + thumb_xml.thumbnails.img[i].id +"</p></span></div>";
		}
	}

	$("#thumbnail_area").append(thumb_html);
						
	$('img[rel="external"]').mouseover( function() {
		  $(this).addClass('thumb_border');
	});
	$('img[rel="external"]').mouseout( function() {
		  $(this).removeClass('thumb_border');
	});
	$('img[rel="external"]').click( function() {
		//alert("goto : " + $(this).attr('id'));
		puzzle.view.gotoPage($(this).attr('id') - 1);
	});
}
//썸네일 슬라이드 효과 : show
var thumb_show = function() {
	displayThumbnails();
	$("#thumbnail").show();
	//$("#thumbnail_side").css("right",$("#puzzle_indexs").css("width"));
	thumb_flag = 1;
}
//썸네일 슬라이드 효과 : out
var thumb_out = function() {
	$("#thumbnail").hide();
	//$("#thumbnail_side").css("right","0");
	thumb_flag = 0;
}