/**
*	Simple modal window 
*   Dependencies:  Jquery 1.6, POP.replaceSubmit, 
**/
POP.Modal = function (targets, config) {

    var _self = this;
    _self.targets = $(targets);
    _self.config = $.extend({
        modalPrefix: 'modal',
        modalType: 'basic',
        fadeInTime: 200,
        fadeOutTime: 200,
        modalTopPosit: 100
    }, config || {});

    __init();

    function __init() {
        _self.animate = (jQuery.support.opacity) ? true : false;
        _self.modalContainer = $('#' + _self.config.modalPrefix + '-container');
        if (_self.modalContainer.length < 1) { //if the modal hasn't been constructed, construct it
            __create();
        } else {
            _self.modalOverlay = $('#modal-overlay');
            __addEventListeners();
        }
        _self.modalContent = $(_self.modalContainer.find('.' + _self.config.modalPrefix + '-content'));
    }

    function __create() {
        var html = '';
        _self.modalOverlay = $('<div id="modal-overlay"></div>');
        html += '<div id="modal-container">';
        html += '	<div class="modal-wrapper">';
        html += '		<div class="modal-close-btn">';
        html += '			<a href="" class="ir">Close</a>';
        html += '		</div>';
        html += '		<div class="modal-content">';
        html += '		</div>';
        html += '	</div>';
        html += '</div>';

        _self.modalContainer = $(html);
        _self.modalContainer.hide();
        _self.modalOverlay.hide();
        $('body').append(_self.modalOverlay);
        $('body').append(_self.modalContainer);
        _self.closeBtn = _self.modalContainer.find('.modal-close-btn a');
        __addEventListeners();
    }

    function __addEventListeners() {
        var modalLinks = _self.targets;
        //added in order to prevent hard submits
        modalLinks.unbind();

        modalLinks.live('click', function (e) {
            e.preventDefault();
            __onModalLinkClick(e);
        });
        _self.closeBtn.bind('click', function (e) {
            e.preventDefault();
            __onCloseBtnClick(e);
        });
        _self.modalOverlay.bind('click', function (e) {
            e.preventDefault();
            __onCloseBtnClick(e);
        });
        //Close window on escape press
        $(window).keyup(function (e) {
            e.preventDefault();
            if (e.keyCode === 27) {
                __close();
            }
        });
    }

    function __onModalLinkClick(e) {
        var obj = {},
			el = $(e.currentTarget),
			type = el.attr('data-type'),
			modalType = type || _self.config.modalType,
			modal = POP.ModalType.factory(modalType);
        obj.el = el;
        //console.log('Type: ' + type);
        obj.content = _self.modalContent;
        obj.modal = _self;
        obj.container = _self.modalContainer;
        //Get the modal data and send to specific modaltype callback to __open()
        modal.view(obj, __open, null, _self);
    }

    function __onCloseBtnClick(e) {
        __close();
    }

    function __open() {
        __position();
        _self.modalOverlay.fadeIn(_self.config.fadeInTime);
        __animateModalIn();
    }

    function __close() {
        _self.modalContainer.fadeOut(_self.config.fadeOutTime);
        _self.modalOverlay.fadeOut(_self.config.fadeOutTime + 50);
    }

    function __animateModalIn() {
        var positObj = __position();
        if (_self.animate) {
            _self.modalContainer.css({ 'opacity': 0 });
            _self.modalContainer.show().animate({
                'opacity': 1,
                'top': positObj.endPosition
            }, 400, function () { });
        } else {
            _self.modalContainer.show().animate({
                'top': positObj.endPosition
            }, 400, function () { });
        }
        Cufon.refresh();
    }

    function __animateModalOut() {
    }

    function __position() {
        /*var scrollTop = $(window).scrollTop(),
        topPosition = ($(window).height() - _self.modalContainer.height()) / 2 + scrollTop + 'px';

        _self.modalContainer.css({
        'top': topPosition
        });*/
        var scrollTop = $(window).scrollTop(),
            obj = {};
        obj.modalHeight = _self.modalContainer.height();
        obj.topPosition = scrollTop - obj.modalHeight + 'px';
        obj.endPosition = scrollTop + _self.config.modalTopPosit + 'px';

        _self.modalContainer.css({
            'top': obj.topPosition
        });
        return obj;
    }

    function __update() { }

    //Publicly exposed methods, properties
    return {
        modalOverlay: {},
        modalContainer: {},
        modalContent: {},
        animate: false,
        config: {},
        triggerModal: function (element) {
            var evt = {};
            evt.currentTarget = element;
            __onModalLinkClick(evt);
        }
    }
}

/**
*	Stub functions for Modal types - should be overwritten
**/

POP.ModalType = function() {};

POP.ModalType.prototype = {
	model: function() {},
	view: function(obj, callback, callbackParams, ctx) {}
};

/**
*	Factory methods for making different Modal Types
**/
POP.ModalType.factory = function(type) {
	var constr = type,
		newType;
		
	if(typeof POP.ModalType[constr] !== "function") {
		throw {
			name: "Error",
			message: constr + " doesn\'t exist."
		};
	}
	
	if(typeof POP.ModalType[constr].prototype.model !== 'function') {
		POP.ModalType[constr].prototype = new POP.ModalType();
	}
	
	newType = new POP.ModalType[constr]();
	return newType;
};

/**
*	Default Type Modal 
**/
POP.ModalType.basic = function() {};

POP.ModalType.basic.prototype.model = function () {
	var data = null;
	return data;
};

POP.ModalType.basic.prototype.view = function (obj, callback, callbackParams, ctx) { //obj params: content, el
	var html = '';
	
	html += 'This is default modal content';
	
	obj.content.html(html);
	
	if(typeof callback === 'function') {
		var ctx = ctx || this;
		callback.apply(ctx, [callbackParams]);
	}
}

/**
*	Seat Map Modal 
**/
POP.ModalType.seatMap = function() {};

POP.ModalType.seatMap.prototype.model = function () {
	var data = {},
		element;
    
    element = $('a.lnk-seat-map');
	data.map = element.attr('href').toLowerCase();

	return data;
};

POP.ModalType.seatMap.prototype.view = function (obj, callback, callbackParams, ctx) { //obj params: content, el
	var html = '',
		data;

    data = this.model();
    if (!data) { return; }

	html += '<img src="' + data.map + '" alt="" class="seatmap" />';
	
	obj.content.html(html);
	
	if(typeof callback === 'function') {
		var ctx = ctx || this;
		callback.apply(ctx, [callbackParams]);
	}
}

/**
*	Join Email List Type Modal 
*   Requires Jquery.Validation.  Asynchronous post to join email list
**/
POP.ModalType.joinEmail = function() {};

POP.ModalType.joinEmail.prototype.model = function() {
	var data = {},
		element;
    
    element = $('.email-list a');
	//Need to get all the logged-in info and such from alan...
	data.sessionId = element.data('session');
    data.isloggedin = element.data('isloggedin');
    data.isSignedUp = element.data('signedup');
	data.img = POP.CONFIG.modalImage;
	data.title = 'Join the Email List';
	data.intro = element.find('div').html();
	
	return data;
};

POP.ModalType.joinEmail.prototype.view = function (obj, callback, callbackParams, ctx) { //obj params: content, el
    var html = '',
		formHtml = '',
		confirmHtml = '',
		data,
		loc;

    data = this.model();
    if (!data) { return; }

    //Confirmation Html
    confirmHtml += '<div class="modal-content-hdr">';
    confirmHtml += '	<div class="modal-image-mask">';
    confirmHtml += '		<img src="' + data.img + '" />';
    confirmHtml += '	</div>';
    confirmHtml += '	<h2>' + data.title + '</h2>';
    confirmHtml += '</div>';
    confirmHtml += '<div class="modal-content-body">';
    confirmHtml += '</div>';

    if (data.isloggedin == 'False' || data.isloggedin == undefined) {
        //Original (Not Logged in) Html
        formHtml += '<div class="modal-content-hdr">';
        formHtml += '	<div class="modal-image-mask">';
        formHtml += '		<img src="' + data.img + '" />';
        formHtml += '	</div>';
        formHtml += '	<h2>' + data.title + '</h2>';
        formHtml += '</div>';
        formHtml += '<div class="modal-content-body">';
        formHtml +=        data.intro;
        formHtml += '   <div class="error" style="display:none;"><h4>Some of the information provided was not valid</h4></div>';
        formHtml += '	<form class="join-email-form">';
        formHtml += '		<ul>';
        formHtml += '			<li>';
        formHtml += '				<label for="fname">*First Name: </label>';
        formHtml += '				<input type="text" class="required" name="fname" />';
        formHtml += '			</li>';
        formHtml += '			<li>';
        formHtml += '				<label for="lname">*Last Name: </label>';
        formHtml += '				<input type="text" class="required" name="lname" />';
        formHtml += '			</li>';
        formHtml += '			<li>';
        formHtml += '				<label for="email">*Email: </label>';
        formHtml += '				<input type="text" class="required email" name="email" />';
        formHtml += '			</li>';
        formHtml += '			<li>';
        formHtml += '				<label for="submit"></label>';
        formHtml += '				<input class="submit-btn" type="submit" name="submit" value="Join List" />';
        formHtml += '			</li>';
        formHtml += '		</ul>';
        formHtml += '	</form>';
        formHtml += '</div>';
        //attach html string to passed object
        obj.content.addClass('join-email-modal');
        obj.content.html(formHtml);
        _gaq.push(['_trackPageview', '/email/signupform']);
        this.addEventListeners(obj, confirmHtml);
    } else {
        //attach html string to passed object
        loc = '/svc/EmailSignUpHandler.ashx?sessionkey=' + data.sessionId;
        this.onSubmitClick(obj, confirmHtml, loc);
    }
    Cufon.refresh();
    if (typeof callback === 'function') {
        var ctx = ctx || this;
        callback.apply(ctx, [callbackParams]);
    }
};

//User not logged in...
POP.ModalType.joinEmail.prototype.addEventListeners = function (obj, html) {
    var self = this, form = obj.content.find('.join-email-form'), a, closeBtn;
    //Make sure our new submit button is updated
    POP.replaceSubmit.replace(form);
    a = obj.content.find('a.block-btn');
    closeBtn = obj.container.find('.modal-close-btn a');
    //add proxy submit event to anchor tag
    a.bind('click', function (e) {
        e.preventDefault();
        form.submit();
    });
    closeBtn.bind('click', function (e) {
        e.preventDefault();
        //reload page on close to refresh login messaging
        window.location.reload();
    });
    form.validate({
        errorLabelContainer: $("div.error"),
        messages: {
            fname: '<span>&#149;</span>Please enter your first name.',
            lname: '<span>&#149;</span>Please enter your last name.',
            email: '<span>&#149;</span>Please enter a valid email address.'
        },
        submitHandler: function () {
            var loc = '', fname, lname, email;
            fname = obj.content.find('input[name="fname"]').val();
            lname = obj.content.find('input[name="lname"]').val();
            email = obj.content.find('input[name="email"]').val();
            //Build ajax query string
            loc += '/svc/EmailSignUpHandler.ashx?';
            loc += 'firstname=' + fname;
            loc += '&lastname=' + lname;
            loc += '&email=' + email;
			_gaq.push(['_trackPageview', '/email/completeform']);
            self.onSubmitClick(obj, html, loc);
        }
    });
}

POP.ModalType.joinEmail.prototype.onModalClose = function (obj) {
};
 
//User logged in and form submitted
POP.ModalType.joinEmail.prototype.onSubmitClick = function(obj, html, loc) {
    var contentEl = {},
        loader = {};
    obj.content.html(html);
    Cufon.refresh();
    contentEl = obj.content.find('.modal-content-body');
    loader = new POP.loadingMsg(obj.content, {top: '270px'});
    loader.show();
	$.ajax({
		url: loc,
		context: obj.content,
		success: function(msg) {
            loader.hide();
			contentEl.html('<p>' + msg.Message + '</p>');
		},
		error: function(msg) {
            loader.hide();
            contentEl.html('<p>' + msg.Message + '</p>');
		}
	});
}

/**
*	Send To a Friend Type Modal 
**/
POP.ModalType.sendToFriend = function() {};

POP.ModalType.sendToFriend.prototype.model = function (element) {
    var data = {};

    data.img = POP.CONFIG.modalImage;
	data.title = 'Tell Your Friends';
	data.intro = element.find('div').html();
	data.email = element.data('email');
    data.pageTitle = element.data('pagetitle') || '';
    data.url = element.data('pageurl') || '';

    return data;
};

POP.ModalType.sendToFriend.prototype.view = function(obj, callback, callbackParams, ctx) { //obj params: content, el
	var html = '', confirmHtml = '', data;

	data = this.model(obj.el);		
	if(!data) {	return;	}
	
	//Confirmation Html
	confirmHtml += '<div class="modal-content-hdr">';
	confirmHtml += '	<div class="modal-image-mask">';
	confirmHtml += '		<img src="' + data.img + '" />';
	confirmHtml += '	</div>';
	confirmHtml += '	<h2>' + data.title + '</h2>';
	confirmHtml += '</div>';
	confirmHtml += '<div class="modal-content-body">';
	confirmHtml += '	<a class="block-btn" href="#">Send Another</a>';
	confirmHtml += '</div>';
	
	//Original Form Html
	html += '			<div class="modal-content-hdr">';
	html += '				<div class="modal-image-mask">';
	html += '					<img src="' + data.img + '" />';
	html += '				</div>';
	html += '				<h2>' + data.title + '</h2>';
	html += '			</div>';
	html += '			<div class="modal-content-body send-to-friend-modal">';
	html +=                 data.intro + '<br/><strong> ' + data.pageTitle + '</strong><br/>';
    html +=                 '<small>(' + data.url + ')</small>';
	html += '               <div class="error" style="display:none;"><h4>Some of the information provided was not valid</h4></div>';
	html += '				<form class="send-to-friend-form">';
	html += '					<ul>';
	html += '						<li>';
	html += '							<label for="email">*Your Email Address: </label>';
	html += '							<input type="text" class="required email" value="' + data.email + '" name="email" />';
	html += '						</li>';
	html += '						<li>';
	html += '							<label for="subject">Subject: </label>';
	html += '							<input type="text" name="subject" />';
	html += '						</li>';
	html += '						<li>';
	html += '							<label for="comments">Comments: </label>';
	html += '							<textarea name="comments" maxlength="255"></textarea>';
	html += '						</li>';
	html += '						<li>';
	html += '							<label for="friend-email">*Friend\'s Email Address: </label>';
	html += '							<input type="text" name="friend-email" class="" />';
	html += '						</li>';
	html += '						<li>';
	html += '							<label for="submit"></label>';
	html += '							<input class="submit-btn" type="submit" name="submit" value="Send" />';
	html += '						</li>';
	html += '					</ul>';
	html += '				</form>';
	html += '			</div>';
	
	obj.content.html(html);
	this.addEventListeners(obj, confirmHtml, data);
	
	if(typeof callback === 'function') {
		var ctx = ctx || this;
		callback.apply(ctx, [callbackParams]);
	}
};

POP.ModalType.sendToFriend.prototype.addEventListeners = function (obj, html, data) {
    var self = this, form = $('.send-to-friend-form'), a;

	//Enforce textarea maxlength
	new POP.TextareaMaxlength(form.find('textarea'));

    //Make sure our new submit button is updated
    POP.replaceSubmit.replace(form);
    Cufon.refresh();
    a = obj.content.find('a.block-btn');
    //add proxy submit event to anchor tag
    a.bind('click', function (e) {
        e.preventDefault();
        form.submit();
    });
    $('.send-to-friend-form').validate({
        errorLabelContainer: $("div.error"),
        messages: {
            email: '<span>&#149;</span>Please enter a valid email address.'
        },
        submitHandler: function () {
            var loc = '', email, subject, comments, friendEmail;

            email = obj.content.find('input[name="email"]').val();
            subject = obj.content.find('input[name="subject"]').val();
            comments = obj.content.find('textarea[name="comments"]').val();
            friendEmail = obj.content.find('input[name="friend-email"]').val();
            //Build ajax query string
            loc += '/svc/SendToAFriendHandler.ashx?';
            loc += 'from=' + encodeURIComponent(email);
            loc += '&subject=' + encodeURIComponent(subject);
            loc += '&comments=' + encodeURIComponent(comments);
            loc += '&to=' + encodeURIComponent(friendEmail);
            loc += '&url=' + encodeURIComponent(data.url);
            loc += '&title=' + encodeURIComponent(data.pageTitle);
			_gaq.push(['_trackEvent', 'Tell a Friend', 'Send', window.location.pathname]);
            self.onSubmitClick(obj, html, loc);
        }
    });
}
POP.ModalType.sendToFriend.prototype.onSubmitClick = function (obj, html, loc) {
    var self = this,
        contentEl = {},
        loader = {},
        submitBtn = {};
    obj.content.html(html);
    contentEl = obj.content.find('.modal-content-body');
    //need to add the submit again button..
    loader = new POP.loadingMsg(obj.content, { top: '270px' });
    loader.show();
    $.ajax({
        url: loc,
        context: obj.content,
        success: function (msg) {
            loader.hide();
            contentEl.html('<p>' + msg.Message + '</p>');
            submitBtn = $('<a class="block-btn" href="#">SEND ANOTHER</a>');
            contentEl.append(submitBtn);
            //Force conversion of fonts
            Cufon.refresh();
            //Build the original html back up again on click
            submitBtn.bind('click', function (e) {
                e.preventDefault();
                self.view(obj);
            });
        },
        error: function (msg) {
            loader.hide();
            contentEl.html('<p>' + msg.Message + '</p>');
        }
    });
};

/**
*	Login Help Modal
**/
POP.ModalType.loginHelp = function () { };

POP.ModalType.loginHelp.prototype.model = function () {
    var data = {},
    element = $();

    data.img = POP.CONFIG.modalImage;
    data.title = 'Account Number';
    data.foo = $('div.acc-lookup').html();
    return data;
};

POP.ModalType.loginHelp.prototype.view = function (obj, callback, callbackParams, ctx) { //obj params: content, el
    var html = '';

    data = this.model();
    if (!data) { return; }

    html += '<div class="modal-content-hdr">';
    html += '	<div class="modal-image-mask">';
    html += '		<img src="' + data.img + '" />';
    html += '	</div>';
    html += '	<h2>' + data.title + '</h2>';
    html += '</div>';
    html += '<div class="modal-content-body login-help">';
    html += data.foo; 
    html += '</div>';

    obj.content.html(html);

    if (typeof callback === 'function') {
        var ctx = ctx || this;
        callback.apply(ctx, [callbackParams]);
    }
}

/**
*	Login Help Modal
**/
POP.ModalType.matchingGift = function () { };

POP.ModalType.matchingGift.prototype.model = function () {
    var data = {},
    element = $();

    data.img = POP.CONFIG.modalImage;
    data.title = 'Matching Gift';
    data.content = $('div#matchingGiftsPopupText').html();
    return data;
};

POP.ModalType.matchingGift.prototype.view = function (obj, callback, callbackParams, ctx) { //obj params: content, el
    var html = '';

    data = this.model();
    if (!data) { return; }

    html += '<div class="modal-content-hdr">';
    html += '	<div class="modal-image-mask">';
    html += '		<img src="' + data.img + '" />';
    html += '	</div>';
    html += '	<h2>' + data.title + '</h2>';
    html += '</div>';
    html += '<div class="modal-content-body login-help">';
	html += 	data.content;
    html += '</div>';

    obj.content.html(html);

    if (typeof callback === 'function') {
        var ctx = ctx || this;
        callback.apply(ctx, [callbackParams]);
    }
}

/**
*	Donation Modal
**/
POP.ModalType.donate = function() {};

POP.ModalType.donate.prototype.model = function () {
	var data = {},
		element,
		btns;
    element = $('#donation-modal-data');
	btns = element.find('input[type="submit"]');
	btns.removeClass('HiddenButton');

    data.img = POP.CONFIG.modalImage;
    data.title = 'SUPPORT THE MAGIC OF LIVE THEATRE';
	data.body = element.find('.top').html();
	data.instruct = element.find('.btm').html();
	data.origvalue = element.data('origvalue');
	data.btns = element.find('.btns').html();

	return data;
};

POP.ModalType.donate.prototype.view = function (obj, callback, callbackParams, ctx) { //obj params: content, el
	var html = '',
		data;

	data = this.model();
	if (!data) { return; }
	this.addEventListeners(obj);

    _gaq.push(['_trackEvent', 'Cart Upsell Impression', 'Donation',0]);

	//Original Form Html
	html += '			<div class="modal-content-hdr donate-modal">';
	html += '				<div class="modal-image-mask">';
	html += '					<img src="' + data.img + '" />';
	html += '				</div>';
	html += '				<h2>' + data.title + '</h2>';
	html += '			</div>';
	html += '			<div class="modal-content-body donate-modal">';
	html +=                 data.body;
	html += '				<p><strong>Original value: ' + data.origvalue;
	if (String(data.origvalue).indexOf('.') == -1) {
		html += '.00';
	}
	html += '				</strong></p>';
	html += '				<p><strong>' + data.instruct + '</strong></p>';
	html += '				<form method="post" action="payment.aspx">';
	html += data.btns;
	html += '				</form>';
	html += '				<p class="no-thanks"><a href="#">No, thanks. I do not wish to make a donation at this time.</a></p>';
	html += '			</div>';

	obj.content.html(html);

	POP.replaceSubmit.replace('.donate-modal');
	
	if (typeof callback === 'function') {
		var ctx = ctx || this;
		callback.apply(ctx, [callbackParams]);
	}
};

POP.ModalType.donate.prototype.addEventListeners = function (obj) {
    obj.content.delegate('a.block-btn', 'click', function (e) {
        e.preventDefault();
        var value,
            submit = $($(this).next('input[type="submit"]'));
        value = submit.val();
        value = value.substring(value.indexOf('$') + 1, value.indexOf('.') || value.length - 1);
        _gaq.push(['_trackEvent', 'Cart Upsell click', 'Donation', value]);
   
        //console.log('value: ', value);
        submit.click();
    });
    obj.content.delegate('.no-thanks a', 'click', function (e) {
        e.preventDefault();
        _gaq.push(['_trackEvent', 'Cart Upsell click', 'Donation', 0]);
        obj.modal.closeBtn.trigger('click');
    });
};


