$(document).ready(function() {
    
    sFirstPic = $('#productList li:first a').attr('href');
    if(sFirstPic) {
        $('#productDetail').removeClass('productEmpty').append('<img src="'+sFirstPic+'" alt="" />');
        $('#productList li:first a').addClass('active');
        $('#stepForward, #stepBack').css('opacity', 0.5);
    }
    
    $('#productDetail').hover(function() {
        
        $('#stepForward, #stepBack').animate({'opacity': 1}, 350);
        
    }, function() {
        
        $('#stepForward, #stepBack').animate({'opacity': 0.5}, 350);
        
    });
    
    $('#productList li a').click(function() {
        
        changePicture(this);
        
        return false;
    });
    
    $('#stepBack').click(function() {
        
        triggerBack();
       
        return false; 
    });
    
    $('#stepForward').click(function() {
        
        triggerNext();
       
        return false; 
    });
    
    $(document).keydown(function(event) {
        
        if (event.keyCode == '37') {
            triggerBack();
        }
        else if(event.keyCode == '39') {
            triggerNext();
        }
        
    });

    
});

function triggerBack() {
    
    oNext = $('#productList li a.active').parent().prev('li').children();
    
    if( ! oNext.length) {
        oNext = $('#productList li a:last');
    }
    
    changePicture(oNext);
    
}

function triggerNext() {
    
    oNext = $('#productList li a.active').parent().next('li').children();
    
    if( ! oNext.length) {
        oNext = $('#productList li a:first');
    }
        
    changePicture(oNext);
    
}


function changePicture(oSourceObj) {
    
    sPicUrl = $(oSourceObj).attr('href');
    
    $('#productDetail img').attr('src',sPicUrl);
     
    $('#productList li a').removeClass('active');
    $(oSourceObj).addClass('active');
 
    
}