/**
* Name: Plugin Sweet thumbnail
* Builded By: www.skyoftech.com
* Email: contact@ytcvn.com
* Type: JQuery 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),
				arrImg = $e.attr('rel').split("::::"),
				t	= arrImg[1],
				i	= arrImg[0],
				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($) {

    $.fn.sweetThumbnails = function(options) {
        var defaults = {  
			obj:'',
			$sot_image_wrapper:'',
			$sot_next:'',
			$sot_prev:'',
			$sot_nav:'',
			$tooltip:'',
			$sot_preview_wrapper:'',
			$links:'',
			total_images:'',
			currentHovered:-1,
			current:0,
			ie:false,
			$imgLeft:0,
			$moduleId:0,
			$status:1,
			$timemerautoplay:'',
			$timer: 5000,
			$pause:0,
			$stop_when_hover:1,
			$auto_play:1
        };  
        
        //Extend those options
        var options = $.extend(defaults, options); 

		return this.each(function() {
			// install variable
			options.obj 				= $(this);
			options.$sot_image_wrapper 	= options.obj.find('.sot_image_wrapper');
			options.$sot_next 			= options.obj.find('.sot_next');
			options.$sot_prev 			= options.obj.find('.sot_prev');
			options.$sot_nav 			= options.obj.find('.sot_nav');
			options.$tooltip 			= options.obj.find('.sot_preview');
			options.$sot_preview_wrapper = options.$tooltip.find('.sot_preview_wrapper');
			options.$links 				= options.$sot_nav.children('li').not(options.$tooltip);
			options.total_images 		= options.$sot_nav.children('li').not(options.$tooltip).length;
		
			/*check if you are using a browser*/				
			if ($.browser.msie) {
				options.ie = true;//you are not!Anyway let's give it a try
			}
			if(!options.ie)
				options.$tooltip.css({
					opacity	: 0
				}).show();
				
			if(options.$stop_when_hover){	
				options.obj.hover(function(){ options.$pause = 1; } , function(){ options.$pause = 0; });
			}
			/*first preload images (thumbs and large images)*/
			var loaded	= 0;
			options.$links.each(function(i){
				var $link 	= $(this);
				$link.find('a').preload({
					onComplete	: function(){
						++loaded;
						if(loaded == options.total_images){
							//all images preloaded,
							//show sot_container and initialize events
							options.obj.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	
							options.$links.bind('mouseenter',showTooltip)
								  .bind('mouseleave',hideTooltip)
								  .bind('click',function(){ showImage($(this),'click') });
							//navigate through the images
							options.$sot_next.bind('click',nextImage);
							options.$sot_prev.bind('click',prevImage);
						}
					}
				});
			});
			if(options.$auto_play)
			{
				var timemerautoplay = window.clearTimeout(timemerautoplay);
				var timemerautoplay = window.setTimeout(function(){autoplayslide()},options.$timer);
			}
			
		});
				
		function autoplayslide(){
			if(options.$status){
				var next = options.current+1;
				if((options.current+1)<options.$links.length)
					showImage($(options.$links[next]), 'auto');
				else showImage($(options.$links[0]),'auto'); 
			}
		};
		
		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-5) - options.$tooltip.width()/2 + linkOuterWidth/2,
				//the thumb image source
				$thumb			= $link.find('a').attr('rel').split("::::")[1],
				imageLeft = options.$imgLeft;
				
			//alert($link.width())
			//if we are not hovering the current one
			if(options.currentHovered != idx){
				//check if we will animate left->right or right->left
				if(options.currentHovered != -1){
					if(options.currentHovered < idx){
						imageLeft	= options.$imgLeft;
					}
					else{
						imageLeft	= options.$imgLeft;
					}
				}
				options.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(options.$sot_preview_wrapper.children().length > 1)
					options.$sot_preview_wrapper.children(':last').remove();
				
				//prepend the new image
				options.$sot_preview_wrapper.prepend($newImage);
				
				var $tooltip_imgs = options.$sot_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
				//alert(imageLeft)
				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(options.ie)
			{
				options.$tooltip.css('left',left + 'px').show();
			}
			else 
			{
				
				options.$tooltip.stop()
								.animate({
									left		: left + 'px',
									opacity		: 1
								},150);
			}
			
		}
		
		function hideTooltip(){
			//hide / fade out the tooltip
			if(options.ie)
				options.$tooltip.hide();
			else
			options.$tooltip.stop()
					.animate({
						opacity		: 0
					},150);
		}
		
		function showImage(obj, type){
			
			if((type=='auto' && options.$status && !options.$pause) || (type=='click' && options.$status)){
				
				options.$status = 0;
				if(obj!='') var $link = obj; 
				var idx					= $link.index(),
					$image				= $link.find('a').attr('rel').split("::::")[0],
					$currentImage 		= options.$sot_image_wrapper.find('img'),
					currentImageWidth	= $currentImage.width();
				
				//if we click the current one return
				if(options.current == idx) {options.$status = 1;return false;}
				
				//$("#sot-thumbSlide-shortDesc-"+options.$moduleId).stop().animate({bottom:'10px'},1000)
				//$("#sot-thumbSlide-shortDesc-"+options.$moduleId).slideUp('slow', function() {});
				
				$("#thumbSlide-shortDesc-"+options.$moduleId+"-"+options.current)
				.animate(
						{bottom:'-'+$("#thumbSlide-shortDesc-"+options.$moduleId+"-"+options.current).outerHeight()+'px'},500, function(){ 
								$("#sot-thumbSlide-shortDesc-"+options.$moduleId).children('.sot-cs-title')
								.hide('slow',
									  	function() {
											
										 }
																														 
									 );
								$("#thumbSlide-shortDesc-"+options.$moduleId+"-"+idx).show();
								$("#thumbSlide-shortDesc-"+options.$moduleId+"-"+idx)
								.css({bottom:'-'+$("#thumbSlide-shortDesc-"+options.$moduleId+"-"+idx).outerHeight()+'px',
									'-ms-filter':'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)',
									'filter': 'alpha(opacity=70)',
									'opacity':'0.7'});
								$("#thumbSlide-shortDesc-"+options.$moduleId+"-"+idx).animate({bottom:'0px'},500, function(){});
								
							}
						);
				
				//add class selected to the current page / dot
				options.$links.eq(options.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(options.$sot_image_wrapper.children().length > 1)
					options.$sot_image_wrapper.children(':last').remove();
				
				//prepend the new image
				options.$sot_image_wrapper.prepend($newImage);
				
				//the new image width. 
				//This will be the new width of the sot_image_wrapper
				var newImageWidth	= $newImage.width();
			
				//check animation direction
				if(options.current > idx){
					$newImage.css('left',-newImageWidth + 'px');
					currentImageWidth = -newImageWidth;
				}	
				options.current = idx;
				//animate the new width of the sot_image_wrapper 
				//(same like new image width)
				options.$sot_image_wrapper.stop().animate({
					width	: newImageWidth + 'px'
				},350);
				//animate the new image in
				$newImage.stop().animate({
					left	: '0px'
				},350,
					function(){
						
									
					});
				//animate the old image out
				$currentImage.stop().animate({
					left	: -currentImageWidth + 'px'
				},350,
					function(){
						
								//	options.$status = 1;
					}
				);
			
				//e.preventDefault();
				options.$status = 1;
				
			}
			
			if(options.$auto_play)
			{
				clearTimeout(options.$timemerautoplay);
				options.$timemerautoplay = setTimeout(function(){autoplayslide()},options.$timer);
			}
			
		}				
		
		function nextImage(){
			if(options.current < options.total_images){
				options.$links.eq(options.current+1).trigger('click');
			}
		}
		function prevImage(){
			if(options.current > 0){
				options.$links.eq(options.current-1).trigger('click');
			}
		}
    }
		
})(jQuery);