(function ($) {
	$(function () {
		
		//photo detail
		var width = 444;
		var height = 333;
		var fixedRatio = width / height;
		var $loader = $('<img src="/images/ajax-loader.gif" alt="loader" style="position:absolute; top:0; left:0;display:none;" />');
		$('body').append($loader);
		var $displayTarget = $('#leftContents div.photLarge p');
		var offset = $displayTarget.offset();
		var left = offset.left + (width - $loader.width()) / 2;
		var top = offset.top + (height - $loader.height()) / 2;
		$loader.css({top:top + 'px', left:left + 'px'});
		
		$('#leftContents div.photoSmall a').click(function(){
			var $this = $(this);
			$displayTarget.css({opacity:0.3});
			$loader.show();
			//success
			function onLoad(){
				var $image = $(this);
				var ratio = this.width / this.height;
				
				if(fixedRatio > ratio){
					$image.width('auto');
					$image.height(height);
				}else{
					$image.width(width);
					$image.height('auto');
				}
				
				$loader.hide();
				
				$displayTarget
					.empty()
					.css({opacity:1})
					.append(this);
				
				$image
					.css({opacity:0, display:'inline', paddingTop:Math.floor((height - $image.height()) * 0.5)})
					.animate({opacity:1});
			};
			//error
			function onError(){
				var $image = $(this);
				$image.attr('src', '/images/noimage_detail_l.gif');
				
				$displayTarget
					.empty()
					.css({opacity:1})
					.append(this);
				$loader.hide();
					
				$image
					.css({opacity:0, display:'inline', paddingTop:Math.floor((height - $image.height()) * 0.5)})
					.animate({opacity:1});
			};
			
			var $image = $('<img />');
			$image
				.one('load', onLoad)
				.one('error', onError)
				.attr('src', $this.attr('href'));
			
			return false;
		});
		
		//photo preload
		
		$('#leftContents div.photoSmall a img').preload({
			placeholder:'/images/placeholder.gif',
			notFound:'/images/noimage_detail_s.gif',
			success:function(data){
				var thumbWidth = 94;
				var thumbHeight = 70;
				var fixedThumbRatio = thumbWidth / thumbHeight;
				var $image = $(data.original);
				if($.browser.msie){
					$('body').append(data.element);
					var w = data.element.width;
					var h = data.element.height;
					
					$('body').get(0).removeChild(data.element);
					
					var ratio = w / h;
					
					if(fixedThumbRatio > ratio){
						$image.height(thumbHeight);
						$image.width(w * (thumbHeight / h));
					}else{
						$image.width(thumbWidth);
						$image.height(h * (thumbWidth / w));
					}
				}
				$image.css({display:'inline', visibility:'visible', paddingTop:Math.floor((thumbHeight - $image.height()) * 0.5)});
			},
			error:function(data){
				
			}
		});
		
		//large image preload
		$displayTarget.find('img').preload({
			placeholder:'/images/placeholder.gif',
			notFound:'/images/noimage_detail_l.gif',
			success:function(data){
				//if($.browser.msie){
					$('body').append(data.element);
					var w = data.element.width;
					var h = data.element.height;
					$(data.element).remove();
					
					var $image = $(data.original);
					var ratio = w / h;
					
					if(fixedRatio > ratio){
						$image.height(height);
						$image.width(w * (height / h ));
					}else{
						$image.width(width);
						$image.height(h * (width / w));
					}
					
					$image.css({display:'inline', visibility:'visible', paddingTop:Math.floor((height - $image.height()) * 0.5)});
				//}
			},
			error:function(data){
			}
		});
		
		var $imageHover;
		function showHoverImage(event){
			var $ele = $(event.currentTarget);
			var src = $ele.attr('src');
			if(src.indexOf('nophoto') != -1) return;
			//src = src.replace(/width=\d+/, 'width=').replace(/height=\d+/,'height=300');
			
			var $window = $(window);
			var offset = $ele.offset();
			var top = offset.top;
			var left = offset.left + $ele.outerWidth();
			if((offset.top - $window.scrollTop()) >  $window.height() / 2) top = top - (309 - $ele.outerHeight());
			
			$imageHover = $('<img src=""/>');
			$imageHover.css({
				position:'absolute',
				height:'300px',
				border:'1px solid #AAAAAA',
				padding:'4px',
				margin:'0 5px',
				background:'#FFFFFF',
				display:'none'
			});
			$('body').append($imageHover);
			
			
			$imageHover
				.attr('src', src)
				.css({top:top, left:left})
				//.bind('load', function(){ $(this).show(); });
				.show()
				;
		};
		
		function hideHoverImage(){
			$imageHover.remove();
				//.unbind('load')
				//.hide();
		};
		
		//list
		var $list = $('#list tr.item')
			.hover(
				function(){
					$(this)
						.addClass('hover')
						.next().addClass('hover');
					
				},
				function(){
					$(this)
						.removeClass('hover')
						.next().removeClass('hover');
				}
			);
			
		$('#list tr.item-pr').hover(
			function(){
				$(this)
					.addClass('hover')
					.prev().addClass('hover');
			},
			function(){
				$(this)
					.removeClass('hover')
					.prev().removeClass('hover');
			}
		);
		
		
		var $thumbnail = $list.find('td.image > a > img.thumbnail');
		$thumbnail
			.bind('mouseover', showHoverImage)
			.bind('mouseout', hideHoverImage);
	});
	
})(jQuery);