// ---------------------------------------
//
// pjm-gallery.js
//
// Code for PJM Video Gallery
// 
// Author: Alexander Dahlberg
//
// ---------------------------------------

	
/*
	createGallery()
	
	Main function. Calls the rest of the functions to
	fetch data and build gallery.
	
*****************************************************/
function createGallery(language) {

	// album id's
	var swedishAlbum = '89508';
	var englishAlbum = '94759';
	var album = '';
	
	switch(language) {
		case 'swedish':
			album = swedishAlbum;
			break;
		case 'english':
			album = englishAlbum;
			break;
	}
	
	// send JSON request
	var dataFetcher = new VimeoCaller('JSON');	
	dataFetcher.getAlbum(album, callback);

}

/*
	callback()
	
	Callback function after JSON request is made
	
*****************************************************/

function callback(clips) {
	
	drawGallery(clips);	// draw gallery
	showVideo(clips[0].clip_id);
	attachEffects();	// attach hover/click effects		

}

/*
	drawGallery()
	
	Draws the gallery for the PJM Video List
	taking the data from an rss feed
	
*****************************************************/

function drawGallery(clips) {

	// settings
	var numStaticItems = 2; // number of vidItems that's is big and don't resize
		
	// draw vidItems
	var num = clips.length;
	for(i=0; i<num; i++) {
		
		var clip = clips[i]; // make shortcut
		
		// get dynamic data
		var img = clip.thumbnail_large;
		var title = clip.title;
		var info = clip.caption;
		var clipId = clip.clip_id;

		$('<div class="vidItem" />').appendTo('#galleryContent'); // create vidItem div
		var vidItem = $('#galleryContent .vidItem:eq('+i+')');	// make shortcut to div

		if(i < numStaticItems) { // don't make resizeable. Draw static vidItem		

			vidItem.addClass("noResize");
			vidItem.html(drawVidItem(false, title, img, info, clipId));

		} else { // create a resizeable vidItem

			vidItem.addClass("resize");
			vidItem.html(drawVidItem(true, title, img, info, clipId));				

		} // end else

	} // end for
	
}

/*
	attachEffects()
	
	attaches hover functions and animations to the DOM
	
*****************************************************/

function attachEffects() {
	// variables
	var speed = 300;
	var fadeSpeed = 150;
	var normalWidth = 160;
	var normalHeight = 120;
	var smallWidth = 78;
	var smallHeight = 58;

	// Small (Resizeable) Video Item Hover
	$('div.resize').hover(function() { // on hover

		var vidItem = $(this);
		$('img:not(.noResize)', this)
			.stop()	// stop any animations playing
			// enlarge image
			.animate({"width" : normalWidth+"px", "height" : normalHeight+"px"}, speed, "linear", function() {
				// when animation is done
				$('p.info', vidItem).stop().fadeIn(fadeSpeed); // fade in text
				$('.playBtn', vidItem).stop().fadeIn(fadeSpeed); // fade in play button
		});
			
	}, function() { // on mouse out

		var vidItem = $(this);
		
		$('.playBtn', this).fadeOut(fadeSpeed); // fade out play button
		$('p.info', this).fadeOut(fadeSpeed, function() { // fade out info text
			// shrink image
			$('img:not(.noResize)', vidItem)
				.stop() // stop any animations playing
				.animate({"width" : smallWidth+"px", "height" : smallHeight+"px"}, speed);
		});
													  
	}); // end vidItem hover
	
	// Large Video Item Hover
	$('div.noResize').hover(function() { // on hover
		$('.playBtn', this).fadeIn(fadeSpeed);
	}, function() {	// on mouse out
		$('.playBtn', this).fadeOut(fadeSpeed);
	});
	
	// when vidItem is clicked
	$('div.vidItem').click( function() {
		// load video
		var clipId = $('.clipId', this).text(); // get clipId
		showVideo(clipId); // show video
		centerAtObject('#video'); // scroll to video
		lights();
	});
	
	// switch the lights
	$('#switch').click( function() {
		lights(false);
		return false;
	});

	// switch rollover
	/*$('#switch').hover( function() {
		$(this).children("img").attr("src", '../images/icons/lights-btn-on.gif');
		return false;
	});*/

}

/*
	showVideo()
	
	return html structure for video clip
	
*****************************************************/

function showVideo(clipId) {
	var html = '<object width="683" height="393"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id='+ clipId +'&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id='+ clipId +'&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="683" height="393"></embed></object>';
	$('#video').html(html);
}

/*
	drawVidItem()
	
	return html structure for vidItem
	
*****************************************************/

function drawVidItem(resizeable, title, img, info, clipId) {
	
	// sizes for static vidItem
	var width = 160;
	var height = 120;
	
	// sizes for resizeable vidItem
	var smallWidth = 78;
	var smallHeight = 58;
	
	var html = "";
	
	// draw static vidItem
	if(!resizeable) {
	html =	'<div class="playBtn"><a href="#"><img class="noResize" src="images/content/play_btn.png" width="50" height="32" /></a></div>' +
			'<a href="#"><img src="'+ img +'" width="'+ width +'" height="'+ height +'" /></a>' +
			'<p class="itemTitle">'+ title +'</p>' +
			'<p class="info">'+ info +'</p>' +
			'<p class="clipId">'+clipId+'</p>' +
			'<div class="clearfloat"></div>';
	} else {
	html =	'<div class="playBtn"><a href="#"><img class="noResize" src="images/content/play_btn.png" width="50" height="32" /></a></div>' +
			'<table cellspacing="0"><tr>' +
			'<td class="firstColumn"><a href="#"><img src="'+ img +'" width="'+ smallWidth +'" height="'+ smallHeight +'" /></a></td>' +
			'<td valign="top"><p class="itemTitle">'+ title +'</p>' +
			'<p class="clipId">'+clipId+'</p>' +
			'<p class="info">'+ info +'</p></td>' +
			'</tr></table>';
	}
	
	return html;
}

/*
	centerAtObject()
	
	scrolls to an element so it gets in the 
	middle of the screen vertically
	
*****************************************************/

function centerAtObject(object, callback) {

	var target = $(object);
	
	// calculate where to scroll
	var targetOffset = target.offset().top - $(window).height() / 2 + target.height() / 2;
	
	if(callback === undefined) {
		$('html,body')
			.animate({scrollTop: targetOffset}, 0);
	} else {
		$('html,body')
			.animate({scrollTop: targetOffset}, 0, 'linear', callback);		
	}
}

/*
	lights()
	
	Turns the light off/on around the video
	
*****************************************************/

function lights(on) {

	if(on === undefined) on = false;
	
	var speed = 900; // fade speed
	
	if(on) { // turn on the lights

		var div = $('#lightsOut');
		div .stop()
			.fadeOut(speed, function() {
				div.remove();
			});
			
	} else { // turn off the lights

		$('<div id="lightsOut" />').appendTo('body'); // create semi-transparent div
		var div = $('#lightsOut');	// make shortcut

		// make sure it covers the whole page
		div.height($(document).height());
		div.width($(document).width());
		div.animate({opacity:0}, 0); // make sure opacity is zero before fading
		
		// fade in
		div	.stop()
			.fadeTo(speed, 0.5);
		
		// attach function for turning on lights to div.click event
		$('#lightsOut').click( function() {
			if($('#lightsOut').length) {
			lights(true);
			return false;
			}
		});

	}
}