var rim = rim || {};

rim.SmartphoneModal = function() {
    //elements with this selector will have the model functionality bound to their click events
    this.DialogID = 'smartphoneModal';
    this.ModalSelector = '.modalLink';
    this.Overlay = '.modal-overlay';
    this.CloseLink = '.close';
    this.ModalTemplateAttr = 'template';
    this.ModalContentAttr = 'content';
    this.CurrentLink = null;
    this.Modal = new Rf.Modal(null, {
        DialogID: this.DialogID,
        AllowCache: false,
        ZIndex: '10000'
    });
    this.Init();
};

rim.SmartphoneModal.prototype = {
    Init: function() {
        var me = this;

        $(me.Overlay).live('click', function(e) {
            e.preventDefault();
            me.Modal.Close();
        });

        $('#' + me.DialogID + ' ' + me.CloseLink).live('click', function(e) {
            e.preventDefault();
            me.Modal.Close();
        });

        $(me.ModalSelector).live('click', function(e) {
            me.CurrentLink = $(this);
            var template_id = me.CurrentLink.attr(me.ModalTemplateAttr);
            var template = $('#' + template_id).html();

            me.Modal.Template = template;

            me.Modal.Bind(Rf.Modal.Events.Centered, function(event) {
                var dialog = $('#' + me.Modal.DialogID)
                var linkPosition = me.CurrentLink.offset();
                var css = {}
                var dialogWidth = dialog.width();

                css.left = linkPosition.left + 'px';
                css.top = linkPosition.top + 'px';

                if (rim.IsTouchDevice) {
                    var dialogHeight = dialog.height();
                    var notch = $('#notch');


                    // move the modal to just above the "Choose Compare" link
                    css.top = (linkPosition.top - 20) + 'px';
                    // adjust the notch
                    var notchCss = {
                        'left': (linkPosition.left - 3) + 'px',
                        'top': (linkPosition.top - 10) + 'px',
                        'z-index': 10005
                    }
                }

                dialog.css(css).fadeIn('slow', function() {
                    if (notch) notch.css(notchCss).show();
                    Cufon.refresh();
                });

            });

            me.Modal.Bind(Rf.Modal.Events.Show, function(event) {
                var content_id = me.CurrentLink.attr(me.ModalContentAttr);
                var content = $('#' + content_id).html();
                var dialog = $('#' + me.Modal.DialogID)

                dialog.find('div.content').html(content);

		// =========================== MODAL UPDATE =========================== //

		// --- options
		var padSpace = 66;

		// --- calculations
		allWidths = $('ul.series:first li.model').toArray();
		var numDevices = allWidths.length;

		// --- rather than set position based on device in css, just add a class for 2,3,4,5 devices, etc.
		$('.compareModal').addClass('numDevices'+numDevices); // this class determines modal position via compareModal.css

		var numSpaces = numDevices + 1; //edge spaces + between device/text items
		var itemWidths = 0;

		for (i=0;i<numDevices;i++) {
			itemWidths = parseInt(($(allWidths[i]).css('width')).split('px')[0]) + itemWidths;
			totalSpace = numSpaces*padSpace;
		}
		var setWidth = itemWidths+totalSpace;
		$('.compareModal #compareModal').css('width', setWidth);

		var userBrowser = (navigator.userAgent).toLowerCase();
		if (userBrowser.indexOf('msie') > -1) {
			$('.compareModal').css('width', setWidth+padSpace);
			if (numDevices == 5) { $('.compareModal').css('width', 1140); } // not likely, but incl. just in case
			$('.compareModal .content').prepend('<div id=\"compareModalLeftEdge\">&nbsp;</div>');
			$('.compareModal .content').append('<div id=\"compareModalRightEdge\">&nbsp;</div>');
		}

		// =========================== end: MODAL UPDATE =========================== //

                $(me.Overlay).css('cursor', 'default');
            });

            me.Modal.Open();
            e.preventDefault();
        });
    }
};

rim.OnloadEvents.Register(function() {
    new rim.SmartphoneModal();
    $('#compareContent').prepend('<div id=\"iePointer\"></div>');
    $('#compareModal').prepend('<div id=\"comparePointer\"><div id=\"triangle\"></div><div id=\"circle\"><div id=\"plus\"></div></div></div>');
});