﻿if (window.WL) {
    WL.registerOnloadEvent(function() {
    Modal.Setup('.sysReqs', '/MoreInfo/systemRequirements', { SuppressTrackView: true, ClassName: 'wlSysReqsModal', PageName: 'System Requirements' });
        $('.sendToMobile').each(function() {
            var $this = $(this),
                dlg = new Modal('/MoreInfo/sendToMobile?product=' + escape($this.attr('rel'))),
                product = $('#ProductID').val();
            dlg.ClassName = 'wlSendToMobileModal';
            dlg.PageName = 'Send To Mobile';
            if (product) dlg.PageName += ' - Mobile: ' + product;
            $this.click(function(e) {
                e.preventDefault();
                dlg.Caller = $(this);
                dlg.TrackVars = { '38' : (product ? product : 'Mobile') };
                (Modal.Requested = dlg).Show();
            });
        });
    });
}

// Modal class, use static Setup method to attach to an object's click event
function Modal(url, className) {
    if (!Modal.Dialog) {
        $('#wrapper').parent().append('<div id="modal"></div>');
        Modal.Dialog = $('#modal').jqm({
            trigger: false,
            modal: true,
            overlay: 75,
            onShow: function() { Modal.Requested.Show(); },
            onHide: function() { Modal.Requested.Hide(); },
            onLoad: function() { },
            closeClass: 'closeModal'
        });
    }
    this.Url = url;
    this.ClassName = className;
};
Modal.Requested = null; // The Modal object that wants to be shown
Modal.Dialog = null; // The base used to contain Modal objects
Modal.Cache = {}; // Cached content for Modal objects
this.Caller = null; // The element that invoked this modal (jQuery object)
this.Self = null; // The content of this modal (jQuery object)
this.Url = null; // The URL from which to AJAX in the content for this modal
this.ClassName = null; // The class name to add to this modal
Modal.prototype.Hide = function() {
    var me = this;
    if (this.OnDismiss) this.OnDismiss.call(this);
    WindowsMediaPlayer.destroy();
    this.Self.find('iframe').attr('src', '');
    //clean up #modal, leave it empty for next modal
    $('.jqmOverlay').fadeOut('fast', function() { $(this).remove(); });
    Modal.Dialog.fadeOut('fast', function() {
        me.Self.remove();
        $('.jqmOverlay').remove();
        Modal.Dialog.jqmHide();
        if (me.ClassName) Modal.Dialog.removeClass(me.ClassName);
    });
    setTimeout(function() { me.TrackExit(); }, 0);
};
Modal.prototype.Show = function() {
    var me = this;
    if (this.PreShow) this.PreShow.call(this);
    if (Modal.Cache[this.Url]) {
        this.ShowWhenReady();
    }
    else {
        $.ajax({
            data: null,
            dataType: 'html',
            url: me.Url,
            success: function(response) {
                if (response.length > 0) Modal.Cache[me.Url] = response;
                me.ShowWhenReady();
            },
            error: function() { }
        });
    }
};
Modal.prototype.GetOffsetDeltaV = function() {
    if (Modal.Dialog) {
        var dialogH = Modal.Dialog.height(),
            viewportH = window.innerHeight !== undefined ? window.innerHeight : document.documentElement.clientHeight;
        return viewportH - dialogH;
    }
};
Modal.prototype.Center = function() {
    if (Modal.Dialog) {
        var delta = this.GetOffsetDeltaV(),
            offset = delta > 0 ? delta / 2 + document.documentElement.scrollTop : document.documentElement.scrollTop;
        Modal.Dialog.css({ top: Math.floor(offset) + 'px' });
    }
};
Modal.prototype.ShowWhenReady = function() {
    var me = this;
    if (this.PreReady) this.PreReady.call(this);
    this.Init();
    this.InsertContentIntoFrame(Modal.Cache[this.Url]);
    if (this.OnReady) this.OnReady.call(this);
    if (this.ClassName) Modal.Dialog.addClass(this.ClassName);
    // Have to render the window shadow after the browser has been able to calculate the geometry of the contents
    Modal.Dialog.css('visibility', 'hidden');
    setTimeout(function() { me.TrackView(); }, 0);
    setTimeout(function() {
        Modal.Requested.RenderFrame();
        Cufon.refresh();
        Modal.Dialog.css('visibility', 'visible');
        Modal.Requested.Center();
        Modal.Dialog.jqmShow();
        Modal.Dialog.hide();
        Modal.Dialog.fadeIn(150);
    }, 0);
    window.onscroll = window.onresize = function(e) { if (Modal.Requested && me.GetOffsetDeltaV() > 0) Modal.Requested.Center(); };
};
Modal.prototype.PreShow = undefined;
Modal.prototype.PreReady = undefined;
Modal.prototype.OnReady = undefined;
Modal.prototype.OnDismiss = undefined;
Modal.prototype.Init = function() {
    var id = 'Modal' + new Date().getTime(),
        labelID = id + 'Label',
        me = this;
    this.Self = $('<div id="' + id + '" class="modalWindow" role="dialog" aria-labelledby="' + labelID + '">'
                    + '<div class="modalShadow"></div>'
                    + '<div class="modalShadowBottom"></div>'
                    + '<div class="modalDetail">'
                        + '<div id="' + labelID + '" class="header clr"><a class="closeModal" role="button">Close</a></div>'
                        + '<div class="content" role="main"></div>'
                        + '<div class="footer"></div>'
                    + '</div>'
                + '</div>');
    this.Self.find('.closeModal').click(function() { me.Hide(); });
    Modal.Dialog.html(this.Self);
};
Modal.prototype.Clear = function() {
    this.Self.find('iframe').attr({ src: '' });
    this.Self.find('.header h1').remove();
    this.Self.find('.content').empty();
    this.Self.find('.footer').empty();
    this.Self.attr('id', null);
};
Modal.prototype.RenderFrame = function() {
    this.Self.find('.modalShadowBottom').height(this.Self.find('.modalDetail').height() - 100);
};
Modal.prototype.InsertContentIntoFrame = function(content) {
    var $content = $('<div>' + content + '</div>'),
        sections = ['.header', '.content', '.footer'],
        sectionsFound = 0;
    for (var i = sections.length - 1; i > -1; i--) {
        var section = this.Self.find(sections[i]),
            sectionFromContent = $content.find(sections[i]);
        if (sectionFromContent.length > 0) {
            section.append(sectionFromContent.html());
            sectionsFound++;
        }
        else {
            section.remove();
        }
    }
};
Modal.prototype.SuppressTrackView = false;
Modal.prototype.TrackView = function() {
    if (!this.PageViewTracked && !this.SuppressTrackView && window.s) {
        for (var i = 1; i < 40; i++) s['prop' + i] = s['eVar' + i] = undefined;
        if (window.SetupInitialTrack) SetupInitialTrack(s);
        s.events = s.linkTrackEvents = 'event1';
        if (this.PageName) s.pageName = this.PageName;
        if (this.TrackVars) for (var k in this.TrackVars) s['prop' + k] = s['eVar' + k] = this.TrackVars[k];
        s.t();
        // Clear all
        s.events = s.linkTrackEvents = undefined;
        for (var i = 1; i < 40; i++) s['prop' + i] = s['eVar' + i] = undefined;
    }
    this.PageViewTracked = true;
    this.PageExitTracked = false;
};
Modal.prototype.SuppressTrackExit = true;
Modal.prototype.TrackExit = function() {
    if (s.__wlHostPageName) s.pageName = s.__wlHostPageName;
    // Clear all
    s.events = s.linkTrackEvents = undefined;
    for (var i = 1; i < 40; i++) s['prop' + i] = s['eVar' + i] = undefined;
    if (!this.PageExitTracked && !this.SuppressTrackExit && window.s) {
        for (var i = 1; i < 40; i++) s['prop' + i] = s['eVar' + i] = undefined;
        if (window.SetupInitialTrack) SetupInitialTrack(s);
        s.events = s.linkTrackEvents = 'event1';
        if (s.__wlHostPageName) s.pageName = s.__wlHostPageName;
        s.t();
        // Clear all
        s.events = s.linkTrackEvents = undefined;
        for (var i = 1; i < 40; i++) s['prop' + i] = s['eVar' + i] = undefined;
    }
    this.PageExitTracked = true;
    this.PageViewTracked = false;
};
Modal.Setup = function(selector, url, options) { //, className, onready, ondismiss) {
    var dlg = new Modal(url);
    for (var prop in options) {
        dlg[prop] = options[prop];
    }
    $(selector).click(function(e) {
        e.preventDefault();
        dlg.Caller = $(this);
        (Modal.Requested = dlg).Show();
    });
    return dlg;
};