var right_arrow;
var left_arrow;
var container;
var slider;
var con;
var divs;
	
function initializePage()
{
    container = $("#ImageContainer");

    for (i=0; i<images.length; i++)
    {
        var el = document.createElement("div");
        el = $(el);
        el.css('float', 'left');

        var img = "";
        for (j = 0; j < images[i].length; j++)
        {
            img += "<a href='"+images[i][j].href+"' title='' style='border: none;'><img src='"+images[i][j].img+"' style='float: left; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; border-left: 1px solid #FFF; border-right: 1px solid #FFF;'></a>";
        }

        el.html(img);
        container.append(el);
        
    }

    right_arrow = $('#right_arrow');
    right_arrow.bind('click', moveRight);
    left_arrow = $('#left_arrow');
    left_arrow.bind('click', moveLeft);

    con = $('#header_img');
    con.bind('mouseover', slide);
    divs = $('div', container);
}

function moveLeft()
{
    removeHandlers();

    var first = $('div:first', container);

    first.animate({
        width: '0'
    }, 1500, undefined, function(){
        container.append(first);
        first.css('width', 650);
        attachHandlers();
    });
}

function moveRight()
{
    removeHandlers();

    var first = $('div:first', container);
    if (parseInt(first.css('width')) < 650)
    {
        var last = first;
    }
    else
    {
        var last = $('div:last', container);
        last.css('width', 0);
        container.prepend(last);
    }

    last.animate({
        width: '650'
    }, 1500, undefined, function(){
        attachHandlers();
    });
}

function removeHandlers()
{
    divs.stop();
}

function attachHandlers()
{
    
}

function slide(e)
{
    removeHandlers();

    // Right
    if (con.offset().left + con.width()/2 <= e.pageX)
    {
        var repeat = function() {
            var first = $('div:first', container);
            if (parseInt(first.width()) < 650)
            {
                var last = first;
            }
            else
            {
                var last = $('div:last', container);
                last.css('width', 0);
                container.prepend(last);
            }

            last.animate({
                width: '650'
            }, 1500, undefined, repeat); 

        };

        con.bind('mouseout', cleanSlide);

        repeat();
    }
    // Left
    else
    {
        var repeat = function() {
            var first = $('div:first', container);
            if (parseInt(first.width()) <= 0)
            {
                container.append(first);
                first.css('width', 650);
                first = $('div:first', container);
            }

            first.animate({
                width: 0
            }, 1500, undefined, repeat); 

        };

        con.bind('mouseout', cleanSlide);

        repeat();
    }
}

function cleanSlide()
{
    $('div', container).stop();
    
    con.unbind('mouseout', cleanSlide);
    attachHandlers();
}