var doc;
var stg;
var cons;
var navi;
var naviBar;
var btmLogo;
var axis;

//MouseWheel
var consTotal = 5;
var consHeight = 367;
var consWidth = 210;
var wheelDelta = 0;

//Position
var consStpoint;
var consEnpoint;
var naviStpoint;
var naviEnpoint;

$(document).ready(function(){
	init();
	addEvent();
});

function init(){
	doc		= $(this);
	stg		= $("#stg");
	cons	= $("#cons");
	navi	= $("#navi");
	naviBar	= $("#naviBar");
	btmLogo = $("#btmLogo");
	
	axis	= cons.draggable('option', 'axis');
	resizeScreen();
}

function resizeScreen(){
	stg.css("width",doc.width());
	stg.css("height",consHeight);
	stg.css("top",doc.height()/2-210);
	navi.css("top",stg.position().top+consHeight+20);
	navi.css("left",stg.width()/2-navi.width()/2);
	
	btmLogo.css("top",doc.height()-62);
	btmLogo.css("width",doc.width());

	consStpoint = stg.position().left;
	consEnpoint = consStpoint+(cons.width()-stg.width());
	naviStpoint = navi.position().left;
	naviEnpoint = naviStpoint+(navi.width()-naviBar.width());
}

function addEvent(){
	//Window
	$(window).resize(function(){
		//alert("Stop it!");
	});

	//Navigation
	naviBar.draggable({ containment: '#navi', scroll: false });
	naviBar.draggable({drag: function(event, ui) {}});
		naviBar.bind('drag', function(event, ui) {
			var perPosition = Math.floor(naviBar.position().left/(naviEnpoint - naviStpoint)*100);
			$("p").text("moveStage :" + perPosition);
			moveStage(cons,consStpoint,consEnpoint,perPosition);
	});
	
	//Contents
	cons.draggable({ refreshPositions: true });
	cons.draggable('option', 30, true);
	cons.draggable({containment:'parent'});
	cons.draggable('option', 'axis', 'x');
	cons.draggable({drag: function(event, ui) {}});
		cons.bind('drag', function(event, ui) {
	});
	
	//MouseEvent
	cons.mouseup(function(evt){
		stopMove(true);
    });
	
	//MouseWheel
	$(document).mousewheel(function(objEvent, intDelta){
		//WheelUp
	    if (intDelta > 0 && consTotal > wheelDelta){
	       wheelDelta++;
		   $("p").text("wheelDelta :" + wheelDelta);
		}
		//WheelDown
	    else if (intDelta < 0 && wheelDelta > 0){
			wheelDelta--;
			$("p").text("wheelDelta :" + wheelDelta);
		}
	});
	
	
	//More Button
	$("#box0").mouseover(function(){
		moveStage($("#btBox0"),0,132,0);
    }).mouseout(function(){
		moveStage($("#btBox0"),0,-69,100);
    });
	$("#box1").mouseover(function(){
		moveStage($("#btBox1"),0,132,0);
    }).mouseout(function(){
		moveStage($("#btBox1"),0,-69,100);
    });
	$("#box2").mouseover(function(){
		moveStage($("#btBox2"),0,132,0);
    }).mouseout(function(){
		moveStage($("#btBox2"),0,132,-100);
    });
	$("#box3").mouseover(function(){
		moveStage($("#btBox3"),0,132,0);
    }).mouseout(function(){
		moveStage($("#btBox3"),0,-69,100);
    });
	$("#box4").mouseover(function(){
		moveStage($("#btBox4"),0,132,0);
    }).mouseout(function(){
		moveStage($("#btBox4"),0,-69,100);
    });
	
}

function stopMove($bl){
	cons.stop();
	if(cons.position().left > 0){
		moveStage(cons,consStpoint,consEnpoint,0);
	}
	else if(Math.abs(cons.position().left) > consEnpoint){
		moveStage(cons,consStpoint,consEnpoint,100);
	}
	else{
		moveEnd($bl);
	}
	wheelDelta = Math.abs(Math.floor(cons.position().left/consTotal));
}

function moveStage($obj,$stPoint,$enPoint,$per){
	var movePoint = -($stPoint+($enPoint-$stPoint)*($per/100));
	$obj.stop();
	$obj.animate({
		left:movePoint
	}, 500, "swing", function(){moveEnd();} );
}

function moveEnd($bl){
	var perPosition = Math.floor(Math.abs((cons.position().left-consStpoint)/(consEnpoint - consStpoint)*100));
	if(!$bl && perPosition != 0 && perPosition != 100)return;
	var naviPosition = (naviEnpoint - naviStpoint)*(perPosition/100);
	var cssObj = {
		left:naviPosition
	}
	naviBar.css(cssObj);
}






$(function() {
    $('#gallery a').lightBox();
});
function bluring(){
	if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG")document.body.focus();
}
document.onfocusin=bluring;