var myTimer = null;
var length = null;
var currentIndex = null;
jQuery(document).ready(
    function() {
        var index = 1;
        var mainHighlightImage = $(".mainHighlightImage");
        var mainHighlightTitle = $(".mainHighlightTitle");
        var mainHighlightAbstract = $(".mainHighlightAbstract");
        var mainHighlightLink = $(".mainHighlightLink");
       
        // get length of the thumbnail images for highlight section.
        length = $("#ulImg").children('li').length;
        // set a current random index.
        currentIndex = Math.floor(Math.random()* length); 
        
        // start timer
        myTimer = window.setInterval(function(){
            SwitchImage();
        }, 8000);
        
        $(".thumbnail").click(
        function() {
            //add 'active' class to clicked thumbnail
            $(".thumbnail").removeClass('active');
            var thumbnailLink = $(this);
            thumbnailLink.addClass('active');

            //get index of clicked thumbnail
            index = $(".thumbnail").index($(this));

            //display appropriate big image
            //first image is always displayed, so need to start with index+1
            mainHighlightImage.hide();
            mainHighlightImage.eq(index + 1).show();

            //title
            var highlightTitle = $(".hTitles").eq(index).val();
            mainHighlightTitle.html(highlightTitle);

            //abstract
            var highlightAbstract = $(".hAbstracts").eq(index).val();
            mainHighlightAbstract.html(highlightAbstract);

            //link
            var highlightLink = $(".hLinks").eq(index).val();
            mainHighlightLink.attr("href", highlightLink);
            if(highlightLink == '' || highlightLink == 'undefined' ) 
            {
                $(".readmore").hide();
            } 
            else
            {
                $(".readmore").show();
            }
            
        });
        
        // pause/play on mouseover/mouseout
        $("#homepic").hover(function(){
            clearInterval(myTimer);
        },
        function(){
            myTimer = window.setInterval(function(){
            SwitchImage();
        }, 8000);
            
        });
        
        function SwitchImage(){
            // remove previous active class
            $("#ulImg").children('li > a').eq(currentIndex).removeClass('active');
            
            if(currentIndex != length -1){
                currentIndex = currentIndex + 1;
            }
            else{
                currentIndex = currentIndex - (length -1);
            }
            //set current images's active class
            $("#ulImg").children('li > a').eq(currentIndex).addClass('active');

            //display appropriate big image
            //first image is always displayed, so need to start with index+1
            mainHighlightImage.hide();
            mainHighlightImage.eq(currentIndex + 1).show();

            //title
            var highlightTitle = $(".hTitles").eq(currentIndex).val();
            mainHighlightTitle.html(highlightTitle);

            //abstract
            var highlightAbstract = $(".hAbstracts").eq(currentIndex).val();
            mainHighlightAbstract.html(highlightAbstract);

            //link
            var highlightLink = $(".hLinks").eq(currentIndex).val();
            mainHighlightLink.attr("href", highlightLink);
            if(highlightLink == '' || highlightLink == 'undefined' ) 
            {
                $(".readmore").hide();
            } 
            else
            {
                $(".readmore").show();
            }
        };
        
    });