/**
 * @author chrismonster
 */
 			var modal_enable = false;
 			var slideshow_enable = false;
			var filter_total = 0;
			var filter_height = 108;
 			 			
			function getThumbURL(imguid)
			{
				return "/thumbs/" + imguid;
			}
			
			function getImageURL(imguid)
			{
				return "/images/" + imguid;
			}
			
		    function getImageSize(imguid)
			{
				var src = getImageURL(imguid);
		        var timg = $('<img>').attr('src', src).css({ position: 'absolute', top: '-1000px', left: '-1000px' }).appendTo('body');
        		var size = [ timg.get(0).offsetWidth, timg.get(0).offsetHeight ];
		        try { document.body.removeChild(timg[0]); }
        		catch(e) {};
		        return size;
			};

			function bindImageToTagEditor(imguid, x, y)
			{
				/*
				 * $.palette({
					parent: $("#palatte"), 
					img_uid: imguid
				});
				*/
				
				var old_imguid = $('#image-src').data('imguid');
				if(typeof(old_imguid) != 'undefined')
				{
					var $nowel = $('.image-block[id=' + old_imguid + ']');
					$nowel.css({
						backgroundColor: "#fff",
						border:'1px solid #FFF'
					});
				}
				
				var $newel = $('.image-block[id=' + imguid + ']');
				$newel.css({
					backgroundColor: "#F4CD0B",
					border:'1px solid #28A7E1'
				});
				
				var aiidel = $("#image-id-mark");
				if(aiidel.length > 0)
				{
					var imgidel = $('div#' + imguid + ' > .image-id-mark');
					var imgid = imgidel.attr('id');
					aiidel.attr('value', imgid);
				}

				$("div.image-block").each(function(index){
					var id = $(this).attr('id');
					if(id == imguid)
					{
						var $el = $("#list-inner-window");
						var oldofs = -parseInt($el.css("left")) || 0;
						var oldindex = oldofs/104;
						var newofs = 0;
						var imgcount = $("#list-inner-window").data("imgcount");
						
						if(index < oldindex || index > oldindex+7)
						{
							if(index == 0)
								newofs = 0;
							else if(index >= imgcount-8)
								newofs = 104*(imgcount-8);
							else 
								newofs = 104*(index-3);
						}
						else if(index == 0 || index >= imgcount-1)
						{
							return ;
						}
						else if(index == oldindex)
						{
							if(oldindex - 6 <= 0)
								newofs = 0;
							else
								newofs = 104*(oldindex-6);
						}
						else if(index == oldindex+7)
						{
							if(oldindex + 6 + 7 >= imgcount)
								newofs = 104*(imgcount-8);
							else
								newofs = 104*(oldindex+6);
						}
						else
						{
							return ;
						}
						var $el = $("#list-inner-window");
						$el.animate({left: (-newofs) + "px"});
					}
				});
				
				var thumb = getThumbURL(imguid);
				var imgsrc = getImageURL(imguid);
				var urlimg = 'url(' + imgsrc + ')';
				if(urlimg == $("#image-src-org").css('backgroundImage'))
					return ;
				
				window.location.hash = "#img" + imguid;
				
				$("#image-src").data('imguid', imguid);		// assign imguid and taguid to tagbox, if taguid = 0 mean insert
    			$('#image-src-org')
					.css({background: 'transparent no-repeat scroll 0%' })
					.imageLoader(
						imgsrc, 
						{
							altThumb:thumb, 
							thumbScaleRate:4,
							onResize: function(width, height){
								$('#imageborder').css({width: (width) + 'px', height: (height) + 'px'});
							}
						}, 
						function($img, imgw, imgh){
						$("#embed-text").attr('value', '<img src="' + imgsrc + '">');
						$('#imageborder').css({width: (imgw) + 'px', height: (imgh) + 'px'});
	    	    		// $('#image-body').css({ width: imgw + 'px', height: imgh + 'px'});
			    		$('#image-src').css({
			    			background: 'transparent ' + urlimg + ' no-repeat scroll 0px 0px',
			    			width: (imgw) + 'px',
			    			height: (imgh) + 'px',
			    			display: 'none'
			    		});
			    		$('.image-flipto-prev').css({
			    			left: '20px',
			    			top: (imgh/2-45) + 'px'
			    		});
			    		$('.image-flipto-next').css({
			    			left: (imgw-20-90) + 'px',
			    			top: (imgh/2-45) + 'px'
			    		});
					});
				image_info_update(imguid);
			}
			
			function imageBlockClick1()
			{
				var imguid = $(this).attr("id");
				bindImageToTagEditor(imguid);
				viewMode();			

			}

			function hidethumbtip()
			{
				$('.thin-view-min').mouseover(function(e){
						var title="操作提示";
						var msg="點選後會關閉縮圖列，簡化瀏覽介面。";
						$('#opmsgtitle').text(title);
						$('#opmsg').text(msg);
						var offsettop = e.pageY - 90;
						var offsetleft = e.pageX- 125;
						if(offsettop >0)
						$('#opmsgdiv').css({position:'absolute', top: offsettop+'px',left:offsetleft+'px'}).show();
						else
							{
							offsettop = e.pageY + 40;
							$('#opmsgdiv').css({position:'absolute', top: offsettop+'px',left:offsetleft+'px'}).show();
							}
					}).mouseout(function(){
						$('#opmsgdiv').hide();
					});
							
			}

			function hideheadtip()
			{
			$('.hide-head-icon').mouseover(function(e){
				var title="操作提示";
						var msg="點選後會隱藏上方搜尋區塊，方便瀏覽。";
						$('#opmsgtitle').text(title);
						$('#opmsg').text(msg);
						var offsettop = e.pageY - 90;
						var offsetleft = e.pageX- 125;
						if(offsettop >0)
						$('#opmsgdiv').css({position:'absolute', top: offsettop+'px',left:offsetleft+'px'}).show();
						else
							{
							offsettop = e.pageY + 40;
							$('#opmsgdiv').css({position:'absolute', top: offsettop+'px',left:offsetleft+'px'}).show();
							}

					}).mouseout(function(){
						$('#opmsgdiv').hide();
					});
			}

			function showheadtip()
			{
			$('.show-head-icon').mouseover(function(e){
				var title="操作提示";
						var msg="點選後會恢復上方搜尋區塊。";
						$('#opmsgtitle').text(title);
						$('#opmsg').text(msg);
						var offsettop = e.pageY - 90;
						var offsetleft = e.pageX- 125;
						if(offsettop >0)
						$('#opmsgdiv').css({position:'absolute', top: offsettop+'px',left:offsetleft+'px'}).show();
						else
							{
							offsettop = e.pageY + 40;
							$('#opmsgdiv').css({position:'absolute', top: offsettop+'px',left:offsetleft+'px'}).show();
							}

					}).mouseout(function(){
						$('#opmsgdiv').hide();
					});
			}


			function displaythumbtip()
			{
				$('.thin-view-menu').mouseover(function(e){
						var title="操作提示";
						var msg="點選後會顯示縮圖列，每列會出現8張縮圖。";
						$('#opmsgtitle').text(title);
						$('#opmsg').text(msg);
						var offsettop = e.pageY - 90;
						var offsetleft = e.pageX- 125;
						if(offsettop >0)
						$('#opmsgdiv').css({position:'absolute', top: offsettop+'px',left:offsetleft+'px'}).show();
						else
							{
							offsettop = e.pageY + 40;
							$('#opmsgdiv').css({position:'absolute', top: offsettop+'px',left:offsetleft+'px'}).show();
							}

					}).mouseout(function(){
						$('#opmsgdiv').hide();
					});
				
			}
			function listmodetip()
			{
				$('#view-min').mouseover(function(e){
					var title="操作提示";
					var msg="點選後會回到關鍵字的搜尋結果畫面。";
					$('#opmsgtitle').text(title);
					$('#opmsg').text(msg);
					var offsettop = e.pageY - 90;
					var offsetleft = e.pageX- 125;
					if(offsettop >0)
					$('#opmsgdiv').css({position:'absolute', top: offsettop+'px',left:offsetleft+'px'}).show();
					else
					{
					offsettop = e.pageY + 40;
					$('#opmsgdiv').css({position:'absolute', top: offsettop+'px',left:offsetleft+'px'}).show();
					}

					}).mouseout(function(){
						$('#opmsgdiv').hide();
				});
			}
			
			function slidemodetip()
			{
				$('#slide-show-icon').mouseover(function(e){
					var title="操作提示";
					var msg="點選後會進入幻燈片瀏覽模式，系統會自動為你播放搜尋結果的圖片。";
					$('#opmsgtitle').text(title);
					$('#opmsg').text(msg);
					var offsettop = e.pageY - 90;
					var offsetleft = e.pageX- 125;
					if(offsettop >0)
					$('#opmsgdiv').css({position:'absolute', top: offsettop+'px',left:offsetleft+'px'}).show();
					else
					{
					offsettop = e.pageY + 40;
					$('#opmsgdiv').css({position:'absolute', top: offsettop+'px',left:offsetleft+'px'}).show();
					}
					}).mouseout(function(){
						$('#opmsgdiv').hide();
					
				});
			}
			
			function imageBlockClick2()
			{
				var imguid = $(this).attr("id");
				bindImageToTagEditor(imguid);
			}
			
			var pageMode=0;
			function getMode()
			{
				return pageMode;
			}
			function toggleListTitle()
			{
                $('#page-bar-notice').fadeOut();
				var el = $("#list");
                var h = el.css("height");
                if (h == "18px") {
					$("#listrightspan").css("display", "block");
					$("#listleftspan").css("display", "block");
										
					el.animate({
                        height: "138px"
                    }, "slow");
                    $(this).removeClass("thin-view-menu");
                    $(this).addClass("thin-view-min");
					hidethumbtip();

					var html="";
					html += '<span id="tmpmsg" style="position:absolute;width:auto;padding:2px 2px;background:transparent;color:#049CD1;">';
					html += '縮圖列上的黃色外框會隨著下方單張圖片而輪動，方便你知道目前瀏覽的圖片是哪張縮圖</span>';
					$tmpmsg =$(html);
					//top:117px;left:250px;
					var offset = $('.list-title-bar').offset();
					$tmpmsg.css({
						top: (offset.top-4) +'px',
						left: (offset.left+120) + 'px'	
						});
					if($.browser.msie)
					$tmpmsg.css({top:(offset.top-1) +'px'});
					$('#closetip').hide();
					$('#main').append($tmpmsg).fadeIn();
					
					setTimeout(function(){
						$tmpmsg.hide();
						$('#closetip').show();
						},10000);
					
                }
                else {
                    el.animate({
						height: "18px"
                    }, "slow",function(){
						el.css("height", "18px");  // IE6 Bug Fixed
					});
                    $(this).removeClass("thin-view-min");
                    $(this).addClass("thin-view-menu");
					$tmpmsg.hide();
					$('#closetip').show();
					//displaythumbtip();
                }
			}
			function toggleListMode()
			{	
				$('#page-bar-notice').fadeOut();
				$("#view-min")
					.unbind("click", toggleListMode)
				$("#view-list")
					.unbind("click", toggleListTitle)
	                .removeClass("thin-view-min")
    	            .addClass("thin-view-menu");
				var $tmpmsg = $('#tmpmsg');
    	      	$tmpmsg.hide();
				$('#closetip').show();
				//displaythumbtip();
				listMode();
				
			}	
			
			function overFilter()
			{
				var $el = $("#head");
				if($el.height() != filter_height)
				{
					$("#tophead").unbind('mouseenter', overFilter);
					$("#topbottom").unbind('mouseenter', overFilter);
					$(".filter").unbind('mouseenter', overFilter);
					$el.animate({height: filter_height + 'px'},'slow', function(){
						$("#head").bind('mouseleave', outFilter);
					});
				}
				
			}
			
			function outFilter()
			{
				var $el = $("#head");
				if($el.height() != 108)
				{
					$("#head").unbind('mouseleave', outFilter);
					$el.animate({height: '108px'},'slow', function(){
						$("#tophead").bind('mouseenter', overFilter);
						$("#topbottom").bind('mouseenter', overFilter);
						$(".filter").bind('mouseenter', overFilter);
					});
				}
			}
					
			function viewMode(speed)
			{
				$('#closetip').show();
				var delay = 'slow';
				if(typeof(speed) != 'undefined')
					delay = speed;
				
				$(".image-block")
					.removeClass("image-block-list")
					.addClass("image-block-view");
				$(".image-block-table-list")
					.removeClass("image-block-table-list")
					.addClass("image-block-table-view");
				$(".image-block-table-tr1-list")
					.removeClass("image-block-table-tr1-list")
					.addClass("image-block-table-tr1-view");
				$(".image-block-src")
					.attr("width", "90")
					.attr("height", "90");
				$("#head").animate({
						height: '108px'
					},
					delay
				);

				var imgcount = $("#list-inner-window").data("imgcount");
				$("#list-window").addClass("list-window");
				$("#list-inner-window").addClass("list-inner-window")
									   .css("width", (imgcount*108) + "px");
				$(".hide-head-icon").show();	
				$(".list-title-bar a").show();//chris modified 20080623
				$("#closetip").show();//chris added
				$("#resulttext").hide(); //chris modified 20080623
				$("#list").animate({height:"138px"}, delay, "swing", function(){
					$("#viewer").slideDown(delay, function(){
						$("#list").animate({height:"18px"}, delay);
						$("#view-min").bind("click", toggleListMode);
						$("#view-list").bind("click", toggleListTitle);
					});					
				});
  				$("div.image-block").each(function(){
					$(this).unbind("click", imageBlockClick1);
					$(this).css("cursor", "pointer");
					$(this).bind("click", imageBlockClick2);
				});
				$("div.image-block-tag").hide();

				$("#tophead").bind('mouseenter', overFilter);
				$("#topbottom").bind('mouseenter', overFilter);
				$(".filter").bind('mouseenter', overFilter);
				
//				$("#image-src").removeData('imguid');
				pageMode=1;
			}
			
			function listMode(speed)
			{

				var delay = 'slow';
				if(typeof(speed) != 'undefined')
					delay = speed;
				
				$("#listrightspan").css("display", "none");
				$("#listleftspan").css("display", "none");
				$(".image-block")
					.removeClass("image-block-view")
					.addClass("image-block-list");
				$(".image-block-table-view")
					.removeClass("image-block-table-view")
					.addClass("image-block-table-list");
				$(".image-block-table-tr1-view")
					.removeClass("image-block-table-tr1-view")
					.addClass("image-block-table-tr1-list");
				$(".image-block-src")
					.attr("width", "90")
					.attr("height", "90");
				$("#head").animate({
						height: filter_height + 'px'
					},
					delay
				);
					
				$("#list-window").removeClass("list-window");
				$("#list-inner-window").removeClass("list-inner-window")
									   .css("width", "auto");

				var imguid = $('#image-src').data('imguid');
				if(typeof(imguid) != 'undefined')
				{
					var $nowel = $('.image-block[id=' + imguid + ']');
					$nowel.css({
						backgroundColor: "#fff"
					});
				}
				$(".hide-head-icon").hide();
				$(".list-title-bar a").hide(); //chris modified 20080623
				$("#closetip").hide();//chris added
				$("#resulttext").show(); //chris modified 20080623
				$(".image-block-tag").show();
				var $list = $("#list");
				var lh = $list.data('listheight');
				$list.animate({height:lh + "px"}, delay);
				$("#viewer").slideUp(delay);
				$("div.image-block").each(function(){
					$(this).unbind("click", imageBlockClick2);
					$(this).css("cursor", "pointer");
					$(this).bind("click", imageBlockClick1);
				});

				//$("#image-src").tagBoxCancel();

				$("#head").unbind('mouseleave', outFilter);
				$("#tophead").unbind('mouseenter', overFilter);
				$("#topbottom").unbind('mouseenter', overFilter);
				$(".filter").unbind('mouseenter', overFilter);

				pageMode=0;
			}
			
			function flipEditImage(action)
			{
				if(pageMode != 1) // should be in list mode
					return ;
				
				var imguid = $('#image-src').data('imguid');
				if(typeof(imguid) == 'undefined')
					return ;

				var $nowel = $('.image-block[id=' + imguid + ']');
						
  				switch (action) 
  				{
  					case 'prev':	// left arrow
  						var $prevel = $nowel.prev();
						var imguid = $prevel.attr('id');
  						if(typeof(imguid) != 'undefined')
  							bindImageToTagEditor(imguid);
						$(".jGrowl-closer").trigger('click');
						$('.jGrowl-notification .close').trigger('click');
						break;
  									
  					case 'next':	// right arrow
  						var $nextel = $nowel.next();
						var imguid = $nextel.attr('id');
  						if(typeof(imguid) != 'undefined')
  							bindImageToTagEditor(imguid);
						$(".jGrowl-closer").trigger('click');
						$('.jGrowl-notification .close').trigger('click');
  						break;
 				}
			}

			$(document).ready(function(){
				
			var imgcount=0;
				$("div.image-block").each(function(){
					$(this).css("cursor", "pointer");
					$(this).bind("click", imageBlockClick1);
					imgcount++;
				});
				
				$("#list-inner-window").data("imgcount", imgcount);
				
			$('.hide-head-icon').click(function(){
				$('#head').hide();
				$(this).hide();
				$('.show-head-icon').show();
		     });
			
			$('.show-head-icon').click(function(){
				$('#head').show();
				$(this).hide();
				$('.hide-head-icon').show();
			});

				
				if($.browser.safari)
				{
					$('body').css('font-family','微軟正黑體');

				}

					
				$('#slide-show-icon').click(function(e){

					var $slideshow = $('<div id="slide-show" style="display:none"></div>');
					$("body").append($slideshow);
						
					var imguid = $('#image-src').data('imguid');
					var nowimguid = imguid;
					var nowimgindex = 0;
						
					$("div.image-block").each(function(index){
						var $el = $(this);
						var imguid = $el.attr('id');
						if(nowimguid == imguid)
							nowimgindex = index;
						var imgurl = getImageURL(imguid);
						var $imghtml = $('<a id="slide-show-image' + index + '" class="lightbox-enabled" rel="show" href="' + imgurl + '" title=" "></a>');
						$slideshow.append($imghtml);
					});

					slideshow_enable = true;
					$("#slide-show a").lightbox({

						start: true,
						startimage: $("#slide-show-image" + nowimgindex),
						onImageChange: function(image){
							// nowimgindex = image.index;
						},
						onClose: function(image){
							var imguid = $("div.image-block:eq(" + image.index + ")").attr('id');
							bindImageToTagEditor(imguid);
							slideshow_enable = false;
						}
					});
				});
				
				$(".image-block-src")
					.attr("width", "90")
					.attr("height", "90");
				
				$("#listrightspan").click(function(e){
					/*
					var $el = $("#list-inner-window");
					var oldofs = -parseInt($el.css("left")) || 0;
					var newofs = oldofs+104*7;
					var maxwidth = parseInt($el.css("width")) || 0;
					if(maxwidth <= 104*8)
						return ;
					
					if(newofs+(104*8) > maxwidth)
						newofs = maxwidth - (104*8);
						
					$("#list-inner-window").animate({left: (-newofs) + "px"});
					*/
					var $el = $("#list-inner-window");
					var maxwidth = parseInt($el.css("width")) || 0;
					var newofs = maxwidth - (108*8);
					$el.animate({left: (-newofs) + "px"});
				});
				
				$("#listleftspan").click(function(e){
					/*
					var $el = $("#list-inner-window");
					var oldofs = -parseInt($el.css("left")) || 0;
					var newofs = oldofs-104*7;
					if(newofs < 0)
						newofs = 0;
					$("#list-inner-window").animate({left: (-newofs) + "px"});
					*/
					$("#list-inner-window").animate({left: "0px"});
				});
				

					
			});