var timer; 
var speed =4000;
var sizeOFslideshow;
var playArrow = "online/store2/store/INTBAY_PLAY.gif";
var pauseArrow = "online/store2/store/INTBAY_PAUSE.gif"



 function slideShowTHC(speed) {  
     // +++ first we will check how many <li> tags we have inside our slideshow and assigm this to variable
	 sizeOFslideshow = $('ul.slideshow li').size();
     //append a LI item to the UL list for displaying caption  
     $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p align="left"></p></div></li>');  
     //Set the opacity of all images to 0  
     $('ul.slideshow li').css({opacity: 0.0});         
     //Get the first image and display it (set it to full opacity)  
     $('ul.slideshow li:eq(0)').css({opacity: 1.0});  
	 var captionContent = "";
	 for(x=0;x<sizeOFslideshow;x=x+1)
	 	{
		y = x + 1;
		if(x==0)
			{
				captionContent += '<img id="slideshow_controls" onClick="control()" src="'+pauseArrow+'" />';
				captionContent += '<font class="smallbutover" id="' + x + '" onClick="chosen(' + x + ')" >' + y + '</font>';
			}
		else
			{
			    captionContent += '<font class="smallbut" id="' + x + '" onClick="chosen(' + x + ')" >' + y + '</font>';
			}
		}
	
     //Get the caption of the first image from REL attribute and display it  
     //$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));  
     $('#slideshow-caption p').html(captionContent);  
	 //var firstanchor = $('ul.slideshow li:first').find('a').attr('href');
     //$('#slideshow-caption a').attr('href', firstanchor);
	 
     //Display the caption  
     $('#slideshow-caption').css({opacity:1.0, bottom:0});  

       
      control();
       
 }  
var lastpickedis = 0;  
var startpos = 0;
 function gallery() {  
   
   lastpickedis = lastpickedis + 1;
     //if no IMGs have the show class, grab the first image  
     var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));  
   
     //Get next image, if it reached the end of the slideshow, rotate it back to the first image  
     var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));  
           document.getElementById(startpos).className="smallbut";
		   startpos=startpos+1;
		   if(startpos == sizeOFslideshow)
		   		{
				startpos = 0;
				}
		   document.getElementById(startpos).className="smallbutover";
     //Get next image caption  
     //var title = next.find('img').attr('title'); 
     //var desc = next.find('img').attr('alt');  
     //Set the fade in effect for the next image, show class has higher z-index  
     next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);   
     //Hide the current image  
     current.animate({opacity: 0.0}, 1000).removeClass('show');    
 }

	
	function chosen(x)
		{
			var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));  
			//Get next image, if it reached the end of the slideshow, rotate it back to the first image  
			var picked;
			document.getElementById(startpos).className="smallbut";
			startpos = x;
			var string33 = "ul.slideshow li:eq("+x+")";
			if (lastpickedis != x)
				{
				picked = ($(string33));
				document.getElementById(x).className="smallbutover";
			
			clearInterval(timer);
			document.getElementById("slideshow_controls").src = playArrow;
			controlVAR = 0;	
			 //Get next image caption  
   

     //Set the fade in effect for the next image, show class has higher z-index  
     picked.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);  
       
     //Hide the caption first, and then set and display the caption  
     $('#slideshow-caption').animate({bottom:0}, 1, function () {  
             //Display the content
			                 
             $('#slideshow-caption').animate({bottom:0}, 1);     
     });       
     //Hide the current image  
     current.animate({opacity: 0.0}, 1000).removeClass('show');    
		lastpickedis = x;
			
				}
			else
				{
					document.getElementById(x).className="smallbutover";
		 lastpickedis = x;
				}
      
		}
		
var controlVAR = 0;	
	
function control() {
	if(controlVAR == 1)
		{
			clearInterval(timer);
			document.getElementById("slideshow_controls").src=playArrow;
			controlVAR = 0;	
		}
	else
		{
			timer = setInterval('gallery()',speed);
			document.getElementById("slideshow_controls").src=pauseArrow;
			controlVAR = 1;	
		}
	}