var img_array = new Array("/img_common/overbox/00.jpg","/img_common/overbox/01.jpg","/img_common/overbox/02.jpg","/img_common/overbox/03.jpg","/img_common/overbox/04.jpg","/img_common/overbox/05.jpg","/img_common/overbox/06.jpg");
var width_array = new Array(410,410,410,410,410,410,410,410);
var height_array = new Array(520,520,520,520,520,520,520,520);


$(document).ready(function($){
	setOverBox();
	preLoadImg();
	//checkElement();
});

var currentNum = 0;

function showOverbox(){
	currentNum = 0;
	inititems();
	initializeWhiteBox();
    
    
    // hide select elements
    $('select').hide();
    
    var height = getScreenSize().hy;
    //var width = document.documentElement.clientWidth;
    //$('#overboxbg').css('filter','alpha(opacity=0)');
    $('#overboxbg').height(height).show().fadeTo(200,0.6, function() {
        animationWhiteBoxFirst(getImagesWidth(currentNum)+46,getImagesHeight(currentNum)+84);
    });
}

function closeOverbox(){
	inititems();
    $('#overboxbg').fadeTo(200,0,function(){
    	 $('#overboxbg').hide();
    	 
    });
    $('#whitebox').fadeOut(200);
    // show select elements
    $('select').show();
}

function initializeWhiteBox(){
	if (navigator.userAgent.match(/AppleWebKit\/\d.+Safari\/\d.+/)) {
        var scrollTop = document.body.scrollTop;
    } else {
        var scrollTop = document.documentElement.scrollTop;
    }
    var top = getScreenSize().y / 2 + scrollTop;
    var left = $('html').width() / 2;
	$('#whitebox').css({
		'position':"absolute",
		'top':top,
		'left':left,
		'background':"#FFFFFF",
		'z-index':"10000",
		'display':"none",
		'width':"0",
		'height':"0"
	});
	
	var btnleft = ($('html').width()-getImagesWidth(currentNum)-46)/2;
	var btnright = ($('html').width()+getImagesWidth(1)+46)/2;
	$('#whitebox-btn1').css({
		"position":"absolute",
		"z-index":"10010",
		"top":top-34,
		"left":btnleft
	});
	$('#whitebox-btn2').css({
		"position":"absolute",
		"z-index":"10011",
		"top":top-34,
		"left":btnright
	});
}

function animationWhiteBoxFirst($width,$height){
	if (navigator.userAgent.match(/AppleWebKit\/\d.+Safari\/\d.+/)) {
        var scrollTop = document.body.scrollTop;
    } else {
        var scrollTop = document.documentElement.scrollTop;
    }
    var goalTop = (getScreenSize().y-$height) / 2 + scrollTop;
    var goalLeft = ($('html').width()-$width) / 2;
	$("#whitebox").animate({ 
		width:$width,
		height:$height,
		top:goalTop,
		left:goalLeft
	}, 500,function(){
		showItems();
	} );
}

function animationWhiteBox($width,$height){
	if (navigator.userAgent.match(/AppleWebKit\/\d.+Safari\/\d.+/)) {
        var scrollTop = document.body.scrollTop;
    } else {
        var scrollTop = document.documentElement.scrollTop;
    }
    var goalTop = (getScreenSize().y-$height) / 2 + scrollTop;
    var goalLeft = ($('html').width()-$width) / 2;
	$("#whitebox").animate({ 
		width:$width,
		height:$height,
		top:goalTop,
		left:goalLeft
	}, 300,function(){
		$('#whitebox-img img').fadeIn("100");
	} );
	
	var goalLeft2 = (getImagesWidth(currentNum)-172)/2+23;
	$('#whitebox-btnbox').animate({ 
		left:goalLeft2
	},300 );
	
	var btnleft = ($('html').width()-getImagesWidth(currentNum)-46)/2;
	var btnright = ($('html').width()+getImagesWidth(currentNum)+46)/2;
	$('#whitebox-btn1').animate({
		left:btnleft
	},300);
	$('#whitebox-btn2').animate({
		left:btnright
	},300);
}


function showItems(){
	$('#whitebox-close').fadeIn("200");
	$('#whitebox-img').fadeIn("200");
	$('#whitebox-btn1').fadeIn("200");
	$('#whitebox-btn3').fadeIn("200");
	$('#whitebox-btnbox').fadeIn("200");
}

function inititems(){
	$('#whitebox-close').hide();
	$('#whitebox-img').hide();
	$('#whitebox-btn1').hide();
	$('#whitebox-btn2').hide();
	$('#whitebox-btn3').hide();
	$('#whitebox-btn4').hide();
	$('#whitebox-btnbox').hide();
	var left = (getImagesWidth(0)-172)/2+23;
	$('#whitebox-btnbox').css("left",left);
	$('#whitebox-img img').attr("src",getImages(currentNum));
}

function nextImage(){
	$('#whitebox-btn2').fadeIn("200");
	$('#whitebox-btn4').fadeIn("200");
	currentNum ++;
	if(currentNum == getImages("length")-1){
		$('#whitebox-btn1').hide();
		$('#whitebox-btn3').hide();
		$('#whitebox-btn4').css("padding-left","98px");
	}
	$('#whitebox-img img').fadeOut("100",function(){
		$(this).attr("src",getImages(currentNum));
		animationWhiteBox(getImagesWidth(currentNum)+46,getImagesHeight(currentNum)+84);
	});
}
function prevImage(){
	$('#whitebox-btn1').fadeIn("200");
	$('#whitebox-btn3').fadeIn("200");
	$('#whitebox-btn4').css("padding-left","12px");
	currentNum --;
	if(currentNum == 0){
		$('#whitebox-btn2').hide();
		$('#whitebox-btn4').hide();
	}
	$('#whitebox-img img').fadeOut("100",function(){
		$(this).attr("src",getImages(currentNum));
		animationWhiteBox(getImagesWidth(currentNum)+46,getImagesHeight(currentNum)+84);
	});
}

function setOverBox(){
	$('body').append("<div id='overboxbg' onclick='closeOverbox();'></div>");
	$('#overboxbg').css({
		'position':"absolute",
		'top':"0",
		'left':"0",
		'background':"#000000",
		'z-index':"9999",
		'display':"none",
		'filter':"alpha(opacity=0)",
		'-moz-opacity':"0",
		'opacity':"0",
		'width':"100%"
	});
	
	$('body').append('<div id="whitebox"><p id="whitebox-close"><a href="###" onclick="closeOverbox(); return false;"><img src="/img_common/close.gif" alt="close" width="69" height="22" /></a></p><p id="whitebox-img"><img src="'+getImages(0)+'" alt="" oncontextmenu="return false;" /></p><ul id="whitebox-btnbox" class="clearfix"><li id="whitebox-btn3"><a href="###" onclick="nextImage(); return false;"><img src="/img_common/next2.gif" alt="NEXT" width="62" height="28" /></a></li><li id="whitebox-btn4"><a href="###" onclick="prevImage(); return false;"><img src="/img_common/prev2.gif" alt="PREV" width="63" height="28" /></a></li></ul></div><ul><li id="whitebox-btn1"><a href="###" onclick="nextImage(); return false;"><img src="/img_common/next1.jpg" alt="NEXT" width="25" height="68" /></a></li><li id="whitebox-btn2"><a href="###" onclick="prevImage(); return false;"><img src="/img_common/prev1.jpg" alt="PREV" width="25" height="68" /></a></li></ul>');
	
	if (navigator.userAgent.match(/AppleWebKit\/\d.+Safari\/\d.+/)) {
        var scrollTop = document.body.scrollTop;
    } else {
        var scrollTop = document.documentElement.scrollTop;
    }
    var top = getScreenSize().y / 2 + scrollTop;
    var left = $('html').width() / 2;
	$('#whitebox').css({
		"position":"absolute",
		"top":top,
		"left":left,
		"background":"#FFFFFF",
		"z-index":"10000",
		"display":"none",
		"text-align":"center",
		"margin":"0 14px"
	});
	
	var btnleft = ($('html').width()-getImagesWidth(currentNum)-46)/2;
	var btnright = ($('html').width()+getImagesWidth(1)+46)/2;
	$('#whitebox-btn1').css({
		"position":"absolute",
		"z-index":"10010",
		"top":top-34,
		"left":btnleft
	});
	$('#whitebox-btn2').css({
		"position":"absolute",
		"z-index":"10011",
		"top":top-34,
		"left":btnright
	});
	
	inititems();
	initializeWhiteBox();
}





function getImages($num){
	var imgArray = img_array;
	if($num == "length"){
		return imgArray.length;
	}else{
		return imgArray[$num];
	}
}
function getImagesWidth($num){
	var widthArray = width_array;
	return widthArray[$num];
}
function getImagesHeight($num){
	var heightArray = height_array;
	return heightArray[$num];
}



/* ウィンドウサイズ取得 */
var isWin9X = (navigator.appVersion.toLowerCase().indexOf('windows 98')+1);
var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0);
var isOpera = (navigator.userAgent.toLowerCase().indexOf('opera')+1?1:0);
if (isOpera) isIE = false;
var isSafari = (navigator.appVersion.toLowerCase().indexOf('safari')+1?1:0);

function getScreenSize() {
	var obj = new Object();
	if (!isSafari && !isOpera) {
		obj.x = document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth;
		obj.y = document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight;
	} else {
		obj.x = window.innerWidth;
		obj.y = window.innerHeight;
	}
	if($('html').height() > obj.y){
		obj.hy = $('html').height();
	}else{
		obj.hy = obj.y;
	}
	obj.mx = parseInt((obj.x)/2);
	obj.my = parseInt((obj.y)/2);
	return obj;
}

/* プレロード */
function preLoadImg() {
	data = img_array;
	prImg= new Array();
	for (i=0; i<data.length; i++){
		prImg[i] = new Image();
		prImg[i].src = data[i];
	}
}