$(document).ready(function() {
    
    var showhide = $('#content .focus-item .item_content');
    
    function addShowHide(){
        showhide.prepend("<span><b>info</b> <img src='assets/img/arrow_up.gif' alt='Show this content' /></span>");
        showhide.find('p').hide();
    }
    
    //Add the Show/Hide Panel on docready
    addShowHide();
   
    //Show / Hide the details panel on the focus element
    showhide.click(function () {
        if(showhide.find('b').html() == "hide"){
            showhide.find('span b').html("info");
            showhide.find('span img').attr("src", "assets/img/arrow_up.gif");
            showhide.find('p').hide('slow');
        }else{
            showhide.find('span b').html("hide");
            showhide.find('span img').attr("src", "assets/img/arrow_down.gif");
            showhide.find('p').show('slow');
        };
    });
    var showcase_items = $('.sc_main li a');
 
    showcase_items.click(function(){
        
        var new_bg = $(this).css("background-image");
        
        var new_content = $(this).parent().parent().html();
        var new_content_h3 = $(new_content).find('a').html();
        var new_content_p = $(new_content).parent().find('p').html();
        var cssObj = {"background-image": new_bg};
        
        $('.focus_image').css(cssObj);
        $('.focus-item .item_content').html("<h3>" + new_content_h3 + "</h3><p>" + new_content_p + "</p>");
        addShowHide();
        return false;
    });
});