// JavaScript Document
//$(window).ready(function()
//	{
(function($){
	$.fn.LBamazing = function(options) {
	var opts = $.extend($.fn.LBamazing.defaults,options);
	var img_holder=document.getElementById('lbSlideShow');
	
	//script varibales
	var padding_img=8
	var wrapper_padding
	var full_img
	var img_height
	var img_width
	var arrowcoord
	var remove
	var thumb_height
	var tot_thumbs
	var tbumbstart
	var thumbend
	var wrapper_width
	var movex
	var auto_slide
	var holder_pos
	var arr
	var i
	var random_no
	var mask
	var old_img
	var img_fade
	var slide_back
	var slider_text
	
	lb_setup(img_holder)	
	
		function lb_setup(img_holder)
		{
				 full_img=document.getElementById('full-img')
				 full_img=full_img.getElementsByTagName('img')
				 tot_thumbs=full_img.length
				$('#lbSlideShow').css('width',opts.holder_img_width)
				$('#full-img').css('width',opts.holder_img_width)
				 
				var thumb_holder=document.createElement('div')
				$(thumb_holder).attr('class','lb-filmstrip')
				img_holder.appendChild(thumb_holder)
				$('#arrow-container').css('width',parseInt($(img_holder).css('width')))
				thumbstart=0
				
				var holder=document.createElement('div')
				$(holder).attr('class','filmstrip-wrapper')
				var height_percent=opts.thumb_width/$(full_img[0]).width()
				thumb_height=$(full_img[0]).height()*height_percent
				
				slider_text=document.createElement('div')
				$(slider_text).attr('id','slide-text')
				
				for(var x=0;x<full_img.length;x++)
				{
				//set id to the full image	
					$(full_img[x]).attr('id','img'+x)
					if(x==0){full_img[x].style.display='block';img_height=full_img[x].height;img_width=full_img[x].width}
					$(full_img[x]).css({'height':img_height,'width':img_width,'position':'absolute','z-index':'100'})	
					var thumbs=document.createElement('img')
					$(thumbs).attr('src',full_img[x].src)
					$(thumbs).attr('id','slide'+x)
					$(thumbs).css({'width':opts.thumb_width+'px','height':thumb_height+'px','left':(opts.thumb_width+padding_img)*x})
					thumb_holder.appendChild(holder)
					holder.appendChild(thumbs)
		//if the top position of the thumbnails are higherthan the filmstrip then hide the thumbnails	
					if(thumbs.offsetLeft==0){$(thumbs).css('opacity',1)}
					if(thumbs.offsetLeft+opts.thumb_width+padding_img<thumb_holder.offsetWidth){thumbend=x;wrapper_width=thumbs.offsetLeft+opts.thumb_width}
						
					$(thumbs).bind('mouseover',arrow_move)
					$(full_img[x]).bind('mouseover',arrow_move)
					$(thumbs).bind('mouseover',thumb_glow)
					$(thumbs).bind('mouseout',thumb_dimish)
					$(thumbs).bind('click',move_thumb)
					
					$(thumbs).bind('mouseover',remove_slide)
					$(full_img[x]).bind('mouseover',remove_slide)
					$(thumbs).bind('mouseout',set_slide)
					$(full_img[x]).bind('mouseout',set_slide)
					
				}
				$('#arrow-container').bind('mouseover',remove_slide)
					$('#arrow-container').bind('mouseout',set_slide)
	//pulls height from adjusted thumbnails
				
	//sets the slideshowwidth and height as well as the thumbnail holder	
					if(opts.thumb_position=='bottom'){holder_pos=img_height}
					else{holder_pos='0px'}
				$('#lbSlideShow').css({'height':img_height,'width':img_width})
				$('.lb-filmstrip').css({'height':thumb_height,'width':img_width,'position':'absolute','z-index':'500','top':holder_pos})
	//sets a wrapper around the thumbnails to position them in the player
				$(holder).css({'width':wrapper_width,'height':thumb_height})
				var cont_x=(parseInt($('#lbSlideShow').css('width'))-parseInt($(holder).width()))/2
				$(holder).css('left',cont_x)
	//sets wrapper around physical player
				wrapper_padding=thumb_height+40
				$('#slide-frame').css({'height':img_height+'px','padding-bottom':wrapper_padding+'px'})
				set_slide()
				arrows()		
		}
		
		function set_slide()
		{
			
			auto_slide=setInterval(function(){next_thumb()},opts.set_slide_time)
		}
		
		function remove_slide()
		{
			
			clearInterval(auto_slide)
		}
		
		function arrows()
		{	
			var arrow_holder=document.getElementById('arrow-container')
			arrow_holder=arrow_holder.getElementsByTagName('img')
			movex=arrow_holder[0].width
			var top=(img_height-$('#arrow-container').height())/2
			$('#arrow-container').css('top',top)	
		}
		
//animation of arrows out		
	function arrow_move()
	{
		clearTimeout(remove)
		var checkit='-'+movex
		var arrowcoord=parseInt($('.left-arrow').css('margin-left'))
		
		if(arrowcoord!=checkit)
		{
			  $('.left-arrow').animate({'margin-left':'-'+movex},300)
			  $('.right-arrow').animate({'margin-right':'-'+movex},300)
		}
	}
	
//animation of arrows in	
	function arrow_back()
	{
		
		remove=setTimeout(
							  function()
							  {
								$('.left-arrow').animate({'margin-left':'0'},300)
								$('.right-arrow').animate({'margin-right':'0'},300)
							  },500)
	}
	
//this area is where the animation of the thumbnails occur from left to right by clicking on the arrows or simply clicking on the thumbs nails 
// to move the thumbnails forward from the arrow
   function next_thumb()
   {	
		
		thumbstart=thumbstart+1
		img_fade=thumbstart-1
		
		if(thumbstart<tot_thumbs)
		{
		if($('#slide-text').length){$('#slide-text').fadeOut(opts.set_ani_time/2)}
		$('#slide'+img_fade).animate({'opacity':.55},300,function(){
		for(var x=0;x<tot_thumbs;x++)
		{
		//alert($('#slide'+hideit).css('left')+':'+thumb_width*thumbstart)
		var items=document.getElementById('slide'+x)
		$('#slide'+x).animate({'left':items.offsetLeft-(opts.thumb_width+padding_img)},{duration: opts.set_ani_time, easing:'easeInOutBack'})
		}
		thumbend=thumbend+1
		$('#slide'+thumbstart).animate({'opacity':1},300)
																	})
		}
	///if thumb nail has reached its max spot them 	send back to beginning
		if(thumbstart==tot_thumbs)
		{
		img_fade=tot_thumbs-1
		for(var x=0;x<tot_thumbs;x++)
			{
				
			 	slide_back=document.getElementById('slide0')
				slide_back=slide_back.offsetLeft
				slide_back=slide_back.toString()
				slide_back=Number(slide_back.substring(1))
				if(x!=0){$('#slide'+x).animate({'opacity':.55},300)}
				if(x==tot_thumbs-1){$('#slide'+x).animate({'opacity':.55},300,function(){   
																					   if($('#slide-text').length){$('#slide-text').fadeOut(opts.set_ani_time/2)}
																					   for(var xx=0;xx<tot_thumbs;xx++)
																					   {
																						var items=document.getElementById('slide'+xx)   
																					   $('#slide'+xx).animate({'left':slide_back+items.offsetLeft},{duration:3000,easing:'easeInOutBack'})
																					  if(xx==0){$('#slide0').css('opacity',1)}
																					   }
																					   
																					   })}
			
			thumbstart=0
			img_fade=tot_thumbs-1
			}
		}
		
		New_image(thumbstart,img_fade)
   }
  
// to move the thumbnails back from the arrow
   function prev_thumb()
   {
	  // $('.filmstrip-wrapper').animate({'left':+4},1000);
	
	  if(thumbstart>0)
	  { 
	  if($('#slide-text').length){$('#slide-text').fadeOut(opts.set_ani_time/2)}
		$('#slide'+thumbstart).animate({'opacity':.55},300,function(){
		for(var x=tot_thumbs-1;x>-1;x--)
		{
		var items=document.getElementById('slide'+x)
		
		$('#slide'+x).animate({'left':items.offsetLeft+(opts.thumb_width+padding_img)},{duration: opts.set_ani_time, easing:'easeInOutBack'},function(){})
		}
		//$('.filmstrip-wrapper').animate({'left':-94},1000);
		 thumbstart=thumbstart-1
		thumbend=thumbend-1
		$('#slide'+thumbstart).css('opacity',.55)
		$('#slide'+thumbstart).animate({'opacity':1},300)														   
																	})
		New_image(thumbstart-1,thumbstart)
	  }
   }
//thumbs that will move based on the click   
   	function move_thumb()
	{  for(var y=0;y<tot_thumbs;y++)
		{
		$('#slide'+y).stop(true,true)
		}
		if($(this).css('opacity')==1)
		{
		var clicked_ele=this.offsetLeft+(opts.thumb_width+padding_img)
		if($('#slide-text').length){$('#slide-text').fadeOut(opts.set_ani_time/2)}
		for(var x=0;x<tot_thumbs;x++)
		{
		var items=document.getElementById('slide'+x)
		if(items.offsetLeft==0){old_img=x}
		var new_pos=(items.offsetLeft+(opts.thumb_width+padding_img))-clicked_ele
		$('#slide'+x).unbind('mouseout',thumb_dimish)
		$('#slide'+x).animate({'left':new_pos},{duration: opts.set_ani_time, easing:'easeInOutBack'})	
		}
		
		thumbstart=Number(this.id.substring(5))
		New_image(thumbstart,old_img)
		}
	}
//reappend the mouseover for the glow position




function New_image(new_img,old_img)
	{	
		var div_holder=document.createElement('div')
		$(div_holder).css({'width':img_width,'height':img_height,'overflow':'hidden','position':'absolute','z-index':'300'})
		$('#full-img').append(div_holder)
		var w=Math.floor(img_width/5);
		var h=Math.floor(img_width/5);
		var src=$('#img'+old_img).attr('src')
		//var parent=$('#img'+overlay).parent()
		arr = new Array();

		i=0
		var j=0
		var index=0
		block = $("<div>",{css:{
						position:"absolute",
						width:w,
						height:h,
						'background-image':'url('+src+')',
						'background-color':opts.bg,
						'border':opts.border,
						'z-index':'200'
						}});
	
	mask = block.clone();
    mask.css({'background-image':'',display:"none"});
	 
	 while(i<img_width)
		 {
		   j=0;
			while(j<img_height)
			{
 
				arr[index] = block.clone().css({left:i ,top:j,backgroundPosition:-i+"px "+-j+"px" });
				$(div_holder).append(arr[index++]);
			j = j + h;
			}
 
			i = i + w;
		 }
//this will unbind all events on player so the animations do not get hung up if clicked to fast
		
							
							$('.left-arrow').unbind('click',prev_thumb)
							$('.right-arrow').unbind('click',next_thumb)
							 for(var y=0;y<tot_thumbs;y++)
							 {
										$('#slide'+y).unbind('mouseover',arrow_move)
										$(full_img[y]).unbind('mouseover',arrow_move)
										$('#slide'+y).unbind('mouseover',thumb_glow)
										$('#slide'+y).unbind('mouseout',thumb_dimish)
										$('#slide'+y).unbind('click',move_thumb)
							 }
							
		 $('#img'+old_img).css('display','none')
		$('#img'+new_img).css('display','block')
		random_no = random_array(arr.length);	
doit(new_img)
	}

 
function doit(new_img){
	i=0
	//clearTimeout(auto_slide)
	var timer = setInterval(function(){
	  var pos;
	  pos = $(arr[random_no[i]]).position();
 		
	 if(pos!=null){
	 temp = mask.clone().css({top:pos.top,left:pos.left});
	 temp.fadeIn(250,function(){
									   $(arr[random_no[i]]).css('background-image','');
									   $(this).remove();
									   $(arr[random_no[i++]]).fadeOut(350,function(){
 
													 $(this).remove();
 
													  });
 										if(i==random_no.length){clearInterval(timer);slide_text(new_img);reappend('ani-over') }
									   });
 
	 }
 
								 },60);
	
	};
function slide_text(new_img)
	{	
		if($('#img'+new_img).attr('title'))
		{
		
		
		$(slider_text).fadeIn(opts.set_ani_time)
		slider_text.innerHTML=$('#img'+new_img).attr('title')
		$('#full-img').append(slider_text)
		}
		
	}

function random_array(maxn)
 {
 	
    var array = new Array();
	var temp,i,flag=true;
	var index =0;
	 while(index<maxn)
	 {
		 flag = true;
		 temp = Math.floor(Math.random() * maxn);
		
		 for(i=0;i<array.length;i++)
		 {
			 if(temp==array[i])
			 {
				flag=false;
				break;
			 }
		 }
 
		 if(flag==true)
		 array[index++] = temp;
	 }
 
	 return array;
 };


function reappend(obj)
{
	//var check=String('-'+movex+'px')
	
	
	if(obj=='ani-over'){
		
			
		$('.left-arrow').bind('click',prev_thumb)
		$('.right-arrow').bind('click',next_thumb)
		 for(var y=0;y<tot_thumbs;y++)
		 {
			 		$('#slide'+y).bind('mouseover',arrow_move)
					$(full_img[y]).bind('mouseover',arrow_move)
					$('#slide'+y).bind('mouseover',thumb_glow)
					$('#slide'+y).bind('mouseout',thumb_dimish)
					$('#slide'+y).bind('click',move_thumb)
		 }
		
	}
		
}


//thumbnails glowing   
   function thumb_glow()
   	{
		//set user varibles here
		$(this).animate({'opacity':1},300)
	}
	
	function thumb_dimish()
	{//set user varibles here
		if(this.offsetLeft!=0)
		{
		
		$(this).animate({'opacity':.55},300)
		}
	}

//end of thumbnails animating	

	$('#lbSlideShow').bind('mouseover',arrow_move)	
	$('#lbSlideShow').bind('mouseout',arrow_back)
	$('.left-arrow').bind('click',prev_thumb)
	$('.right-arrow').bind('click',next_thumb)
	
	}
	
	$.fn.LBamazing.defaults = {
	 thumb_width: 80,
	 set_slide_time: 7000,
	 thumb_position: 'bottom',
	 set_ani_time: 1000,
	 border: '1px solid #666',
	 bg: '#fff',
	 holder_img_width: 600
	};
	})(jQuery);