/*************************************************************************
 Browser for 13 Q&A Content
 Required:
 - /js/custom/shade.js
 Jeff Chew
 ************************************************************************/
 
var qabrowser = {
	data: null,							/* stores the json data */		
	dataSorted: new Array(),			/* stores the data in a sorted associative array */
	currentItem: '',					/* stores the current menu item id */
	questions: new Array(),				/* stores the question text */
	questionsLloyd: new Array,			/* this is a patch, since Lloyd has different questions */
	nameToID: new Array(),				/* stores the names and matches with the ID */
	
	show: function(inpage){
		if(inpage == undefined){
			inpage = false;
		}
		if(!inpage){
			shade.show();	
		}
		
		/* creates the outer layer if it isn't done yet */
		if(inpage && $('#qabrowserInpage').html() == ''){
			$('#qabrowserInpage').html(qabrowser.createLayer(inpage));
		}else if($('#qabrowserItems').length == 0){
			$(document.body).append(qabrowser.createLayer(inpage));
		}
		
		/* grabs the querystring if it exists */		
		var $querystringID = '';
		var $location = window.location.href;
		if(inpage){
			if($location.indexOf('/qa-13/') + 7 < $location.length){
				$querystringID = $location.substring(($location.indexOf('/qa-13/') + 7),($location.length - 1));				
			}
		}
				
		var $popuplayer = $('#qabrowserPopup');
		var $menulayer = $('#qabrowserMenu');
		var $contentlayer = $('#qabrowserContent');
		
		if(qabrowser.data == null){
			$.ajax({
				type : "GET",
				url : "/staging/json/13qa.php",
				contentType : "application/json; charset=utf-8",
				dataType : "json",
				success : function(data) {
					qabrowser.data = data;
					
					var $menucontent = '';
					$.each(qabrowser.data, function(n){
						qabrowser.dataSorted[this.id] = this;
						qabrowser.dataSorted[this.id].index = n;
						
						$menucontent += '<div id="qabrowserMenuItem' + this.id + '" onclick="qabrowser.select(' + this.id + ');" style="float: left; background-color: #f9f8bf; cursor: pointer; width: 190px; padding: 5px; font-size: 12px; font-weight: bold; color: black;">' + this.firstName + ' ' + this.lastName + '</div>'; 
					});
					$menulayer.html($menucontent);
					
					$popuplayer.css({
						'top' : $(window).scrollTop() + 20 + 'px',
						'left' : ($(window).width() / 2) - ($popuplayer.width() / 2) + 'px'
					});					
					$popuplayer.fadeIn(1000, function(){
						var useID = ($querystringID == '') ? qabrowser.data[0].id : parseInt($querystringID);						
						qabrowser.select(useID);
					});					
				}
			});
		}else{
			$popuplayer.css({
				'top' : $(window).scrollTop() + 20 + 'px',
				'left' : ($(window).width() / 2) - ($popuplayer.width() / 2) + 'px'
			});		
			$popuplayer.fadeIn(1000, function(){
				qabrowser.select(qabrowser.data[0].id);
			});	
		}
	},
	
	next: function(){
		var $index = qabrowser.dataSorted[qabrowser.currentItem].index;
		var $nextindex = ($index == qabrowser.data.length - 1) ? 0 : $index + 1;
		qabrowser.select(qabrowser.data[$nextindex].id);
	},
	
	prev: function(){
		var $index = qabrowser.dataSorted[qabrowser.currentItem].index;
		var $previndex = ($index == 0) ? qabrowser.data.length - 1 : $index - 1;
		qabrowser.select(qabrowser.data[$previndex].id);
	},
	
	hide: function(){
		shade.hide();
		$('#qabrowserPopup').fadeOut(1000);
	},
	 
	createLayer: function(inpage){	
		var $text = '';		
		if(inpage){
			$text = '<div id="qabrowserPopup" style="display: block; padding: 8px 0 0 0; background-color: white;">' +
						'<div style="margin: 0 0 8px 20px; text-align: right; float: right;">';			
		}else{
			$text = '<div id="qabrowserPopup" style="display: none; padding: 8px 20px 20px 20px; background-color: white; position: absolute; z-index: 10001">' +
						'<div style="margin-bottom: 8px; text-align: left; float: left; font-size: 14px; font-weight: bold; color: #ca111f;">Ask the Cast of 13: Instant Vaudeville</div>' +
						'<div style="margin-bottom: 8px; text-align: right; float: right;"><a href="javascript:qabrowser.hide()" style="color: #000642; text-decoration: underline;">close</a></div>' +
						'<div style="margin: 0 60px 8px 20px; text-align: right; float: right;">';					
		}
		$text +=			'<a href="javascript:qabrowser.prev()" style="color: #000642; text-decoration: underline;">Prev</a> | ' +
							'<a href="javascript:qabrowser.next()" style="color: #000642; text-decoration: underline;">Next</a>' +
						'</div>' +
					
						'<div id="qabrowserMenu" style="width: 200px; clear: both; float: left"></div>' +
						'<div id="qabrowserContent" style="width: 600px; height: 100%; padding: 10px; float: left; font-size: 12px; color: black; border: 3px solid #000642;"></div>' +
					'</div>';
		return $text;				
	},
	
	select: function(id){
		if(qabrowser.dataSorted[id] == undefined){
			id = qabrowser.data[0].id;
		}
		if(qabrowser.currentItem != ''){
			$('#qabrowserMenuItem' + qabrowser.currentItem).animate({
				'background-color' : '#f9f8bf',
				'color' : 'black'
			}, 1000);						
		}
		qabrowser.currentItem = id;
		var $contentLayer = $('#qabrowserContent');
		
		/* uses the lloyd questions array if it is lloyd */
		var $questionarray = (id == 29) ? qabrowser.questionsLloyd : qabrowser.questions;
		
		$contentLayer.fadeOut(500, function(){
			var $contenttext = '';
			$.each($questionarray, function(n){				
				if(qabrowser.dataSorted[id].questions[n] != ''){
					$contenttext += '<strong>' + this + '</strong><br/>' +
									qabrowser.dataSorted[id].questions[n] + '<br/><br/>';
				}				
			});
			if(qabrowser.dataSorted[id].bio != '' && qabrowser.dataSorted[id].bio != null){
				$contenttext += 	'<hr style="border-bottom: 1px solid #ca111f; border-top: none; border-left: none; border-right: none; height: 1px; margin-bottom: 5px;"/>';
				if(qabrowser.dataSorted[id].photo != null && qabrowser.dataSorted[id].photo != ''){
					$contenttext += '<div style="width: 160px; float: left;"><img src="/staging/images/13qa/' + qabrowser.dataSorted[id].photo + '" width="152" alt=""/></div>' +
									'<div style="float: left; width: 440px;">';
				}else{
					$contenttext +=	'<div style="float: left;">';
				}
				$contenttext +=		'<strong>About ' + qabrowser.dataSorted[id].firstName + ' ' + qabrowser.dataSorted[id].lastName + ' (' + qabrowser.dataSorted[id].role + ')</strong><br/>' +
									qabrowser.dataSorted[id].bio + '</div>';
			}
			$(this).html($contenttext)				
				.fadeIn(1000);
		});
		
		$('#qabrowserMenuItem' + id).animate({
			'background-color' : '#000642',
			'color' : 'white'														
		}, 1000);
	}
}

qabrowser.questions[0] = "How's it going?";
qabrowser.questions[1] = "Tell us a little (no spoilers!) about what you have planned for THIRTEEN.";
qabrowser.questions[2] = "Have you worked with 2g before? What was it and when? How'd it go?";
qabrowser.questions[3] = "Why is it so awesome to be an Asian American theater artist in New York City?";
qabrowser.questions[4] = "What's your favorite kind of theater and why?";
qabrowser.questions[5] = "What kind of work have you not done that you most want to do?";
qabrowser.questions[6] = "Why should people come and see THIRTEEN?";
qabrowser.questions[7] = "Any welcome message for our brand new Artistic Director Carla Ching, and/or for 2g on its thirteenth birthday?";

qabrowser.questionsLloyd[0] = "How's it going, Lloyd?";
qabrowser.questionsLloyd[1] = "What was your favorite thing about the last five years as Artistic Director?";
qabrowser.questionsLloyd[2] = "What's your role now?  Whaddaya do?";
qabrowser.questionsLloyd[3] = "What's so great about being an Asian American artist in NYC?";
qabrowser.questionsLloyd[4] = "What's your favorite kind of theater and why?";
qabrowser.questionsLloyd[5] = "What kind of work have you not done that you most want to do?";
qabrowser.questionsLloyd[6] = "What's with your dog's name?";
qabrowser.questionsLloyd[7] = "Everybody is referencing 2g turning 13 as an occasion for a middle school dance. If you were DJ for 2g's birthday party, what song would you play as the last song of the night?";