var imgs = new Array();
var max = 0;
function loadComp(){
	var selector = "#itemImg > div";
	imgs['item'] = new Array();
	imgs['w'] = new Array();
	$(selector).each(function(i){
		imgs['item'][i] = $(this);
		var w=460;
		$(this).css("position", "absolute");
		$(this).css("left", w*i+"px");
		imgs['w'][i] = w*i;
		max += w;
	});
	$("#itemImg").hide();
	$("#itemImg").fadeIn("slow");
	$('.loading').hide();
	$('#itemImg').css('left', '0px');
	
	//img exist over 2
	if(imgs['w'].length > 2){
		slideImg();
	}
	
	//KEY EVENT
	if($.browser.msie){
		// for IE
		window.document.onkeydown = function(e) {
			if(event.keyCode == 39)slideImgMenu('NEXT');
			if(event.keyCode == 37)slideImgMenu('PREV');
			if(event.keyCode == 38)zoom();
			return false;
		}
	}else{
		$(window).keydown(function(e){
			if(e.keyCode == 39)slideImgMenu('NEXT');
			if(e.keyCode == 37)slideImgMenu('PREV');
			if(e.keyCode == 38)zoom();
			return false;
		});
	}

}

var index = 0;
var selectors = "#itemImg > div";
var smax = 0;
var margin = 100;
function slideImg(){
	$(selectors).click(function(){
		index = $(selectors).index(this);
		slideAction();
	});
}
function slideImgMenu(page){
	if(smax == 0)return;
	if(page == "PREV"){
		if(0 <= index)index -=1;
	}else if(page == "NEXT"){
		if(smax > index)index +=1;
	}
	slideAction();
}
function slideAction(){
		var rest = max - $(window).width();
		if(index == 0){
			var pos =  0;
		}else if(index == smax || rest<=imgs['w'][index]){
			var pos = (-max) + $(window).width();
		}else{
			var pos = -imgs['w'][index]  + margin;
		}
		$("#itemImg").animate({left:  pos}, {easing:  "easeOutExpo",queue:false, duration:1000});
}