var currentImageIndex = 2;
var intervalId;

$(document).ready(function(){
    intervalId = setInterval(imgAutoPlay, 2000);
    $("#imgDisplay")[0].src = "images/" + $(".common").eq(0).attr("imgUrl");
    $(".common").eq(0).parent(".commonParent").css({"background":"url(images/current.jpg)"});
    
    $(".common").mouseover(function(e){
        clearInterval(intervalId);
        $("#imgDisplay")[0].src = "images/" + $(e.target).attr("imgUrl");
        $(".common").parent(".commonParent").css({"background":"url(images/common.jpg)"});
        $(e.target).parent(".commonParent").css({"background":"url(images/current.jpg)"});
        currentImageIndex = $(e.target).attr("id").replace("img", "") - 0;
    });
    
    $(".common").mouseout(function(){
        intervalId = setInterval(imgAutoPlay, 2000);
    });
    
    $("#imgDisplay").parent().mouseout(function(){
        intervalId = setInterval(imgAutoPlay, 2000);
    });
    
    $("#imgDisplay").parent().mouseover(function(){
        clearInterval(intervalId);
    });
    
    $("#imgDisplay").mouseover(function(){
        clearInterval(intervalId);
    });
});

function imgAutoPlay()
{
    $("#imgDisplay")[0].src = "images/" + $(".common").eq(currentImageIndex - 1).attr("imgUrl");
    setCurrentImageIndex();
}

function setCurrentImageIndex()
{
    $(".common").parent(".commonParent").css({"background":"url(images/common.jpg)"});
    $(".common").eq(currentImageIndex - 1).parent(".commonParent").css({"background":"url(images/current.jpg)"});
    currentImageIndex+=1;
    if(currentImageIndex>5)
    {
        currentImageIndex = 1;
    }
}