/***********************************************************
* [imageListPreviewer make with jQuery]
*				since = {
*					date	: "2008-09-11",
*					author  : "akato",
*					contact : "akato@vitalify.jp"
*				};
*				lastmodified = {
*					date	: "2008-09-11",
*					author  : "akato",
*					contact : "akato@vitalify.jp"
*				};
***********************************************************/
$(function() {

	//global vars for this
	var clickFlag = 0;
	var ulNum = 3;
	var boxPositionLeft;
	var animating;
	var areaLefter;

	var IDmatch = function(viewSrc) {
/*		viewSrc = viewSrc.split("images/");
		viewSrc = viewSrc[1].split(".");
		if(viewSrc[0].match("000000000")) {
			viewSrc = viewSrc[0].replace("000000000","");
		}else if(viewSrc[0].match("00000000")) {
			viewSrc = viewSrc[0].replace("00000000","");
		}else if(viewSrc[0].match("0000000")) {
			viewSrc = viewSrc[0].replace("0000000","");
		}*/
		return viewSrc;
	}

	var successFunc = function(json,jsonLength,ulNum) {
		var jsonLength = json.data.length;
		var ulNum = Math.floor(jsonLength / 20);
	}


	/********************************************
	* json load
	********************************************/
//	var jsonDataUrl = "/modules/json/imageData.json";
//	var jsonDataUrl = "/modules/json/imageData.php";
	var jsonDataUrl = "/office/imageData.php";
	$.getJSON(jsonDataUrl,function(json) {
		
		/********************************************
		* setting
		********************************************/
		var targetElem = {
			box  : "div#viewThumbnailArea",//list wrapper
			list : "div#viewThumbnailArea ul"//list
		};
		var animation = { //loop speed
			loop: 30,//mSecond
			move: 166//px
		};
		var viewImage = { //large image size
			width: 472,//px
			height: 317//px
		};
		var thumbsImage = { //li size
			width: 76,//px
			height: 76//px
		};
		var naviBtn = { //botturn HTML source code
			next: "<img src=\"./shared/images/index_icon_aroow02.gif\" alt=\"\" width=\"20\" height=\"21\" />",
			before: "<img src=\"./shared/images/index_icon_aroow01.gif\" alt=\"\" width=\"20\" height=\"21\" />"
		}

		var boxWidth = 830;

		var jsonLength = json.data.length;
		var ulNum = Math.floor(jsonLength / 20)+1;
		var thumbList;
		var thumbListID = 1;
		var thumbListLeft = 0;
		var photo = {};
		var photographer = {};
		var description = {};
		var thumbWord01 = {};
		var thumbWord02 = {};
		var thumbWidth = {};
		var thumbHeight = {};
		var preloadImg;

		$("body").append('<div id="nondisplay"></div>');


		//$(targetElem.box).html('\r\n\<ul id="thumbList'+json.data[0].id+'" class="clearfix"></ul>\r\n');
		
//	var loadJson = function() {
		thumbList = '\r\n\<ul id="thumbList'+thumbListID+'" class="clearfix">\r\n';
		for(var i=0; i<jsonLength; i++) {
			photo = json.data[i].photo;
		
			if(i==0|i==1|i==2) {
				thumbList += '<li><img src="/office/shared/images/icon_new.gif" width="25" height="10" alt="new" class="new" /><a href="'+json.data[i].photo+'" rel="'+ i +'"><img src="'+json.data[i].thumb+'" width="'+thumbsImage.width+'" height="'+thumbsImage.height+'" /></a></li>\r\n';
			}else {
				thumbList += '<li><a href="'+json.data[i].photo+'" rel="'+ i +'"><img src="'+json.data[i].thumb+'" width="'+thumbsImage.width+'" height="'+thumbsImage.height+'" /></a></li>\r\n';
			}
			description[i] = json.data[i].description;
			photographer[i] = json.data[i].photographer;
			thumbWord01[i] = json.data[i].word01;
			thumbWord02[i] = json.data[i].word02;
			thumbWidth[photo] = json.data[i].width;
			thumbHeight[photo] = json.data[i].height;
			
			if((i+1)%20 == 0) {
				thumbListID++;
				thumbList += '</ul>\r\n<ul id="thumbList'+thumbListID+'" class="clearfix">\r\n';
			}
			
			//preload
			preloadImg += '<img src="' + photo + '" width="' + thumbWidth[photo] + '" height="' + thumbHeight[photo] + '">';
			photo = IDmatch(photo);
		}
		thumbList += '</ul>\r\n';
		$(targetElem.box).html(thumbList);
		$("#nondisplay").append(preloadImg);






		/********************************************
		* codes
		********************************************/
		//styleSet for default html
		$(targetElem.box)
			.css("width",boxWidth+"px")
			.css("height","168px")
			.css("position","relative")
			.css("overflow","hidden");
		if(window.ActiveXObject) $(targetElem.box).css("width",boxWidth+"px");
		$(targetElem.list)
			.css("position","absolute")
			.css("width",boxWidth+"px")
			.css("height","163px")
			.css("top","0")
			.children("li")
			.css("width",thumbsImage.width)
				.css("display","inline")
				.css("float","left")
				.css("margin-bottom","5px")
				.css("background-color","#ffffff")
					.children("a").css("display","block");
		
		$("#nondisplay").css("display","none");
		
		//ul position
		var abLeft = 0;
		$(targetElem.list).each(function() {
			$(this).css("left",abLeft+"px");
			abLeft += boxWidth;
		});
		
		//view
		$("div.officeDetails").before('\r\n<div id="officeView" class="officeDetails">\r\n<div class="inner">\r\n<div id="viewArea" class="clearfix">\r\n</div>\r\n</div>\r\n</div>');
		$('div#viewArea').html('\r\n<p id="viewImage"></p>');
		$('p#viewImage').html('<img src="" alt="" />');
		$('div#viewArea').append('\r\n<div id="viewDesc">\r\n</div>\n\r');
		
		//navi
		$(targetElem.box).after('\r\n<div id="viewThumbsNav">\r\n</div>\r\n');
		$("div#viewThumbsNav").html('<p id="viewThumbnailAreaBefore">'+naviBtn.before+'</p>');
		$("div#viewThumbsNav").append('<p id="viewThumbnailAreaNext">'+naviBtn.next+'</p>');

		//styles
		$("div#viewThumbsNav p").css("cursor","pointer");

		//mouseover
		$("#viewThumbnailAreaBefore img").hover (
			function() {
				$(this).attr("src","./shared/images/index_icon_aroow01_on.gif");
			},
			function() {
				$(this).attr("src","./shared/images/index_icon_aroow01.gif");
			}
		)
		$("#viewThumbnailAreaNext img").hover (
			function() {
				$(this).attr("src","./shared/images/index_icon_aroow02_on.gif");
			},
			function() {
				$(this).attr("src","./shared/images/index_icon_aroow02.gif");
			}
		)
		
		var viewSrc = "";
		$(targetElem.list).children("li").click(function() {
			$("#viewImage img").css("display","none");
			var SRC = new Image();
			SRC = $(this).children("a").attr("href");
	//		var ALT = $(this).children("p.text").html();
			var TITLE = $(this).children("a").attr("title")
			if(!SRC.match(/\.(jpg|gif|png)$/)) {
				return true;
			}
			
			var viewWord = "";
			var REL = $(this).children("a").attr("rel");
			viewWord = '<dl>\n\r'+
					   '<dt>撮影者</dt>\r\n'+
					   '<dd>'+photographer[REL]+'</dd>\r\n'+
					   '<dt>説明</dt>\r\n'+
					   '<dd>'+description[REL]+'</dd>\r\n'+
					   '<dt>社員からの一言</dt>\r\n'+
					   '<dd class="lastChild">\r\n<p>'+thumbWord01[REL]+'</p>\r\n<p>'+thumbWord02[REL]+'</p>\r\n</dd>\r\n';
			
			$(targetElem.list).find("a").each(function() {
				$(this).css("cursor","pointer");
				$(this).find("img").css("filter","alpha(opacity=100)") //IE
				$(this).find("img").css("-moz-opacity","1") //Fx
				$(this).find("img").css("opacity","1")
			});
			$(this).find("a").css("cursor","default");
			$(this).find("img").css("filter","alpha(opacity=60)") //IE
			$(this).find("img").css("-moz-opacity","0.6") //Fx
			$(this).find("img").css("opacity","0.6")

			
			
			$("#viewImage img").attr("src",SRC);
			$("#viewImage img").css("display","block");
//			var viewID = viewSrc[0];
			viewSrc = $("#viewImage img").attr("src");
			viewID = IDmatch(viewSrc);

			$("#viewImage img").attr("width",thumbWidth[viewID]);
			$("#viewImage img").attr("height",thumbHeight[viewID]);
//			if(TITLE) $("#viewDesc").html("<h2>"+TITLE+"</h2>\n\r");
//				else $("#viewDesc").html("");
			$("#viewDesc").html(viewWord);
	//		if(ALT) $("#viewDesc").append("<p>"+ALT+"</p>");
		
			return false;
		});
		//first content
		$(targetElem.list).children("li:first").trigger("click");


		//previous
		$("p#viewThumbnailAreaBefore").css("display","none");
		$("p#viewThumbnailAreaBefore").click(function() {
			if(clickFlag==1) return;
			
			else {
				clickFlag = 1;
				boxPositionLeft = $("div#viewThumbnailArea ul#thumbList1").css("left").replace(/px|%|pt/,"");
				areaLefter = $(targetElem.list).css("left").replace(/px|%|pt/,"");
				
				if(boxPositionLeft==0) {
					
				}
				else {
					$("p#viewThumbnailAreaBefore").css("display","block");
					$("p#viewThumbnailAreaNext").css("display","block");
					if(boxPositionLeft==-boxWidth) {
						$("p#viewThumbnailAreaBefore").css("display","none");
					}
					animating = setInterval(function(){
						areaLefter = $(targetElem.list).css("left").replace(/px|%|pt/,"")-0;
						$(targetElem.list).each(function(i) {
							$("#thumbList"+(i+1)).css("left",(areaLefter)+animation.move+(boxWidth*i)+"px");
						});
						//release
						if($("div#viewThumbnailArea ul#thumbList1").css("left").replace(/px|%|pt/,"")-boxPositionLeft+"px"==boxWidth+"px"){
							clearInterval(animating);
							clickFlag = 0;
						}
					},animation.loop);
				}
			}
		});
		//next
		$("p#viewThumbnailAreaNext").click(function() {
			if(clickFlag==1) return;
			
			else {
				clickFlag = 1;
				boxPositionLeft = $("div#viewThumbnailArea ul#thumbList1").css("left").replace(/px|%|pt/,"");
				areaLefter = $(targetElem.list).css("left").replace(/px|%|pt/,"");
				
				var moveFlag = -1*boxWidth*(ulNum-1);
		
				if(boxPositionLeft!=moveFlag) {
					$("p#viewThumbnailAreaBefore").css("display","block");
					$("p#viewThumbnailAreaNext").css("display","block");
					animating = setInterval(function(){
					if(boxPositionLeft-boxWidth==moveFlag) {
						$("p#viewThumbnailAreaNext").css("display","none");
					}
						areaLefter = $(targetElem.list).css("left").replace(/px|%|pt/,"")-0;
						$(targetElem.list).each(function(i) {
							$("#thumbList"+(i+1)).css("left",(areaLefter)-animation.move+(boxWidth*i)+"px");
						});
						//release
						if($("div#viewThumbnailArea ul#thumbList1").css("left").replace(/px|%|pt/,"")-boxPositionLeft+"px"=="-"+boxWidth+"px"){
							clearInterval(animating);
							clickFlag = 0;
						}
					},animation.loop);
				}
			}
		});
		
	});
//});
});