/*
the images preload plugin
*/
(function($) {
	$.fn.preload = function(options) {
		var opts 	= $.extend({}, $.fn.preload.defaults, options),
			o		= $.meta ? $.extend({}, opts, this.data()) : opts;
		return this.each(function() {
			var $e	= $(this),
				t	= $e.attr('rel'),
				i	= $e.attr('href'),
				l	= 0;
			$('<img/>').load(function(i){
				++l;
				if(l==2) o.oncomplete();
			}).attr('src',i);	
			$('<img/>').load(function(i){
				++l;
				if(l==2) o.oncomplete();
			}).attr('src',t);	
		});
	};
	$.fn.preload.defaults = {
		oncomplete	: function(){return false;}
	};
})(jquery);

$(function() {
	//some elements..
	var $ps_container		= $('#ps_container'),
		$ps_image_wrapper 	= $ps_container.find('.ps_image_wrapper'),
		$ps_next			= $ps_container.find('.ps_next'),
		$ps_prev			= $ps_container.find('.ps_prev'),
		$ps_nav				= $ps_container.find('.ps_nav'),
		$tooltip			= $ps_container.find('.ps_preview'),
		$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
		$links				= $ps_nav.children('li').not($tooltip),
		total_images		= $links.length,
		currenthovered		= -1,
		current				= 0,
		$loader				= $('#loader');
	
	/*自动播放图片*/
	interval = setinterval(autonext, "5000");
	var next_or_prev = 'next';
	function autonext(){
		if((next_or_prev == 'next')&&(current == (total_images-1))){
			next_or_prev = 'prev';
		}
		if((next_or_prev == 'prev')&&(current == 0)){
			next_or_prev = 'next';
		}
		if(next_or_prev == 'next') nextimage(); else previmage();
	}

	/*check if you are using a browser*/	
	var ie 				= false;
	if ($.browser.msie) {
		ie = true;//you are not!anyway let's give it a try
	}
	if(!ie)
		$tooltip.css({
			opacity	: 0
		}).show();
		
		
	/*first preload images (thumbs and large images)*/
	var loaded	= 0;
	$links.each(function(i){
		var $link 	= $(this);
		$link.find('a').preload({
			oncomplete	: function(){
				++loaded;
				if(loaded == total_images){
					//all images preloaded,
					//show ps_container and initialize events
					$loader.hide();
					$ps_container.show();
					//when mouse enters the pages (the dots),
					//show the tooltip,
					//when mouse leaves hide the tooltip,
					//clicking on one will display the respective image	
					$links.bind('mouseenter',showtooltip)
						  .bind('mouseleave',hidetooltip)
						  .bind('click',showimage);
					//navigate through the images
					$ps_next.bind('click',nextimage);
					$ps_prev.bind('click',previmage);
				}
			}
		});
	});
	
	function showtooltip(){
		var $link			= $(this),
			idx				= $link.index(),
			linkouterwidth	= $link.outerwidth(),
			//this holds the left value for the next position
			//of the tooltip
			left			= parsefloat(idx * linkouterwidth) - $tooltip.width()/2 + linkouterwidth/2,
			//the thumb image source
			$thumb			= $link.find('a').attr('rel'),
			imageleft;
		
		//if we are not hovering the current one
		if(currenthovered != idx){
			//check if we will animate left->right or right->left
			if(currenthovered != -1){
				if(currenthovered < idx){
					imageleft	= 75;
				}
				else{
					imageleft	= -75;
				}
			}
			currenthovered = idx;
			
			//the next thumb image to be shown in the tooltip
			var $newimage = $('<img/>').css('left','0px')
									   .attr('src',$thumb);
			
			//if theres more than 1 image 
			//(if we would move the mouse too fast it would probably happen)
			//then remove the oldest one (:last)
			if($ps_preview_wrapper.children().length > 1)
				$ps_preview_wrapper.children(':last').remove();
			
			//prepend the new image
			$ps_preview_wrapper.prepend($newimage);
			
			var $tooltip_imgs		= $ps_preview_wrapper.children(),
				tooltip_imgs_count	= $tooltip_imgs.length;
				
			//if theres 2 images on the tooltip
			//animate the current one out, and the new one in
			if(tooltip_imgs_count > 1){
				$tooltip_imgs.eq(tooltip_imgs_count-1)
							 .stop()
							 .animate({
								left:-imageleft+'px'
							  },150,function(){
									//remove the old one
									$(this).remove();
							  });
				$tooltip_imgs.eq(0)
							 .css('left',imageleft + 'px')
							 .stop()
							 .animate({
								left:'0px'
							  },150);
			}
		}
		//if we are not using a "browser", we just show the tooltip,
		//otherwise we fade it
		//
		if(ie)
			$tooltip.css('left',left + 'px').show();
		else
		$tooltip.stop()
				.animate({
					left		: left + 'px',
					opacity		: 1
				},150);
	}
	
	function hidetooltip(){
		//hide / fade out the tooltip
		if(ie)
			$tooltip.hide();
		else
		$tooltip.stop()
				.animate({
					opacity		: 0
				},150);
	}
	
	function showimage(e){
		var $link				= $(this),
			idx					= $link.index(),
			$image				= $link.find('a').attr('href'),
			$currentimage 		= $ps_image_wrapper.find('img'),
			currentimagewidth	= $currentimage.width();
		
		//if we click the current one return
		if(current == idx) return false;
		
		//add class selected to the current page / dot
		$links.eq(current).removeclass('selected');
		$link.addclass('selected');
		
		//the new image element
		var $newimage = $('<img/>').css('left',currentimagewidth + 'px')
								   .attr('src',$image);
		
		//if the wrapper has more than one image, remove oldest
		if($ps_image_wrapper.children().length > 1)
			$ps_image_wrapper.children(':last').remove();
		
		//prepend the new image
		$ps_image_wrapper.prepend($newimage);
		
		//the new image width. 
		//this will be the new width of the ps_image_wrapper
		var newimagewidth	= $newimage.width();
	
		//check animation direction
		if(current > idx){
			$newimage.css('left',-newimagewidth + 'px');
			currentimagewidth = -newimagewidth;
		}	
		current = idx;
		//animate the new width of the ps_image_wrapper 
		//(same like new image width)
		$ps_image_wrapper.stop().animate({
			width	: newimagewidth + 'px'
		},350);
		//animate the new image in
		$newimage.stop().animate({
			left	: '0px'
		},350);
		//animate the old image out
		$currentimage.stop().animate({
			left	: -currentimagewidth + 'px'
		},350);
	
		e.preventdefault();
		clearinterval(interval);
		interval = setinterval(autonext, "5000");
	}				
	
	function nextimage(){
		if(current < total_images){
			$links.eq(current+1).trigger('click');
		}
	}
	function previmage(){
		if(current > 0){
			$links.eq(current-1).trigger('click');
		}
	}
});