/*
 * Slide Show
 * v1.0
 */

(function(jQuery) {
	/* 
	 * Slide show requires a minimum of 2 slides.
	 * The next image is dynamically added to the scrolling div.
	 */
    var slideTimer = null;
	//var slideDelay = 7000;	// Delay in ms between slide changes
	var slideAnimDur = 900;	// Duration in ms for slide animation
	var activeId = 1;		// Id of acive slide
	var slidesDrawn = 4;	// No. of slides drawn/maintained in scroll area (min 3)
	var overlay = 'lighten'; // Style of overlay for non-active slide(s) 'lighten' or 'darken'
	var easingEffect = '';	// Requires an JQuery easing plugin, e.g. http://gsgd.co.uk/sandbox/jquery/easing/

	function prepSlides() {
		// Set captions for first two slides
		jQuery('#slide-caption-1')[0].innerHTML=getCaptions(0);
		jQuery('#showreel-slide-1 img.slide-img').attr("src", slideImages[0]);
		jQuery('#slide-caption-2')[0].innerHTML=getCaptions(1);
		jQuery('#showreel-slide-2 img.slide-img').attr("src", slideImages[1]);
	
		// Add overlay class to second slide
		jQuery('#showreel-slide-2 div.relative').find('div:first').addClass(overlay+'-overlay');
		
		// Attempt to add req'd slides to scroll area
		for(var i=3;i<=slidesDrawn;i++){
			addSlide(i);
		}
		// Add overlay effect to second slide
		jQuery('#showreel-next, #showreel-slide-2').hover(
	        function() {
				jQuery('.showreel-slide-holder .'+overlay+'-overlay').css("display", "none");
				jQuery('#showreel-next').attr("src", jQuery("#showreel-next").attr("src").replace("off", "over"));
	        },
	        function() {
				jQuery('.showreel-slide-holder .'+overlay+'-overlay').css("display", "block");
				jQuery('#showreel-next').attr("src", jQuery("#showreel-next").attr("src").replace("over", "off"));
	        }
		);
		// Allow next button and next slide click to proceed showreel
		jQuery('#showreel-next, #showreel-slide-2').click(function() { nextSlide() });
		jQuery('#showreel-slide-2').css("cursor", "pointer");
			
		// Add mouse events to first active slide and active class
		jQuery('#showreel-slide-1').mouseover(activeSlideOver).mouseout(activeSlideOff).addClass('active');
	}
	
	function activeSlideOver() {
        jQuery('#showreel-inner-scroll div.active span.slide-caption-bg').css("backgroundImage", "url('"+skinPath+"images/slide-caption-bg[over].png')");
    }

    function activeSlideOff() {
        jQuery('#showreel-inner-scroll div.active span.slide-caption-bg').css("backgroundImage", "url('"+skinPath+"images/slide-caption-bg[off].png')");
    }
	
	function getCaptions(idx) {
		// Return a html chunk for 
		var linkStr = '';
		var capStr='<table>'+
			'<tbody>'+
				'<tr>'+
					'<td>';
		var captions = slideCaptions[idx];
		var prices = slidePrices[idx];
		var urls = slideUrls[idx];			
		if (jQuery.isArray(captions)) {
			for(var i=0;i<captions.length;i++) {
				linkStr += '<div><a href="'+urls[i]+'">'+captions[i]+prices[i]+'</a></div>';
			}
			capStr += linkStr;
		} else {
			capStr += '<a href="'+urls+'">'+captions+prices+'</a>';
		}
		capStr += '</td>'+
				'</tr>'+
			'</tbody>'+
		'</table>';
		return capStr;
	}
	
	function addSlide(id) {
		idx = (id-1)%slideImages.length;
		var newSlide = '<div id="showreel-slide-'+id+'" class="showreel-slide-holder">' +
			'<div class="relative">' +
				'<div class="'+overlay+'-overlay"><img src="'+skinPath+'images/spacer.gif" width="570" height="340" /></div>' +
				'<img src="'+slideImages[idx]+'" width="570" height="340" alt=""  class="slide-img" />' +
				'<span class="slide-caption-bg"></span>' +
				'<span id="slide-caption-'+id+'" class="slide-caption">' + getCaptions(idx) + '</span>' +
			'</div>' +
		'</div>';
		jQuery('#showreel-inner-scroll').append(newSlide);
		jQuery('#showreel-slide-' + id).hover(
			function() {
				jQuery('.showreel-slide-holder .'+overlay+'-overlay').css("display", "none");
				jQuery('#showreel-next').attr("src", jQuery("#showreel-next").attr("src").replace("off", "over"));
			},
			function() {
				jQuery('.showreel-slide-holder .'+overlay+'-overlay').css("display", "block");
				jQuery('#showreel-next').attr("src", jQuery("#showreel-next").attr("src").replace("over", "off"));
			}
		);
	}
	
	function nextSlide() {
		if (slideTimer) {
			clearTimeout(slideTimer);
	    }
		// Remove overlay from slide to right of active slide
		jQuery('#showreel-slide-' + (activeId+1) + ' .'+overlay+'-overlay').remove();
		jQuery('#showreel-slide-' + (activeId+1))
			.unbind('click')
			.unbind('mouseover')
			.addClass('active')
			.css("cursor", "default");
		// Add click event to new image to right of active and set cursor property
		jQuery('#showreel-slide-' + (activeId+2)).click(function(e) {
            nextSlide();
            e.preventDefault();
            return false;}
		).css("cursor", "pointer");
		
		// Hide next button whilst we animate slide
		jQuery('#showreel-next').css("display", "none");
		// Push slides to left to hide active slide
		jQuery('#showreel-slide-' + activeId).animate({marginLeft:-jQuery('#showreel-slide-' + activeId).outerWidth()}, slideAnimDur, easingEffect).queue(
			function() {
				// Remove current active slide
				jQuery('#showreel-slide-' + activeId).remove();
				// Show next button
				jQuery('#showreel-next').css("display", "block");
				// Add new slide to end
				addSlide(activeId+slidesDrawn);
				jQuery('#showreel-slide-' + (activeId)).dequeue();
				// Active slide is now current one in view
				activeId++;
				// Enable mouse events for new active slide
				jQuery('#showreel-slide-' + activeId).mouseover(activeSlideOver).mouseout(activeSlideOff)
				
				setSlideDelay((activeId-1)%slideDelays.length);
			}
		);

        return false;
	}
	
	function setSlideDelay(idx)
	{
		try {
			slideTimer = setTimeout(nextSlide, slideDelays[idx]);
		} catch(e) {}
	}
	
    jQuery(document).ready(function() {
		prepSlides();
		
		try {
            if (!slideTimer) {
				setSlideDelay(0);
            }
        } catch(e) {}	
    });
})(jQuery);