// dictionary for indexing media
mediaDict = {
	'philosophy':0,
	'classes':1,
	'parties':2,
	'testimonials':3
}

var mediaVideos = {
	'philosophy':'<iframe src="http://player.vimeo.com/video/56932424" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>',
	'classes':'<iframe src="http://player.vimeo.com/video/56932425" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>',
	'parties':'<iframe src="http://player.vimeo.com/video/67268399" frameborder="0" webkitallowfullscreen= mozallowfullscreen allowfullscreen></iframe>',
	'testimonials':'<img src="img/testimonials-still.jpg">'
};

var mediaStills = {
	'philosophy': '<img src="img/philosophy-still.jpg">',
	'classes': '<img src="img/classes-still.jpg">',
	'parties': '<img src="img/parties-still.jpg">',
	'testimonials': '<img src="img/testimonials-still.jpg">'
};


var requestRunning = false;
// function for tab selection; loads media above and content below tabs
// for the tab selected by the user
function tabChange(){

	// If a request is already running, just return without doing anything
	if (requestRunning){
		writeLog("Request running already!");
		return;
	}

	// if the tab clicked is already selected, do nothing
	var tab = location.hash.replace('#', '');
	if ($('.selector.active').hasClass(tab)){
		writeLog('Selector already selected!');
	 	return;
	}

	// now we're ready to start, so prevent further clicks
	requestRunning = true;

	// toggle selected tab
	$('.selector.selected').toggleClass('selected');
	$('.selector.'+tab).toggleClass('selected');

	// slide in media to be shown
	
	$('#carousel .active').fadeOut(function() {
		// remove inner media if content is not set to static
		if (!$('#carousel .active').hasClass('static')){
			$('#carousel .active').html(mediaStills[tab]); // removes iframe from DOM, preventing background playing
		}
		if (!$('#carousel .'+tab).hasClass('static')){
			$('#carousel .'+tab).html(mediaVideos[tab]); // add new media to DOM
		}
		
		$('#carousel .active').toggleClass('active');
		$('#carousel .'+tab).fadeIn(function(){
			$('#carousel .'+tab).toggleClass('active');
		});
	});

	// hide currently displayed info div and show the one selected
	$('.blurb.active').fadeOut(function() {
		$('.blurb.active').toggleClass('active');
		$('.blurb.'+tab).fadeIn(function() {
			$('.blurb.'+tab).toggleClass('active');
			// make sure that hash is correct,
			// in case user clicked another selector while this was running
			location.hash = "#"+tab;
			// finally, once done, allow further clicks
			requestRunning = false;
		});
	});

}

// calculate what the height of the media should be based on the width of the screen
function resizeMedia(){
	var w = $('#carousel').width();
	var h = 446/797 * w;
	$('#carousel .item').height(h);
	// writeLog("height of carousel: " + h);
}

$(function(){

	//resizeMedia();
	//window.onresize = resizeMedia;
	
	window.onhashchange = tabChange;
	if (location.hash != "" && location.hash != "#")
		tabChange(location.hash);

});