var DOM_CACHE = {};
function popup(url)
// Popup window for legal pages.
{
    window.open(url, '_blank', 'height=400,width=600,dialog=yes,toolbar=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no');
    return false;
}

function set_selected(id, legal, wrap, name)
// The gallery.html frame will call this if a car is selected via a straight html A-link.
// It sets the drop down to the given vehicle.
{
    $('#id_vehicle').val(id);
    $('#legal').empty();
    $('#legal').append($("<div>" + legal + "</div>"));
    $('#gallery_proxy').empty().append(wrap);
    $('#header .name').empty().append(name);
}

function select_vehicle(id)
{
    if (id == 'select_model')
        return;

    if (id)
    {
        //how can i cache this?
        $("#id_vehicle").val(id);
        var data = DOM_CACHE[id];
        if( data ) {
            $("#gallery_proxy").empty().append(data["view-target"]);
            $("#legal").empty().append(data["legal"]);
        }
        else {
            $.ajax({
                url: $("#urltarget-" + id).attr('href') + "&snippet=True",
                success: function(resp) {
                    var data = {};
                    var dom = $(resp);
                    data["view-target"] = dom.find("#view-target");
                    data["legal"] = dom.find("#legal").html();

                    $("#gallery_proxy").empty().append(data["view-target"]);
                    $("#legal").empty().append(data["legal"]);

                    DOM_CACHE[id] = data;
                }
            });
        }
        /*
        $("#gallery_proxy").load(
                url: $("#urltarget-" + id).attr('href') + "?snippet=True #view-target"
        );
        */
        return;
    }
}

function show_changes(data) {
}

$(function()
// Onload
{
    $('#id_vehicle').bind('change', function() { select_vehicle($(this).val()); });
    $('.gallery .pick a').bind('click', function() { 
        var href = $(this).attr('href');
        select_vehicle(href.substr(href.lastIndexOf('.') + 1)); 
        $(this).attr('href', '#');
        return false;
    });
    $('#entry form').bind('submit', function()
    {
        $('#entry .btnThrobber').show();
        $('#entry .btnPrice').hide();
        return true;
    });
});


function Scroller()
// Scrolling box of mobiles at the bottom of the screen.
{
    var self = $(this);
    var left = $("<img src='/static/ets/leftarrow.gif' class='left arrow'/>");
    var right =  $("<img src='/static/ets/rightarrow.gif' class='right arrow'/>");
    var ul = self.find('ul');
    var items = self.find('li').each(function(i) { this._index = i });
    var num = items.length;
    var position = 0;
    var NUM_SHOWN = 6
    var TILE_WIDTH = 116;
    
    self.prepend(left);
    self.append(right);
    
    self.find('li').each(function(index)
    {
        var li = $(this);
        li.css('cursor', 'pointer');
        li.find('a').andSelf().click( function() {
            select_vehicle(li.attr('value'));
            return false;
        });
    });
    
    function disable(which)
    {
        which.fadeTo('fast', .2);
        which.css('cursor', 'default');
    }
    
    function enable(which)
    {
        which.fadeTo('fast', 1);
        which.css('cursor', 'pointer');
    }
    
    function select(which)
    {
        item = $(which)[0];
        
    }
    
    function refresh()
    {
        ul.stop();
        ul.animate({ 
            left: -5 - position * TILE_WIDTH
          }, 400 );
          
        if (position + NUM_SHOWN  >= num)
            disable(right);
        else
            enable(right);
        if (position <= 0)
            disable(left);
        else
            enable(left);
    }
    
    var scrolling = 0;
    
    function scroll()
    {
        if (scrolling == 0) return;
        position += scrolling;
        if (position + NUM_SHOWN  > num)
            return position = num - NUM_SHOWN;
        if (position < 0)
            return position = 0;
        refresh();
        setTimeout(scroll, 100);
    }
    
    right.mousedown(function()
    { scrolling = 1;  scroll()});
    right.mouseup(function()
    {scrolling = 0 });
    right.mouseout(function()
    {scrolling = 0 });
    
    left.mousedown(function()
    { scrolling = -1;  scroll()});
    
    left.mouseup(function()
    { scrolling = 0 });
    
    var ghost = null;
    
    items.hover(
        function()
        {
            $(this).find('.info').fadeIn();
        },
        function()
        {
            $(this).find('.info').fadeOut('fast');
        }
    );
    
    disable(left);
		if (num <= NUM_SHOWN)
				disable(right);
}

$( function()
{
    $('.scroller').each(Scroller);
});