var QuickCompare = Class.create({
    initialize: function(modelOverlay, compareLink, compareModal) {
        this.modalOverlay = modelOverlay ? modelOverlay : 'modal-overlay';
        this.compareLink = compareLink ? compareLink : 'quick-compare-link';
        this.compareModal = compareModal ? compareModal : 'modal-quick-compare';
        this.offSetFix = Prototype.Browser.Webkit ? -350 : -250;

        $(this.compareLink).observe('click', this.clickHandler.bindAsEventListener(this));
    },

    clickHandler: function(e) {
        e.stop();
        var el = e.element();
        this.createModalOverlay();
        var modalContent = $(this.compareModal).remove();
        var position = $(this.compareLink).cumulativeOffset();
        var fromTop = position.top - 250;
        modalContent.setStyle({top: fromTop + 'px', left: '145px', zIndex: 1000});
        $(this.modalOverlay).insert({after: modalContent});
        new Effect.Appear(this.modalOverlay, { duration: 0.4, from: 0.0, to: 0.8 });
        new Effect.Appear(this.compareModal, { duration: 0.4, from: 0.0, to: 1.0 });
        this.addModalEvents();
        this.throwAsis(el.rel);
    },

    addModalEvents: function() {
        $(this.compareModal).observe('click', function(e) {
            var el = e.element();
            e.stop();
            if (el.hasClassName('close')) {
                this.removeModal(this.compareModal);
            }
            if (el.hasClassName('qcLinkAsis')) {
                var url = '';
                if (el.tagName.toLowerCase() == 'img') {
                    url = el.up('a').rel;
                    this.currentLink = el.up('a').href;
                } else {
                    url = el.rel;
                    this.currentLink = el.href;
                }
                this.throwAsis(url);
                setTimeout(function() {
                    quickCompare.goToCurrentLink()
                }, 1000);
            }
            if (el.hasClassName('qcSpecialsAsis')) {
                this.throwAsis(el.rel);
                openInNewWindow(el.href);
            }

        }.bindAsEventListener(this));
    },

    createModalOverlay: function() {
        // The document.body cannot be used here to get the height, existing
        // code elsewhere in the VDP is breaking it so that it is unusable with IE
        // This is hack, but I must manually get height as best as possible and insert
        // the element in an unusual location
//        var dimsLbheader = $('leaderboardContainer').getDimensions();
//        var dimsAtheader = $('autotrader-header').getDimensions();
//        var heightHcheader = 40;
//        var dimsContent = $('content').getDimensions();
//        var dimsFootcrumb = $('ifid13').getDimensions();
//        var heightFooter = 74;
//        var dims = dimsLbheader.height + dimsAtheader.height + heightHcheader + dimsContent.height + dimsFootcrumb.height + heightFooter;
        var ht = $(document.body).getDimensions().height;
        var overlay = new Element('div', {id: this.modalOverlay}).setOpacity(0.0).setStyle({height: ht + "px"});
        $('leaderboardContainer').insert({before: overlay});
    },

    removeModal: function(modalId) {
        new Effect.Fade(this.modalOverlay, {duration: 0.4, from: 0.8, to: 0.0});
        new Effect.Fade(modalId, {duration: 0.4, from: 1.0, to: 0.0});
        $(modalId).stopObserving('click');
        if ($(this.modalOverlay)) {
            $(this.modalOverlay).remove();
        }
    },

    goToCurrentLink: function() {
        window.location = this.currentLink;
    },

    throwAsis: function(url) {
        if (!url) {
            return;
        }
        var delim = (url.indexOf('?') != -1) ? '&' : '?';
        var cacheKill = 'cache_kill=' + new Date().getTime();
        url = encodeURI(url);
        url += delim;
        url += cacheKill;
        var img = new Image();
        img.src = url;
    }

});