var idCount;
var vehIds;

function encode(input) {
    return $('<div/>').text(input).html();
}

function decode(input) {
    return $('<div/>').html(input).text();
}

function updateVehIdSession() {
    idCount = 0;
    vehIds = '';

    $('.vehId').each(function () {
        if (idCount > 0) {
            vehIds += "," + $(this).val();
        } else {
            vehIds += $(this).val();
        }
        idCount++;
    });

    var listHMTL = encode($('#compare-list-items').html());

    $('#vehId').val(vehIds);
    $('#txtComparrisonHTML').val(listHMTL);

    $.post('/compare-session.aspx', $('#compare-details').serialize());
}

function checkOverflow() {
    var scrollWrapperWidth = $('.scrollWrapper').outerWidth();
    var scrollAreaWidth = $('.scrollableArea').outerWidth();
    var compareItemWidth = 0;

    $('.compare-item').each(function () {
        compareItemWidth += ($(this).outerWidth() + 10);
    });

    $('.scrolling .scrollableArea').css({ width: compareItemWidth });

    if (compareItemWidth < scrollAreaWidth) {
        $('.scrolling .scrollWrapper').scrollLeft(0);
        $('.scrolling .scrollingHotSpotLeft, .scrolling .scrollingHotSpotRight').hide();
    }

    if (compareItemWidth > scrollWrapperWidth) {
        $("div#compare-list-wrapper").not('.scrolling').addClass('scrolling').smoothDivScroll({ mouseDownSpeedBooster: 2, scrollingSpeed: 7, visibleHotSpots: "always" });
        $('.scrolling .scrollingHotSpotRight').show();
    } else {
        $('.scrolling .scrollWrapper').scrollLeft(0);
        $('.scrolling .scrollingHotSpotLeft, .scrolling .scrollingHotSpotRight').hide();
    }
}

$(function () {

    var selVehIds = $('#vehId').val();
    if (selVehIds != "") {
        vehIds = selVehIds.split(',');

        var x;
        for (x in vehIds) {
            $('a#vehicle' + vehIds[x]).addClass('selected-vehicle');
        }

        var compareHTML = decode($('#compareHTML').html());


        $('#compare-wrapper').show();
        $('body').addClass('toolbar');
        $('#compare-list-items').append(compareHTML);

        if ($('#compare-list-items .compare-item').size() > 1) {
            $('#compare-btn').removeClass('disabled');
        }

        checkOverflow();
    }

    $('a.add-vehicle').click(function (e) {
        var vehDetail = $(this).attr('rel');
        vehDetail = vehDetail.split(','); // vehDetail[0] = vehicle ID, vehDetail[1] = vehicle name, vehDetail[2] = vehicle subtitle

        $('#compare-wrapper').show();
        $('body').addClass('toolbar');

        if ($(this).is('.selected-vehicle')) {
            $('.vehicle' + vehDetail[0]).slideUp(100, function () {
                $(this).remove();
                updateVehIdSession();
                checkOverflow();
            });

            if ($('#compare-list-items .compare-item').size() == 2) {
                setTimeout("$('#compare-btn').addClass('disabled')", 100);
            }
            if ($('#compare-list-items .compare-item').size() == 1) {
                setTimeout("$('#compare-wrapper').hide(); $('body').removeClass('toolbar');", 100);
            }

            $(this).removeClass('selected-vehicle');
            return false;
        } else {
            if ($('#compare-list-items .compare-item').size() == 1) {
                $('#compare-btn').removeClass('disabled');
            }
        }

        var string = "<div class='compare-item vehicle" + vehDetail[0] + " new-compare-item'><div class='compare-item-inner'>";
        string += "<a href='#' class='remove-item' rel='" + vehDetail[0] + "' title='Remove this vehicle from the list'>remove</a>";
        string += "<img src='/graphics/compare/thumb-" + vehDetail[0] + ".png' class='compare-item-img' /><div class='compare-item-details'><div class='vehicle-name'>";
        string += vehDetail[1];
        string += "</div>";
        if (vehDetail[2]) {
            string += "<div class='vehicle-subtitle'>" + vehDetail[2] + "</div>";
        }
        string += "<input type='hidden' name='compare-id' class='vehId' value='" + vehDetail[0] + "' />";
        string += "<div class='clear'></div></div></div>";

        $('#compare-list-items').append(string);

        $('.new-compare-item').animate({ backgroundColor: 'white' }, { duration: 200, complete: function () {
            $(this).removeClass('new-compare-item').removeAttr('style');
            updateVehIdSession();
            checkOverflow();
        }
        })

        $(this).addClass('selected-vehicle');

        return false;
    });

    $('a.remove-item').live('click', function (e) {
        var vehId = $(this).attr('rel');
        $('#vehicle' + vehId).removeClass('selected-vehicle');

        $(this).parents('.compare-item').slideUp(100, function () {
            $(this).remove();
            updateVehIdSession();
            checkOverflow();
        });

        if ($('#compare-list-items .compare-item').size() == 2) {
            setTimeout("$('#compare-btn').addClass('disabled')", 100);
        }
        if ($('#compare-list-items .compare-item').size() == 1) {
            setTimeout("$('#compare-wrapper').hide(); $('body').removeClass('toolbar');", 100);
        }

        e.preventDefault();
    });

    $('#compare-btn').click(function () {
        if ($(this).is('.disabled')) {
            alert("Please select more than one vehicle to compare");
            return false;
        }

        var count = 0;
        var idString = '';
        var langId = 1;
        if ($(this).attr('rel') > 1) {
            langId = $(this).attr('rel');
        }

        $('.vehId').each(function () {
            if (count > 0) {
                idString += "&v=" + $(this).val();
            } else {
                idString += "v=" + $(this).val();
            }
            count++;
        });

        var colWidth = ($('#compare-list-items .compare-item').size() * 322) + (($('#compare-list-items .compare-item').size() - 1) * 10) + 70;

        var width = $(window).width() - 20;
        var height = $(window).height() - 100;

        if (colWidth < width) {
            width = colWidth;
        }

        $.colorbox({
            href: "/compare-vehicles.aspx?" + idString + "&l=" + langId,
            iframe: true,
            title: "Compare Vehicles",
            height: height,
            innerWidth: width
        });
    });
});