var currentActiveOption;
var carousalBoxID;
var currentMessageBoxID = 0;
$(document).ready(function() {

        moveCarousal('1','1', 'no'); //trigger first option by default on page load of carousal.
});


function moveCarousal(currentOption, carousalBoxID, click)
{ 
    var x = 1;  
    $('#curButtons li').each(function (i)
    {
        i = i+1;
        var currentClass = $(this).attr("class");
        if (currentClass == 'active')
        {
           currentActiveOption = i;
        }
    });       
    
    $("#option"+currentActiveOption).removeClass("active");
    $("#option"+carousalBoxID).addClass("active");

    if (click == 'yes')  // if click on any option then store id in temp vaiable.
    {
       var tempID = carousalBoxID;                
    }

    //show hide area
    $('#carousal_box_'+currentActiveOption).fadeOut('slow', function() {    
        if (carousalBoxID)
        {
            $("#carousal_box_"+carousalBoxID).fadeIn("slow");
        }
        else
        {
            $("#carousal_box_"+tempID).fadeIn("slow");
        }           
    });

    if (click == 'yes')
    {
        var tempCarousalBoxID = carousalBoxID;
        carousalBoxID = '';
        currentMessageBoxID = 0;
    }    
    
   if (carousalBoxID == '') // case of click
   {
       window.clearTimeout(timer);
       currentMessageBoxID = parseInt(tempCarousalBoxID);
        //call again
        y = parseInt(x) + currentMessageBoxID;

        if (y > 5)
            y = 1;
       
       timer = setTimeout('moveCarousal(\''+y+'\', \''+y+'\')', 5000);
   }
   else // default case autorotate
   {

       currentMessageBoxID = parseInt(carousalBoxID);
        y = parseInt(x) + currentMessageBoxID;

        if (y > 5)
            y = 1;

        timer = setTimeout('moveCarousal(\''+y+'\', \''+y+'\')', 5000);
   } 
}