// this is the javascript used on the homepage to slide the main images
// and move the marker around on the thumbnail images
(function(j$) {
    var mainImages		= j$(".mainImage");
    var thumbnailImages	= j$(".thumbnailImage");
    var currentImage	= 0;
    
    thumbnailImages.click(slide);
    
    function slide()
    {
    	for(i = 0; i < thumbnailImages.length; i++)
    	{
    		if(this == thumbnailImages[i])
    		{
    			currentImage	= i;
    		}
    	}
    	
    	update();
    	j$(".sliderContainer").stop().animate({left: -mainImages[currentImage].offsetLeft}, 1000);
    	j$(".thumbnailMarker").stop().animate({left: this.offsetLeft + 5}, 1000);
    }
    
    function update()
    {
    	mainImage		= j$(mainImages[currentImage]);
    	mainImageLink	= mainImage.children('a').attr('href');
    	mainImageText	= mainImage.children('a').children('img').attr('alt');
    	j$(".boatName").text(mainImageText);
    	j$(".charterLink a").attr('href', mainImageLink);
    }
    
    this.scrollLeft		= function()
    {
    	if(currentImage != 0)
    	{
    		currentImage = currentImage - 1;
    		update();
    		j$(".sliderContainer").stop().animate({left: -mainImages[currentImage].offsetLeft}, 1000);
        	j$(".thumbnailMarker").stop().animate({left: thumbnailImages[currentImage].offsetLeft + 5}, 1000);
    	}
    }
    
    this.scrollRight	= function()
    {
    	if(currentImage != 6)
    	{
    		currentImage++;
    		update();
    		j$(".sliderContainer").stop().animate({left: -mainImages[currentImage].offsetLeft}, 1000);
        	j$(".thumbnailMarker").stop().animate({left: thumbnailImages[currentImage].offsetLeft + 5}, 1000);
    	}
		else
		{
			currentImage = 0;
			update();
    		j$(".sliderContainer").stop().animate({left: -mainImages[currentImage].offsetLeft}, 1000);
        	j$(".thumbnailMarker").stop().animate({left: thumbnailImages[currentImage].offsetLeft + 5}, 1000);
		}
    }
})(jQuery);