$(document).ready(function() {

   //Variables to manage feature state
   var $curImage = 0;
   var $expanded = false;
   var $transitioning = false;
   var $imageCount = $("#image-list li").length;
   var $autoticktimer = 0;
   var $focusing = false;
   var $delay = 20000;

   function transitionToNextImage()
   {
        if ($transitioning == false)
        {
            $iID = 0;
            if ($curImage < $imageCount - 1)
            {
                $iID = $curImage + 1;
            }

            prepTransitionContent($iID);

        }
   }

   function prepTransitionContent($iID)
   {
        //Get next background image filename
        $isrc = $(".image-item-"+$curImage+" .image img").attr("src");
        $imageOffset = $(".image-area-main").offset();

        $nisrc = $(".image-item-"+$iID+" .image img").attr("src");

        //Begin
        $transitioning = true;

        //Prep temp transition content area.
        $("#image-transition").css( {
                                        "top": $imageOffset.top +"px",
                                        "background-image": 'url('+$isrc+')'});
        $("#image-transition").show();

        $(".image-area-main").css({"background-image": 'url('+$nisrc+')'});


        $("#image-transition").fadeOut(400, function(){

            //On completion, move content into main area

            $curImage = $iID;

            $transitioning = false;

        });
   }

   function autoTransitionToNext()
   {
       if ($expanded == false)
       {
           if ($autoticktimer >= $delay)
           {
               $autoticktimer = 0;
               transitionToNextImage();
           }
           else
           {
               $autoticktimer = $autoticktimer + 400;
           }
       }
   }

   interval = setInterval(autoTransitionToNext, 400);
});