/**
 * Idealizer JavaScript.
 * Grey out effect is extracted from LightBox.
 *
 * @author	Brad Chen <brad.chen@70mainstreet.com>
 * @version	$Id: idealizer.js 325 2009-08-06 17:38:35Z mainstreet $
 */

// global variables and initialization
var imageUrl	= 'http://assets.filemobile.com/156/images/idealizer';
var ajaxScript	= 'http://b.70ms.com/idealizer/idealizer.php';
var idealizer;
var idealizerLoader;
jQuery(document).ready(function() {
	idealizer = new Idealizer();
});

/**
 * Idealizer Constructor.
 *
 * Properties:
 * container	- outmost div
 * overlay		- overlay for grey out effect
 * content		- div for the actual content
 * steps		- divs of all steps
 * difficulty	- difficulty chosen
 * shows		- an array of shows selected
 * sending		- whether or not an e-mail is currently being sent
 */
function Idealizer() {
	this.container	= null;
	this.overlay	= null;
	this.content	= jQuery('#idealizer');
	this.steps		= null;
	this.difficulty	= '';
	this.shows		= new Array();
	this.sending	= false;
}

/**
 * Display the idealizer window.
 */
Idealizer.prototype.show = function() {
	// happy lazy initialization!
	if (!this.container) {
		this.initialize();
	}
	jQuery('#idealizer-top').removeClass();
	jQuery('#idealizer-top').addClass('step1');
	if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) == '6') {
		this.content.show();
		this.container.show();
		loadIdealizer();
	} else {
		this.content.fadeIn(500);
		this.container.fadeIn(500);
		idealizerLoader = setInterval(loadIdealizer, 100);
	}
};

/**
 * Hide the idealizer window.
 */
Idealizer.prototype.hide = function() {
	if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) == '6') {
		this.content.hide();
		this.container.hide();
	} else {
		this.content.fadeOut(500);
		this.container.fadeOut(500);
	}
};

/**
 * Initialize idealizer and create overlays.
 */
Idealizer.prototype.initialize = function() {
	this.container = jQuery('<div id="idealizer-container"></div>');
	this.overlay = jQuery('<div id="idealizer-overlay"></div>');
	this.overlay.appendTo(this.container);
	this.container.appendTo(jQuery('BODY'));

	// set up overlay
	if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) == '6') {
		// that's IE 6 we are talking here
		jQuery('body', 'html').css({height: '100%', width: '100%'});
		jQuery('html').css({overflow: 'hidden'});
		this.overlay.css({position: 'absolute'});
	}
	if (macFirefox()) {
		this.overlay.addClass('idealizer-overlay-mac-ff');
	} else {
		this.overlay.addClass('idealizer-overlay-bg');
	}
	this.overlay.click(function() {
		idealizer.hide();
	});

	this.initializeSteps();
};

/**
 * Reset the status of the idealizer.
 */
Idealizer.prototype.reset = function() {
	this.difficulty	= '';
	this.shows		= new Array();
	this.sending	= false;
	this.gotoStep(1);
	document['idealizerControlsFlash'].reset();
};

/** Step Methods **/

/**
 * Initialize all pages.
 */
Idealizer.prototype.initializeSteps = function() {
	this.steps = {
		step1:	jQuery('#idealizer-step1'),
		step2:	jQuery('#idealizer-step2'),
		step3:	jQuery('#idealizer-step3'),
		error:	jQuery('#idealizer-error'),
		email:	jQuery('#idealizer-email')
	};
};

/**
 * Hide all pages.
 */
Idealizer.prototype.resetSteps = function() {
	this.steps.step1.hide();
	this.steps.step2.hide();
	this.steps.step3.hide();
	this.steps.email.hide();
};

/**
 * Go to the page specified.
 *
 * @param string step the step to go to
 */
Idealizer.prototype.gotoStep = function(step) {
	var cssClass = '';
	switch (step) {
		case 2:
			cssClass = 'step2';
			this.gotoStep2();
		break;

		case 3:
			cssClass = 'step3';
			this.gotoStep3();
		break;

		case 'email':
			cssClass = 'step3';
			this.showEmailPanel();
		break;

		default:
			cssClass = 'step1';
			this.gotoStep1();
		break;
	}
	jQuery('#idealizer-top').removeClass();
	jQuery('#idealizer-top').addClass(cssClass);
};

/**
 * Go to step one.
 * (Called internally.)
 */
Idealizer.prototype.gotoStep1 = function() {
	this.resetSteps();
	this.steps.step1.show();
};

/**
 * Go to step two.
 * (Called internally.)
 */
Idealizer.prototype.gotoStep2 = function() {
	this.resetSteps();
	this.steps.step2.show();
	jQuery('#idealizer-step2-loading').show();
	jQuery('#idealizer-step2-result').hide();
	var query = ajaxScript + '?action=list';
	makeAjaxCall(query);
};

/**
 * Go to step three..
 * (Called internally.)
 */
Idealizer.prototype.gotoStep3 = function() {
	this.resetSteps();
	this.steps.step3.show();
	jQuery('#idealizer-step3-loading').show();
	jQuery('#idealizer-step3-result').hide();
	var query = ajaxScript + '?action=idealize&difficulty=' + this.difficulty;
	query += '&shows=' + this.shows.join(',');
	makeAjaxCall(query);
};

/**
 * Return to step 3 without re-rendering the page.
 */
Idealizer.prototype.returnStep3 = function() {
	this.resetSteps();
	this.steps.step3.show();

	document["idealizerControlsFlash"].toggleEmailButton("on");
};

/**
 * Show the email to friends page.
 */
Idealizer.prototype.showEmailPanel = function() {
	this.resetSteps();
	this.steps.email.show();
	jQuery('#idealizer-email-sending').hide();
	jQuery('#idealizer-email-buttons').show();
}

/** UI Events Handling Methods **/

/**
 * Go to the result page.
 */
Idealizer.prototype.idealize = function() {
	this.gotoStep(3);
};

/**
 * Send out mails to friends.
 */
Idealizer.prototype.sendMails = function() {
	if (!jQuery('#agree').is(':checked')) {
		alert('You need to agree to Rules and Regulations.');
		return;
	}
	if (this.sending) {
		return;
	}
	this.sending = true;
	jQuery('#idealizer-email-sending').show();
	jQuery('#idealizer-email-buttons').hide();
	var senderName = jQuery('#sender-name').val();
	var senderEmail = jQuery('#sender-email').val();
	var query = ajaxScript + '?action=email&sender_name=' + senderName;
	query += '&sender_email=' + senderEmail;
	for (var i = 1; i <= 5; i++) {
		var recipient = jQuery('#recipient-' + i).val();
		if (recipient) {
			query += '&recipient_' + i + '=' + recipient;
		}
	}
	makeAjaxCall(query);
}

/** Ajax Response Handling Methods **/

/**
 * Handle the list of shows from the server.
 *
 * @param string data the JSON object containing result data
 */
Idealizer.prototype.setShows = function(data) {
	var content = '<ul>';
	for (var i = 0; i < data.length; i++) {
		content	+= '<li><input type="checkbox" id="show_' + data[i].id + '" ';
		content	+= 'onchange="toggleShow(this, ' + data[i].id + ')" />';
		content	+= '<label for="show_' + data[i].id + '"> ' + data[i].name;
		content	+= '</label></li>';
	}
	content += '</ul>';
	jQuery('#idealizer-step2-loading').hide();
	jQuery('#idealizer-step2-result').show();
	jQuery('#idealizer-step2-list').html(content);
};

/**
 * Handle idealize result from the server.
 *
 * @param string data the JSON object containing result data
 */
Idealizer.prototype.setIdealizeResult = function(data) {
	// character image
	jQuery('#characters').empty();
	for (var i = 0; i < data.length; i++) {
		var div = jQuery('<div id="character-' + i + '"></div>');
		div.css({display: 'none'});
		var content = '<p>' + data[i].showText + '</p>';
		div.html(content);
		if (data[i].image) {
			var image = jQuery('<div></div>');
			image.css({background: 'url(' + imageUrl + '/characters/' +
									data[i].image + ') center top no-repeat',
						width: '140px',
						height: '80px'});
			div.prepend(image);
		}
		jQuery('#characters').append(div);
	}

	// ideas
	content = '<ol>';
	for (var i = 0; i < data.length; i++) {
		var mouseover = 'displayCharacterImage(' + i + ', ' + data.length + ')';
		content += '<li onmouseover="' + mouseover + '">' + data[i].idea;
		content += '</li>';
	}
	content += '</ol>';
	jQuery('#idealizer-step3-loading').hide();
	jQuery('#idealizer-step3-result').show();
	jQuery('#idea-list').html(content);
	displayCharacterImage(0, data.length);
	document['idealizerControlsFlash'].toggleEmailButton('on');
};

/**
 * Handle mailing result from the server.
 *
 * @param string data the JSON object containing result data
 */
Idealizer.prototype.handleMailSent = function(data) {
	if (!this.sending) {
		return;
	}
	this.sending = false;
	jQuery('#idealizer-email-sending').hide();
	jQuery('#idealizer-email-buttons').show();
	if (data.status != 'success') {
		alert(data.message);
		return;
	}
	alert("E-mail(s) have been sent successfully!");
	jQuery('#recipient-1').val('');
	jQuery('#recipient-2').val('');
	jQuery('#recipient-3').val('');
	jQuery('#recipient-4').val('');
	jQuery('#recipient-5').val('');
	this.returnStep3();
};

/** Functions **/

/**
 * Make a cross domain Ajax call via Flash.
 *
 * @param string query the query string
 */
function makeAjaxCall(query) {
	document['idealizerControlsFlash'].queryUrl(query);
}

/**
 * Handle Ajax callback from Flash.
 *
 * @param string result the result JSON string
 */
function handleQueryCallback(result) {
	eval('var data = ' + result);
	switch (data.callback) {
		case 'list':
			idealizer.setShows(data.content);
		break;

		case 'idealize':
			idealizer.setIdealizeResult(data.content);
		break;

		case 'email':
			idealizer.handleMailSent(data.content);
		break;
	}
}

/**
 * Handle calls from the ActionScript of flash.
 *
 * @param string command the command called by flash
 */
function handleIdealizerASCall(command) {
	switch (command) {
		case 'challenge':
			idealizer.difficulty = 'challenge';
			idealizer.gotoStep(2);
		break;

		case 'simple':
			idealizer.difficulty = 'simple';
			idealizer.gotoStep(2);
		break;

		case 'idealize':
			idealizer.idealize();
		break;

		case 'email':
			idealizer.gotoStep('email');
		break;

		case 'reset':
			idealizer.reset();
		break;
	}
}

/**
 * Toggle on or off a show's checkbox.
 *
 * @param	Object	checkbox	the checkbox element
 * @param	Number	id			id of the show
 */
function toggleShow(checkbox, id) {
	if (checkbox.checked) {
		idealizer.shows.push(id);
	} else {
		var result = new Array();
		for (var i = 0; i < shows.length; i++) {
			if (idealizer.shows[i] != id) {
				result.push(idealizer.shows[i]);
			}
		}
		idealizer.shows = result;
	}
	if (idealizer.shows.length) {
		document['idealizerControlsFlash'].toggleIdealizeButton('on');
	} else {
		document['idealizerControlsFlash'].toggleIdealizeButton('off');
	}
}

/**
 * Display a character's photo.
 *
 * @param	Number	index	the index to display
 * @param	Number	total	total character images out there
 */
function displayCharacterImage(index, total) {
	for (var i = 0; i < total; i++) {
		var element = jQuery("#character-" + i);
		if (i == index) {
			element.show();
		} else {
			element.hide();
		}
	}
}

/**
 * Load the idealizer.
 */
function loadIdealizer() {
	if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) == '6') {
		idealizer.reset();
		return;
	}
	if (document['idealizerControlsFlash'].reset) {
		idealizer.reset();
		clearInterval(idealizerLoader);
	}
}

/**
 * Reset the idealizer.
 */
function resetIdealizer() {
	idealizer.reset();
}

/**
 * Mac Firefox detection.
 * Extracted from Lightbox.
 *
 * @return bool whether or not the user is using Mac Firefox
 */
function macFirefox() {
	var userAgent = navigator.userAgent.toLowerCase();
	if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox') != -1) {
		return true;
	}
	return false;
}