/***************************************
   =IMAGE CAROUSEL
-------------------------------------- */

$(document).ready(function() {
    var spacing = 800;
    var interval1 = 30000;   // initial pause before slideshow starts
    var interval2 = 10000;   // pause between slides
    var interval3 = 1000;   // pause after restart

    $('a#projinfolink').click(function()
        {
            hidePopUps();   // hide any pop-ups that are already being displayed
            clearTimeout(rotateTimeout);    // stop slideshow to give user time to read this pop-up
            $('a#startslideshow').show();
            $('a#stopslideshow').hide();
            $('#infobox').show();
            return false;
        });
    $('a.closeprojinfo').click(function()
        {
            $('#infobox').hide();
            return false;
        });
    $('a#profilelink').click(function()
        {
            hidePopUps();   // hide any pop-ups that are already being displayed
            clearTimeout(rotateTimeout);    // stop slideshow to give user time to read this pop-up
            $('a#startslideshow').show();
            $('a#stopslideshow').hide();
            $('#profile').show();
            return false;
        });
    $('a.closeprofile').click(function()
        {
            $('#profile').hide();
            return false;
        });
    $('a#projlistlink').click(function()
        {
            hidePopUps();   // hide any pop-ups that are already being displayed
            clearTimeout(rotateTimeout);    // stop slideshow to give user time to read this pop-up
            $('a#startslideshow').show();
            $('a#stopslideshow').hide();
            $('#projectlist').show();
            return false;
        });
    $('a.closeprojlist').click(function()
        {
            $('#projectlist').hide();
            return false;
        });
    $('a#contactlink').click(function()
        {
            hidePopUps();   // hide any pop-ups that are already being displayed
            clearTimeout(rotateTimeout);    // stop slideshow to give user time to read this pop-up
            $('a#startslideshow').show();
            $('a#stopslideshow').hide();
            $('#contact').show();
            return false;
        });
    $('a.closecontact').click(function()
        {
            $('#contact').hide();
            return false;
        });

    $('a.plink').click(function(event)
        {
            var linkid = parseInt($(this).attr('id'));
            //alert('project ' + linkid + ' clicked');

            var slides = $('#projects .slides a');
            var end = $(slides).length;
            for (var i=0; i < end; i++)
            {
                var slides = $('#projects .slides a');
                var infoboxes = $('#infobox ul li');
                var projid = parseInt($(slides[i]).attr('id'));
                //alert('project[' + i + '] has id ' + projid);
                if (projid == linkid)
                {
                    $(slides[i]).css('left', spacing * -0.85);
                    $(slides[i+1]).css('left', spacing * 0.15);
                    $(slides[end -1]).css('left', spacing * -1.85);
                    break;
                }
                else
                {
                    $(slides[i]).css('left', 9999).appendTo('#projects .slides');
                    $(infoboxes[i]).appendTo('#infobox ul');
                    i = -1;
                    continue;
                }
            }
            leftClick(event,true);
            event.preventDefault();
            
            return false;
        });

    $('a#startslideshow').click(function()
        {
            clearTimeout(rotateTimeout);
            rotateTimeout = setTimeout(rightClick,interval3);
            $(this).hide();
            $('a#stopslideshow').show();
            //event.preventDefault();
            return false;
        });
    $('a#stopslideshow').click(function()
        {
            hidePopUps();   // hide any pop-ups that are already being displayed
            clearTimeout(rotateTimeout);    // stop slideshow to give user time to read this pop-up
            $(this).hide();
            $('a#startslideshow').show();
            return false;
        });

    $('a#introlink').click(function()
        {
            hidePopUps();   // hide any pop-ups that are already being displayed
            clearTimeout(rotateTimeout);    // stop slideshow to give user time to read this pop-up
            $('a#startslideshow').show();
            $('a#stopslideshow').hide();
            $('#intro').show();
            return false;
        });
    $('a.closeintro').click(function()
        {
            $('#intro').hide();
            return false;
        });
    $('a#tumblrlink').click(function()
        {
            hidePopUps();   // hide any pop-ups that are already being displayed
            clearTimeout(rotateTimeout);    // stop slideshow to give user time to read this pop-up
            $('a#startslideshow').show();
            $('a#stopslideshow').hide();
            $('#tumblr').show();
            return false;
        });
    $('a.closetumblr').click(function()
        {
            $('#tumblr').hide();
            return false;
        });



    $('#projects').css({
      'width': 1040,
      'height': '600px',
      'overflow': 'hidden'
    }).find('.slides a').css({
      'float': 'none',
      'position': 'absolute',
      'left': 9999
    });

    $('#panel').show();

    var stopSlideshow = false;

    /************* SCROLL LEFT *************/
    
    var leftClick = function (event,stopSlideshow)
    {
        var infoboxes = $('#infobox ul li');
        var last = $(infoboxes).length - 1;
        $(infoboxes[last]).prependTo('#infobox ul');
        $(infoboxes[0]).removeClass('hideus');
        $(infoboxes[0]).show();
        for (var i=1; i < $(infoboxes).length; i++)
        {
                $(infoboxes[i]).addClass('hideus');
        }

        hidePopUps();

        var $slides = $('#projects .slides a');

        $slides.eq(2).css('left', 9999);

        $slides.eq(0).animate({'left': spacing * 0.15}, 'slow');
        $slides.eq(1).animate({'left': spacing * 1.15}, 'slow');
        $slides.eq(2).animate({'left': spacing * 2.15}, 'slow');
        $slides.eq($slides.length - 1).css('left', spacing * -1.85).animate({'left': spacing * -0.85}, 'slow', function()
        {
            $(this).prependTo('#projects .slides');
            setUpSlides();
            if (stopSlideshow)
            {
                clearTimeout(rotateTimeout);
                $('a#startslideshow').show();
                $('a#stopslideshow').hide();
            }
            else
            {
                rotateTimeout = setTimeout(rightClick,interval2);
            }
        });

    };

    /************* SCROLL RIGHT *************/

    var rightClick = function (event,stopSlideshow)
    {
        var infoboxes = $('#infobox ul li');
        $(infoboxes[0]).appendTo('#infobox ul');
        $(infoboxes[2]).removeClass('hideus');
        $(infoboxes[2]).show();
        for (var i=0; i < infoboxes.length; i++)
        {
            if (i!=2)
            {
                $(infoboxes[i]).addClass('hideus');
            }
        }
        
        hidePopUps();
        
        var $slides = $('#projects .slides a');

        $slides.eq(0).animate({'left': spacing * -1.85}, 'slow', function()
        {
            $(this).appendTo('#projects .slides');
            setUpSlides();
        });
        
        $slides.eq(1).animate({'left': spacing * -0.85}, 'slow');
        $slides.eq(2).animate({'left': spacing * 0.15}, 'slow');
        $slides.eq(3).css('left', spacing * 2.15).animate({'left': spacing * 1.15}, 'slow', function()
        {
            if (stopSlideshow)
            {
                clearTimeout(rotateTimeout);
                $('a#startslideshow').show();
                $('a#stopslideshow').hide();
            }
            else
            {
                rotateTimeout = setTimeout(rightClick,interval2);
            }
        });
    };

    var setUpSlides = function()
    {

        var $infoboxes = $('#infobox ul li');
        var projectName = $infoboxes.eq(1).children('h2').text();
        $('#panel a#projinfolink').html('<strong>'+projectName+'</strong>');

        var $slides = $('#projects .slides a');

        $slides.unbind('click');
        $('#left-panel-1 a').unbind('click');
        $('#right-panel-1 a').unbind('click');

        // Left image - scroll right (to view images on left) when clicked
        $slides.eq(0).css({'left': spacing * -0.85, 'opacity': 1.0}).click(function(event)
        {
            leftClick(event, true);
            event.preventDefault();
        });

        $('#left-panel-1 a').click(function(event)
        {
            //$slides.eq(0).click();
            leftClick(event, true);
            event.preventDefault();
        });

        // Right image - scroll left (to view images on right) when clicked
        $slides.eq(2).css({'left': spacing * 1.15, 'opacity': 1.0}).click( function(event)
        {
            rightClick(event,true);
            event.preventDefault();
        });

        $('#right-panel-1 a').click(function(event)
        {
            //$slides.eq(2).click();
            event.preventDefault();
            rightClick(event,true);
        });

        // Centre image
        $slides.eq(1).css({'left': spacing * 0.15, 'opacity': 1.0});

    };

    var hidePopUps = function()
    {
        //$('#intro').hide();
        $('#tumblr').hide();
        $('#infobox').hide();
        $('#profile').hide();
        $('#projectlist').hide();
        $('#contact').hide();
        $('.hideus').hide();
    }

    var projectList = function()
    {
        var list = '<h2>Projects</h2>';
        var infoboxes = $('#infobox ul li');
        for (var i=0; i < infoboxes.length; i++)
        {
            list = list + '<p><a class="plink" id="' + i + '" href="#">' + $(infoboxes[i]).children('h2').text() + '</a></p>';
        }
        list = list + '<div id="close"><a class="closeprojlist" href="#">close</a></div>';
        $('#projectlist').html(list).show();
    }


    hidePopUps();
    setUpSlides();
    //$('#intro').show();
    $('#tumblr').show();
    $('a#stopslideshow').hide();
    //rotateTimeout = setTimeout(rightClick,interval1);
    var rotateTimeout = 0;


});