var imagesGallery_;
/*
	Images Gallery Properties
*/
var default_img_url = [{imgId:"", listImgUrl:"", smallImgUrl:"", bigImgUrl:"", comment:""}];
var default_list_images_num = 5;
var default_list_size = {width:50, height:50};
var default_list_image_size = {width:50, height:50};
var default_small_image_size = {width:250, height:250};
var default_small_img_show_id = 0;
var default_image_list_posx = 0;
var default_no_comment = "画像のコメントがありません";
var default_del_image_txt = "このフォトを削除";
var default_back_btn_txt = "戻る";
var default_image_space = 8;
var default_list_images_id = 'listImages';

/*
	Images Gallery Object Img
*/
var NEXT_BUTTON = "/ajax/img/btn_next.gif";
var PREV_BUTTON = "/ajax/img/btn_prev.gif";
var LOADING_IMG = "/images/imageGalleryLoading.gif";
var LOADING_ANIMATION_IMG = "/images/imageGalleryLoadingAnimation.gif";
var MINI_LOADING_IMG = "/images/imageGalleryMiniLoading.gif";
var CLOSE_BUTTON = "/images/imageGalleryClose.gif";

/*
	Images Gallery Loading Html
*/
var LOADING_HTML = '<img alt="" src="{0}">';

/*
	Images Gallery Object Div Id
*/
var IMAGES_GALLERY_DIV = "ImagesGalleryDiv";
var IMAGES_GALLERY_DELETE_INFO_DIV = "ImagesGalleryDeleteInfoDiv";
var IMAGES_GALLERY_LIST_IMAGE_DIV = "ImagesGalleryListDiv";
var IMAGES_GALLERY_SMALL_IMAGE_DIV = "ImagesGallerySmallImageDiv";
var IMAGES_GALLERY_BIG_IMAGE_DIV = "ImagesGalleryBigImageDiv";
var IMAGES_GALLERY_COMMENT_DIV_F = "ImagesGalleryCommentDivF";
var IMAGES_GALLERY_COMMENT_DIV_B = "ImagesGalleryCommentDivB";
var IMAGES_GALLERY_HIDDEN_DIV = "ImagesGalleryHiddenDiv";

/*
	Images Gallery Object Function Name
*/
var PREV_SCROLL_FUNCTION = 'javascript:startViewPrev()';
var NEXT_SCROLL_FUNCTION = 'javascript:startViewNext()';
var SHOW_SMALL_IMG_FUNCTION = ' onClick="showSmallImage({0})" ';
var COMMENT_MOUSE_FUNCTION = ' onClick="editImageComment()" onMouseOver="setImageCommentBgColor()" onMouseOut="resetImageCommentBgColor()" ';
var DETEL_IMAGE_FUNCTION = 'javascript:deleteImage()';
var BACK_TO_MEMO_VIEW_FUNCTION = 'javascript:backToMemoView()';
var IMAGE_LIST_ALPHA_STYLE = 'filter: alpha(opacity=50);opacity: 0.5';
var IMAGE_LIST_MOUSE_FUNCTION = ' onMouseOver="imgListFadeTo({0}, 1.0)" onMouseOut="imgListFadeTo({0}, 0.5)" '

/*
 	ImagesGallery Class
 	
 	//
 	//Author:xugf
 	//
 	
 	- initialize()
*/
var ImagesGallery = function(imgUrl){
	/*
		default setting
	*/
	this.setImgUrl(default_img_url);
	this.setListSize(default_list_size);
	this.setListImagesNum(default_list_images_num);
	this.setListImageSize(default_list_image_size);
	this.setSmallImageSize(default_small_image_size);
	this.setSmallImgShowId(default_small_img_show_id);
	this.setImageListPosX(default_image_list_posx);
	this.setImageSpace(default_image_space);
	this.delImageFlg_ = false;
	
	/*
		- initialize()
	*/
	this.setImgUrl(imgUrl);
};


/*
 	ImagesGallery Class
 	
 	//
 	//Author:xugf
 	//
 	
*/
ImagesGallery.prototype = {
	setImgUrl:function(imgUrl){
		if (imgUrl != undefined) this.imgUrl_ = imgUrl;
	},
	
	setListSize:function(listSize){
		if (listSize != undefined) this.listSize_ = listSize;
	},
	
	setListImagesNum:function(listImagesNum){
		if (listImagesNum != undefined) this.listImagesNum_ = listImagesNum;
	},
	
	setListImageSize:function(listImageSize){
		this.listImageSize_ = listImageSize;
	},
	
	setSmallImageSize:function(smallImageSize){
		this.smallImageSize_ = smallImageSize;
	},
	
	setSmallImgShowId:function(smallImgShowId){
		if (smallImgShowId != undefined) this.smallImgShowId_ = smallImgShowId;
	},
	
	setImageListPosX:function(imageListPosX){
		if (imageListPosX != undefined) this.posX_ = imageListPosX;
	},
	
	setImageSpace:function(imageSpace){
		if (imageSpace != undefined) this.imageSpace_ = imageSpace;
	},

	getCurrSmallImgId:function(){
		return this.smallImgShowId_;
	},
	
	getCurrImgId:function(){
		return this.imgUrl_[this.smallImgShowId_].imgId;
	},
	
	getCurrImgComment:function(){
		var tmp = this.imgUrl_[this.smallImgShowId_].comment;
		if (tmp == null || tmp == "null" || tmp == undefined || tmp == "") return default_no_comment;
		return tmp;
	},
	
	getImgComment:function(){
		if (this.getCurrImgComment() == default_no_comment) return "";
		return this.getCurrImgComment();
	},
	
	setCurrImgComment:function(imgComment){
		if (imgComment != undefined && imgComment != "" && imgComment != null)this.imgUrl_[this.smallImgShowId_].comment = imgComment;
	},
	
	getMyGalleryHtml:function(){
		var galleryHtml = "";
		this.imageListWidth_ = this.listSize_.width * this.listImagesNum_ + (this.listImagesNum_ - 1) * this.imageSpace_;
		var imgListTableWidth = this.imageListWidth_ * 1 + 30;
		galleryHtml = '<div id="' + IMAGES_GALLERY_DELETE_INFO_DIV + '" style="width:100%;display:none">'
						+ '<center><p style="margin:150px 0px 0px 0px">Deleting......Please wait</p></center>'
					+ '</div>'
					+ '<div id="' + IMAGES_GALLERY_DIV + '">'
						+ '<div class="aj-box03">'
							+ '<div class="pic-box">'
								+ '<div id="' + IMAGES_GALLERY_SMALL_IMAGE_DIV + '">'
									+ '<table border="0" style="' + this.getSmallImgWidthHeight() + '">'
									  + '<tr align="center">'
									    + '<td>'
											+ '<img alt="" src="' + this.imgUrl_[this.smallImgShowId_].smallImgUrl + '" />'
										+ '</td>'
									  + '</tr>'
									+ '</table>'
								+ '</div>'
								+ '<p class="delete"><a href="' + DETEL_IMAGE_FUNCTION + '">' + default_del_image_txt + '</a></p>'
								+ '<div id="' + IMAGES_GALLERY_COMMENT_DIV_F + '" ' + COMMENT_MOUSE_FUNCTION + ' style="overflow: auto;width:100%;height:120px">'
									+ '<p>' + this.getCurrImgComment() + '</p>'
								+ '</div>'
								+ '<div id="' + IMAGES_GALLERY_COMMENT_DIV_B + '" style="width:100%;display:none"></div>'
							+ '</div>'
							+ '<table style="margin:5px 0px 0px 0px;height:' + this.listSize_.height + 'px;width:' + imgListTableWidth + 'px" border="0">'
								+ '<tr align="center">'
								+ '<td>'
									+ '<a href="' + NEXT_SCROLL_FUNCTION + '"><img width="13px" height="20px" alt="" src="' + PREV_BUTTON + '" style="margin: 15px 10px 0px 0px"/></a>'
								+ '</td>'
								+ '<td style="height:' + this.listSize_.height + 'px;width:' + this.imageListWidth_ + 'px">'
										+ '<div id="' + IMAGES_GALLERY_HIDDEN_DIV + '" style="overflow:hidden;position:relative;height:' + this.listSize_.height + 'px;width:' + this.imageListWidth_ + 'px">' + this.getImagesListHtml() + '</div>'
								+ '</td>'
								+ '<td>'
									+ '<a href="' + PREV_SCROLL_FUNCTION + '"><img width="13px" height="20px" alt="" src="' + NEXT_BUTTON + '" style="margin: 15px 0px 0px 10px"/></a>'
								+ '</td>'
								+ '</tr>'
							+ '</table>'
							+ '<p class="btn-close"><a href="' + BACK_TO_MEMO_VIEW_FUNCTION + '">&lt;&lt; ' + default_back_btn_txt + '</a></p>'
						+ '</div>'
					+ '</div>';
		return galleryHtml;
	},
	
	getGalleryHtml:function(){
		var galleryHtml = "";
		this.imageListWidth_ = this.listSize_.width * this.listImagesNum_ + (this.listImagesNum_ - 1) * this.imageSpace_;
		var imgListTableWidth = this.imageListWidth_ * 1 + 30;
		galleryHtml = '<div class="aj-box03">'
						+ '<div class="pic-box">'
							+ '<div id="' + IMAGES_GALLERY_SMALL_IMAGE_DIV + '">'
								+ '<table border="0" style="' + this.getSmallImgWidthHeight() + '">'
								  + '<tr>'
								    + '<td align="center">'
										+ '<img alt="" src="' + this.imgUrl_[this.smallImgShowId_].smallImgUrl + '" />'
									+ '</td>'
								  + '</tr>'
								+ '</table>'
							+ '</div>'
							+ '<div id="' + IMAGES_GALLERY_COMMENT_DIV_F + '" style="overflow: auto;width:100%;height:120px">'
								+ '<p>' + this.getCurrImgComment() + '</p>'
							+ '</div>'
						+ '</div>'
						+ '<table style="margin:5px 0px 0px 0px;height:' + this.listSize_.height + 'px;width:' + imgListTableWidth + 'px" border="0">'
							+ '<tr align="center">'
							+ '<td>'
								+ '<a href="' + NEXT_SCROLL_FUNCTION + '"><img width="13px" height="20px" alt="" src="' + PREV_BUTTON + '" style="margin: 15px 10px 0px 0px"/></a>'
							+ '</td>'
							+ '<td style="height:' + this.listSize_.height + 'px;width:' + this.imageListWidth_ + 'px">'
									+ '<div id="' + IMAGES_GALLERY_HIDDEN_DIV + '" style="overflow:hidden;position:relative;height:' + this.listSize_.height + 'px;width:' + this.imageListWidth_ + 'px">' + this.getImagesListHtml() + '</div>'
							+ '</td>'
							+ '<td>'
								+ '<a href="' + PREV_SCROLL_FUNCTION + '"><img width="13px" height="20px" alt="" src="' + NEXT_BUTTON + '" style="margin: 15px 0px 0px 10px"/></a>'
							+ '</td>'
							+ '</tr>'
						+ '</table>'
						+ '<p class="btn-close"><a href="' + BACK_TO_MEMO_VIEW_FUNCTION + '">&lt;&lt; ' + default_back_btn_txt + '</a></p>'
					+ '</div>';
		return galleryHtml;
	},
	
	getImagesListHtml:function(){
		var i = 0;
		var showSmallImg = "";
		var imgListHtml = "";
		var listImgHeight = "";
		var listImgWidth = "";
		var tmpImgHtml = "";
		var tmpImageGallery = this;
		if (this.listImageSize_ != undefined){
			listImgHeight = ' height="' + this.listImageSize_.height + 'px" ';
			listImgWidth = ' width="' + this.listImageSize_.width + 'px" ';
		}
		
		this.allListWidth_ = (ToInt(this.imgUrl_.length /this.listImagesNum_) + 1) * (this.listImagesNum_ * (this.listSize_.width + this.imageSpace_));
		
		imgListHtml += '<ul>';
		imgListHtml += '<div id="' + IMAGES_GALLERY_LIST_IMAGE_DIV + '" style="position:relative;width:' + this.allListWidth_ + 'px;height:' + this.listSize_.height + 'px">';
		
		$.map(this.imgUrl_, function(img){
			showSmallImg = StringFormat(SHOW_SMALL_IMG_FUNCTION, i);
			imgFadeTo = StringFormat(IMAGE_LIST_MOUSE_FUNCTION, i);
			
			tmpImgHtml = '<li><img id="' + default_list_images_id + i + '" ' + showSmallImg + imgFadeTo + ' style="cursor: pointer;' + IMAGE_LIST_ALPHA_STYLE + '" ' + listImgHeight + listImgWidth + ' alt="" src="' + img.listImgUrl + '"/></li>';
			if (i == tmpImageGallery.smallImgShowId_)tmpImgHtml = '<li><img id="' + default_list_images_id + i + '" ' + showSmallImg + imgFadeTo + 'style="cursor: pointer" ' + listImgHeight + listImgWidth + ' alt="" src="' + img.listImgUrl + '"/></li>';

			imgListHtml += tmpImgHtml
			i++;
		});
		
		imgListHtml += '</div>';
		imgListHtml += '</ul>';
		return imgListHtml;
	},
	
	getSmallImgWidthHeight:function(){
		var smallImgWidth = "";
		var smallImgHeight = "";
		
		if (this.smallImageSize_ != undefined){
			smallImgWidth = 'width:' + this.smallImageSize_.width + 'px;';
			smallImgHeight = 'height:' + this.smallImageSize_.height + 'px';
		}
		return smallImgWidth + smallImgHeight;
	},
	
	showSmallImgById:function(id){
		if (this.smallImgShowId_ != id || this.delImageFlg_){
			this.smallImgShowId_ = id;
			var imagesGallerySmallImg = $("#" + IMAGES_GALLERY_SMALL_IMAGE_DIV);
			var smallImgHtml = "";
			smallImgHtml = '<table border="0" style="' + this.getSmallImgWidthHeight() + '">'
							  + '<tr>'
							    + '<td align="center">'
									+ '<img alt="" src="' + this.imgUrl_[id].smallImgUrl + '" />'
								+ '</td>'
							  + '</tr>'
							+ '</table>';
			//imagesGallerySmallImg.fadeIn("slow"); 
			imagesGallerySmallImg.html(StringFormat(LOADING_HTML, LOADING_IMG));
			imagesGallerySmallImg.html(smallImgHtml);
			this.showImageCommentById();
			this.delImageFlg_ = false;
		}
	},
	
	showImageCommentById:function(){
		var divObjF = $("#" + IMAGES_GALLERY_COMMENT_DIV_F);
		var divObjB = $("#" + IMAGES_GALLERY_COMMENT_DIV_B);
		divObjB.css("display","none");
		divObjB.attr("disabled", "true");
		divObjF.css("display","");
		divObjF.removeAttr("disabled");
		divObjF.html('<p>' + this.getCurrImgComment() + '</p>');
	},
	
	viewPrev:function(){
		var imagesGalleryList = $("#" + IMAGES_GALLERY_LIST_IMAGE_DIV);
		/*
			Only for IE
			there have a bug in IE when first scroll image list
			so scroll image list 1px first in IE
		*/
		var isIE = (navigator.userAgent.indexOf("IE") != -1)? true:false;
		if(isIE)imagesGalleryList.animate({left: this.posX_ - 1}, 'fast');
		
		if ((this.smallImgShowId_ + 1) >= this.imgUrl_.length){
			this.allListWidth_ = ToInt(this.smallImgShowId_ /this.listImagesNum_) * (this.listImagesNum_ * (this.listSize_.width + this.imageSpace_));
			this.posX_ = -this.allListWidth_;
			imagesGalleryList.animate({left: this.posX_}, 'slow');
		}else{
			if ((this.smallImgShowId_ + 1) % this.listImagesNum_ == 0){
				this.posX_ -= (this.imageListWidth_ + this.imageSpace_);
				imagesGalleryList.animate({left: this.posX_}, 'slow');
			}
			this.oneByOneStyle(this.smallImgShowId_ + 1);
		}
	},
	
	viewNext:function(){
		var imagesGalleryList = $("#" + IMAGES_GALLERY_LIST_IMAGE_DIV);
		/*
			Only for IE
			there have a bug in IE when first scroll image list
			so scroll image list 1px first in IE
		*/
		var isIE = (navigator.userAgent.indexOf("IE") != -1)? true:false;
		if(isIE)imagesGalleryList.animate({left: this.posX_ + 1}, 'fast');
		
		if (this.smallImgShowId_ <= 0){
			this.posX_ = 0;
			imagesGalleryList.animate({left: this.posX_}, 'slow');
		}else{
			if (this.smallImgShowId_ % this.listImagesNum_ == 0){
				this.posX_ += (this.imageListWidth_ + this.imageSpace_);
				imagesGalleryList.animate({left: this.posX_}, 'slow');
			}
			this.oneByOneStyle(this.smallImgShowId_ - 1);
		}
	},
	
	oneByOneStyle:function(id){
		var tmpImageGallery = this;
		if (this.smallImgShowId_ != id){
			var imgList = $("#" + IMAGES_GALLERY_LIST_IMAGE_DIV).find("img");
			$.map(imgList, function(obj){
				$(obj).css("filter", "alpha(opacity=50)");
				$(obj).css("opacity", "0.5");
				if($(obj).attr("id") == default_list_images_id + id){
					$(obj).css("filter", "alpha(opacity=100)");
					$(obj).css("opacity", "1.0");
				}
			});
			this.showSmallImgById(id);
		}
	},
	
	resetListView:function(){
		var imagesGalleryList = $("#" + IMAGES_GALLERY_LIST_IMAGE_DIV);
		if (this.smallImgShowId_ == 0)return;
		this.posX_ = - (ToInt(this.smallImgShowId_ / this.listImagesNum_) * (this.listImagesNum_ * (this.listSize_.width + this.imageSpace_)));
		imagesGalleryList.css("left",this.posX_);
	},
	
	delImage:function(){
		this.delImageFlg_ = true;
		this.imgUrl_.splice(this.smallImgShowId_,1);
		//when delete all images, back to memo view
		if (this.imgUrl_.length <= 0){
			backToMemoView();
			return;
		}
		
		if (this.smallImgShowId_ == this.imgUrl_.length){
			this.showSmallImgById(this.smallImgShowId_ - 1);
			$("#" + IMAGES_GALLERY_HIDDEN_DIV).html(this.getImagesListHtml());
			this.resetListView();
			return;
		}
		
		if (this.smallImgShowId_ == 0){
			this.showSmallImgById(this.smallImgShowId_);
			$("#" + IMAGES_GALLERY_HIDDEN_DIV).html(this.getImagesListHtml());
			this.resetListView();
			return;
		}
		
		if (this.smallImgShowId_ > 0 && this.smallImgShowId_ < this.imgUrl_.length){
			this.showSmallImgById(this.smallImgShowId_);
			$("#" + IMAGES_GALLERY_HIDDEN_DIV).html(this.getImagesListHtml());
			this.resetListView();
			return;
		}
	},
	
	listImageClickFunction:function(id){
		this.oneByOneStyle(id);
	},
	
	listImageFadeToFunction:function(id, alpha){
		if (this.smallImgShowId_ != id){
			var imgObj = $("#" + IMAGES_GALLERY_LIST_IMAGE_DIV).find("img[@id=" + default_list_images_id + id + "]");
			imgObj.fadeTo("fast", alpha);
		}
	}
};

/*
	Scroll Function
*/
function startViewPrev(){
	imagesGallery_.viewPrev();
}

function startViewNext(){
	imagesGallery_.viewNext();
}

/*
	Show Small Image
*/
function showSmallImage(id){
	imagesGallery_.listImageClickFunction(id);
}

/*
	Image List Function
*/
function imgListFadeTo(id, alpha){
	imagesGallery_.listImageFadeToFunction(id, alpha);
}

/*
	dwr function
*/
var TRAVEL_MEMO_IMG_CAP_URL = "/InitTravelMemoImageCap.do";
function setImageCommentBgColor(){
	$("#" + IMAGES_GALLERY_COMMENT_DIV_F).css("background-color","#FFFFCC","layer-background-color","#FFFFCC");
}

function resetImageCommentBgColor(){
	$("#" + IMAGES_GALLERY_COMMENT_DIV_F).css("background-color","","layer-background-color","");
}

function editImageComment(){
	var divObjF = $("#" + IMAGES_GALLERY_COMMENT_DIV_F);
	var divObjB = $("#" + IMAGES_GALLERY_COMMENT_DIV_B);
	divObjF.css("display","none");
	divObjF.attr("disabled", "true");
	showLoading(IMAGES_GALLERY_COMMENT_DIV_B);
	$.get(TRAVEL_MEMO_IMG_CAP_URL, {command:"init", imgCap:escape(UnFilerSpecial(imagesGallery_.getImgComment()))}, function(response){
		divObjB.html(response);
		divObjB.css("display","");
		divObjB.removeAttr("disabled");
	});
}

function submitImageComment(formId){
	var divObjF = $("#" + IMAGES_GALLERY_COMMENT_DIV_F);
	var divObjB = $("#" + IMAGES_GALLERY_COMMENT_DIV_B);
	
	var form = new FormClass(formId);
	form.add("command", "save");
	form.add("imgId", imagesGallery_.getCurrImgId());
	showLoading(IMAGES_GALLERY_COMMENT_DIV_B);
	
	$.get(TRAVEL_MEMO_IMG_CAP_URL, form.getFormHash(), function(response){
		divObjB.html(response);
		var tmpImgCap = unescape(form.getFormHash().imgCap);
		
		form = new FormClass(formId);
		var objs = form.getFormHash();
		if (objs.finished == "true"){
			imagesGallery_.setCurrImgComment(FilerSpecial(tmpImgCap));
			divObjF.html('<p>' + imagesGallery_.getCurrImgComment()+ '</p>');
			divObjB.css("display","none");
			divObjB.attr("disabled", "true");
			divObjF.css("display","");
			divObjF.removeAttr("disabled");
		}
	});
}

function cannelImageComment(){
	var divObjF = $("#" + IMAGES_GALLERY_COMMENT_DIV_F);
	var divObjB = $("#" + IMAGES_GALLERY_COMMENT_DIV_B);
	divObjB.html("");
	divObjB.css("display","none");
	divObjB.attr("disabled", "true");
	divObjF.css("display","");
	divObjF.removeAttr("disabled");
}

function deleteImage(){
	var divObjP = $("#" + IMAGES_GALLERY_DIV);
	var divObjD = $("#" + IMAGES_GALLERY_DELETE_INFO_DIV);
	divObjP.css("display","none");
	divObjP.attr("disabled", "true");
	divObjD.css("display","");
	divObjD.removeAttr("disabled");
	TravelMemoDwr.deleteImage(imagesGallery_.getCurrImgId(), function(result){
		if (result){
			imagesGallery_.delImage();
			divObjD.css("display","none");
			divObjD.attr("disabled", "true");
			divObjP.css("display","");
			divObjP.removeAttr("disabled");
		}
	});
}

function backToMemoView(){
	TravelMemoDwr.getCurrHwiTravelMemoDTO(function(memoDto){
		MemoShow('MemoInputDiv', memoDto.trvId, memoDto.trvUsrId, memoDto.trvLat, memoDto.trvLng);
	});
}