$(function() {
	//Add HTML to set up the javascript image gallery
	$('#slideshow').before('<div id="main_image"></div>').wrap('<div id="play_pause_wrap"></div>').wrap('<div id="slide_nav_wrap"></div>');
	
	$('#slideshow').galleria({
		history   : false, // activates the history object for bookmarking, back-button etc.
		clickNext : true, // helper for making the image clickable
		insert    : '#main_image', // the containing selector for our main image
		onImage   : function(image,caption,thumb) {
						
			// fade in the image & caption
			image.hide().fadeIn(1500);
						
			// fetch the thumbnail container
			var _li = thumb.parents('li');
			
			$('#main_image').trigger('image-loaded');
			
		},
		onThumb : function(thumb) { // thumbnail effects goes here
			
			// fetch the thumbnail container
			var _li = thumb.parents('li');
			
			// fade in the thumbnail when finnished loading
			thumb.css('display','none');
		}
	});
	
	
	$('#slideshow li').each(function (i) {
		
		$(this).append('<div class="trigger hiddenText">'+(i+1)+'</div>');
		
   	 // options
	    var distance = 10;
	    var time = 250;
	    var hideDelay = 100;

	    var hideDelayTimer = null;

	    // tracker
	    var beingShown = false;
	    var shown = false;

	    var trigger = $('.trigger', this);
	    var popup = $('img', this).css('opacity', 0);

	    // set the mouseover and mouseout on both element
	    $([trigger.get(0), popup.get(0)]).mouseover(function () {
	      // stops the hide event if we move from the trigger to the popup element
	      if (hideDelayTimer) { clearTimeout(hideDelayTimer);}
              
	      // don't trigger the animation again if we're being shown, or already visible
	      if (beingShown || shown) {
	        return;
	      } else {
	        beingShown = true;

	        // reset position of popup box
	        popup.css({
	          top: -100,
	          left: -55,
	          display: 'block' // brings the popup back in to view
	        })

	        // (we're using chaining on the popup) now animate it's opacity and position
	        .animate({
	          top: '-=' + distance + 'px',
	          opacity: 1
	        }, time, 'swing', function() {
	          // once the animation is complete, set the tracker variables
	          beingShown = false;
	          shown = true;
	        });
	      }
	    }).mouseout(function () {
	      // reset the timer if we get fired again - avoids double animations
	      if (hideDelayTimer) {clearTimeout(hideDelayTimer);}

	      // store the timer so that it can be cleared in the mouseover if required
	      hideDelayTimer = setTimeout(function () {
	        hideDelayTimer = null;
	        popup.animate({
	          top: '-=' + distance + 'px',
	          opacity: 0
	        }, time, 'swing', function () {
	          // once the animate is complete, set the tracker variables
	          shown = false;
	          // hide the popup entirely after the effect (opacity alone doesn't do the job)
	          popup.css('display', 'none');
	        });
	      }, hideDelay);
	    });
  });

    //Make the triggers link to their respective images
    $('#slideshow .trigger').click(function(){
    	$(this).prev('img').trigger('click');
    });
    
    var itemLength = $('#slideshow li').length;
    var counterWidth = (itemLength * 18)+18;    

    $('#slideshow').css({'visibility' : 'visible', 'height' : 'auto', 'width' : counterWidth});
    $('#slide_nav_wrap').prepend('<a id="pause_btn" class="hiddenText" href="#" title="Pause the Slideshow">Pause</a>');
    
   var set_int = window.setInterval(function(){   
                    $('img.replaced').fadeOut('slow', function(){
                        $.galleria.next();
                    });
                }, 8500);
    
    $('#pause_btn').click(function(){
        if ($(this).text() ==  "Play"){
             $(this).text('Pause').attr('title', 'Pause the Slideshow');
                $.galleria.next();
                window.setInterval(function(){
                    $('img.replaced').fadeOut('slow', function(){
                        $.galleria.next();
                    });
                }, 8500);
                return false;
        } else {
            $(this).text('Play').attr('title', 'Play the Slideshow').addClass('playstate');
            window.clearInterval(set_int);
            return false;
        }
    });

    $('#main_image').prepend('<div id="dont-steal-me-please"><img src="/site/img/presentation/drag-stopper.gif" alt="Drag and Drop stopper" title="Next Image »"/></div>').click(function(){
        $('img.replaced').fadeOut('slow', function(){
            $.galleria.next();
        });
    });

});