var right_arrow;
var left_arrow;
var container;
var slider;
var con;
var divs;
	
function showImage(idx)
{
    var img = $("#central_image");
    img.attr('src', images[idx].central);
    var a = img.parent('a').get(0);
    $(a).attr('href', images[idx].big);
    $(a).attr('title', images[idx].desc);
}

function initializePage()
{
    container = $("#ImageContainer");

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

        var img = "";
        img += "<img src='"+(images[i].img)+"' style='margin-left: 2px; float: left; border-top: 2px solid #FFF; border-bottom: 2px solid #FFF; border-left: 1px solid #FFF; border-right: 1px solid #FFF;cursor: pointer;' onclick='showImage("+i+")'>"; 

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

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

    divs = $('div', container);
}

function moveLeft()
{
    removeHandlers();

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

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

function moveRight()
{
    removeHandlers();

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

    last.animate({
        width: '97'
    }, 300, 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()) < 97)
            {
                var last = first;
            }
            else
            {
                var last = $('div:last', container);
                last.css('width', 0);
                container.prepend(last);
            }

            last.animate({
                width: '97'
            }, 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', 97);
                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();
}