var cache = [];
var soapTemplate = '<s:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:s="http://schemas.xmlsoap.org/soap/envelope/"><s:Body><[FunctionName] xmlns="http://tempuri.org/">[Parameters]</[FunctionName]></s:Body></s:Envelope>';

$(document).ready(function () {
    // navigation
    $('ul#nav li').click(function () {
        var li = this;
        $('#nav li.selected').removeClass('selected');
        $(this).addClass('selected');
        LoadPartial($(li).attr('data-href'), $(li).attr('data-width'), $(li).attr('data-tag'));
    });

    $('ul#nav li:first').click();

    // vehicle row, click takes you to detail
    $('ul.VehicleList li').live('click', function () {
        $('ul#nav li').removeClass('selected');
        LoadPartial('Partial_Vehicle.aspx?VehicleID=' + $(this).attr('id'), '800px', '');
    });

    $('#VPopup').live('click', function () {
        $('#VPopup').remove();
        $('ul#nav li').removeClass('selected');
        LoadPartial('Partial_Vehicle.aspx?VehicleID=' + $(this).attr('data-id'), '800px', '');
    });

    $('ul.VehicleFeature li').live('click', VehiclePopup);

    $('#ImageDiv>img').live('click', function () {
        $('#ImageDiv>div').empty();
        $('#ImageDiv>div')
            .append($('<img></img>').attr('src', $(this).attr('src')));
        $('#ImageDiv>img').removeClass('selected');
        $(this).addClass('selected');
    });

    $('#RatingLink').live('click', RatingLinkClick);

    CheckForUpdates();
});

function CacheExists(url) {
    for (var i = 0; i < cache.length; i++) {
        if (cache[i].url == url) {
            return true;
        }
    }
    return false;
};

function LoadPartial(url, width, tag) {
    $('#VPopup').remove();
    $('#feature-panel').fadeOut(function () {
        $('#feature-panel').empty();
        var cache = GetCachedPage(url);
        if (cache == null) {
            ShowLoadingImg();
            $.get(url, function (data) {
                CachePage(url, data);
                HideLoadingImg(function () {
                    $('#feature-panel')
                        .append($(data))
                        .css('width', width)
                        .fadeIn();
                    if (tag == 'feature') {
                        $('#feature-panel>ul').removeClass('VehicleList');
                        $('#feature-panel>ul').addClass('VehicleFeature');
                    }
                })
            });
        } else {
            $('#feature-panel')
                .append($(cache.data))
                .css('width', width)
                .fadeIn();
            if (tag == 'feature') {
                $('#feature-panel>ul').removeClass('VehicleList');
                $('#feature-panel>ul').addClass('VehicleFeature');
            }
        }
    });
};

function GetCachedPage(url) {
    for (var i = 0; i < cache.length; i++) {
        if (cache[i].url == url) {
            return cache[i];
        }
    }
    return null;
};

function CachePage(url, data) {
    cache.push({url: url, data: data});
};

function ShowLoadingImg() {
    $('#LoadingImg:hidden')
        .css({
            position:'absolute',
            left: ($(document).width() / 2) - ($('#LoadingImg').width() / 2) + 'px',
            top: ($(document).height() / 2) - ($('#LoadingImg').height() / 2) + 'px'
        })
        .fadeIn();
};

function HideLoadingImg(func) {
    $('#LoadingImg').fadeOut(func);
};

function AutobaseList() {
    soap({ url: 'AutobaseService.asmx',
        functionName: 'GetStockIDList',
        parameters: [],
        success: succ
    })
};

function CheckForUpdates() {
    $('#Updates').text('...');
    soap({url:'AutobaseService.asmx',
        functionName: 'CheckForUpdates',
        parameters: [],
        success: succ
        });
};

function soap(options) {
    var d = soapTemplate.replace(/\[FunctionName\]/g, options.functionName).replace(/\[Parameters\]/g, parseSoapParams(options));
    $.ajax({
        url: options.url,
        type: 'POST',
        data: d,
        success: options.success,
        error: options.error,
        contentType: 'text/xml'
    });
};
function parseSoapParams(options) {
    var parmTemplate = '<[Name]>[Value]</[Name]>'
    var parms = '';
    for (var i = 0; i < options.parameters.length; i++) {
        var p = options.parameters[i];
        parms += parmTemplate.replace(/\[Name\]/g, p.Name).replace(/\[Value\]/g, p.Value);
    }
    return parms;
};

function succ(data) {
    if ($(data).find('CheckForUpdatesResult').text() == 'false') {
        // no updates available
        $('#Updates').text('.');
    } else {
        // updates available, remove list cache
        $('#Updates').text('');
        var c = GetCachedPage('Partial_VehicleList.aspx');
        if (c!=null) {
            cache.pop(c);
        }
    }
}

function VehiclePopup() {
    var clone = $(this).find('>div').clone();
    var left = $(this).offset().left - 100;
    var top = $(this).offset().top - 100;
    var bottom = ($(window).height() + $(window).scrollTop()) - 5;
    if (top < 5) { top = 5; }
    if (left < 5) { left = 5; }
    
    var content = $('<div></div>')
        .attr('id', 'VPopup')
        .attr('data-id', $(this).attr('id'))
        .css({
            left: left + 'px',
            top: top + 'px'
        })
        .append(clone);
    $('#VPopup').remove();
    $('body').append(content);
    if ((top + $('#VPopup').height()) > bottom) { $('#VPopup').css('top', (bottom - $('#VPopup').height()) + 'px') }
    if ((left + $('#VPopup').height()) > $(window).width()) { $('#VPopup').css('left', ($(window).width() - $('#VPopup').width() - 5) + 'px') }

    $('#VPopup').fadeIn();
};

function RatingLinkClick() {
    $('#feature-panel').prepend(
        $('<div />').addClass('fullopaque')
    );
    $('#feature-panel').prepend(
            $('<div />').addClass('starRating').css({ background: 'url(' + $(this).attr('href') + ') no-repeat' })
                .append($('<div />').addClass('ratingcost').text($(this).attr('data-cost')))
                .append($('<div />').addClass('ratingmake').text($(this).attr('data-make')))
                .append($('<div />').addClass('ratingmodel').text($(this).attr('data-model')))
    );
    $('div.fullopaque, div.starRating').click(function () { $('div.fullopaque, div.starRating').remove(); });
    // don't follow link
    return false;
};