$(document).ready(function() {

    // HERO Slide Show using Cycle Lite plugin
    $('#slideshow-images').cycle({
        delay: 6000,
        speed: 1000,
        before: onBefore
    });

    $("#hero-stroke").hide();
    $("#hero").hover(
        function() {
            $("#hero-stroke").click(function() {
                var loc = $("#slideshow-display a").attr("href");
                location.href = loc;
            }).fadeIn("slow");
        },
        function() {
            $("#hero-stroke").unbind("click").fadeOut("slow");
        }
    );
    // ----------------------------------------

    // Thumbnail show/hide animation + show more/less button interaction
    var hPortfolio = $('#gallery-portfolio').height();
    var hSketchbook = $('#gallery-sketchbook').height();

    $('#gallery-portfolio').height(520);
    $('#gallery-sketchbook').height(520);

    $('#toggle-portfolio').click(function() {
        var i = ($('#gallery-portfolio').height() < hPortfolio) ? hPortfolio : 520;
        $('#gallery-portfolio').animate({ height: i }, 'slow');
        $(this).toggleClass('less');
        return false;
    });

    $('#toggle-sketchbook').click(function() {
        var i = ($('#gallery-sketchbook').height() < hSketchbook) ? hSketchbook : 520;
        $('#gallery-sketchbook').animate({ height: i }, 'slow');
        $(this).toggleClass('less');
        return false;
    });
    // ----------------------------------------


});

// Function call fired just before next HERO slide shows
// Changes HERO text display
function onBefore() { 
	var i = $('#slideshow-images a').index($(this));
	var sHTML = '<a href="'+$(this).attr('href')+'">'+$('img',this).attr('alt')+'</a><br/>'+$('img',this).attr('title');
	
	if($('img',this).hasClass('new')) { 
		sHTML = '<img src="/wp-content/themes/sgi1/gfx/icon_new_space.gif" style="vertical-align: middle;"/>&nbsp;'+sHTML;
	}
	
	$('#slideshow-display').html('<p>'+sHTML+'</p>'); 
	setKey(i);
};
// ----------------------------------------


// Function to update the 'key' icons on HERO slideshow
function setKey(i) {
	$('#slideshow-key img').css('background-position','0 0');
	$('#slideshow-key img:eq('+i+')').css('background-position','0 -7px');	
}
// ----------------------------------------