/**
 * @author Vitaly
 */

var media = new Array();
var makingRequest = false;
var currentSection = 'works';

$(document).ready(
	function() {
		bindListeners();
		getMedia(currentSection);
	}
);

/**
 * @param {String} section Section to show
 */
function getMedia(section) {
	makingRequest = true;
	$('#sub-nav .btn').css('opacity', 0.3);
	$('#content .indicator').show();
	$.getJSON('/lib/media-local.php', {controller: 'getMedia', section: section, rand: Math.floor(Math.random()*101)}, function(data) {
		showMedia(data);
	});
}

/**
 * Adds items to the #media-list by parsing the data in JSON format
 * @param {} data Playlist items in JSON format
 */
function showMedia(data) {
	var html = '';
	$('#content .indicator').is(':visible') ? $('#content .indicator').hide() : null;
	$.each(data, function(index, item) {
		media.push(item);
		var first = (index % 4 === 0) ? ' first' : '';
		html +=	'<div class="item-wrapper' + first + '">' +
					'<img src="/images/media-icon-' + item.media + '.gif" class="icon ' + item.media + '" />' +
					'<a href="#' + item.id + '" title="' + item.title + '" id="' + item.id + '" class="item">' +
						'<div class="img"><img src="' + item.thumbnail_url  + '" width="' + item.thumbnail_width + '" height="' + item.thumbnail_height + '" /></div>' +
						'<p>' + item.title + '</p>' +
					'</a>' +
				'</div>';
	});
	$('#media-list').prepend(html);
	$('#sub-nav .btn').css('opacity', 1.0);
	makingRequest = false;
	$('#media-list').slideDown(350);
}

/**
 * Binds event listeners
 */
function bindListeners() {
	$('#sub-nav').click(function(/* Event */ e) {
		e.preventDefault();
		var elm = $(e.target);
		if (elm.is('a') && !makingRequest) {
			var section = '';
			if (elm.is('.works')) {
				section = 'works';
			}
			if (elm.is('.events')) {
				section = 'events';
			}
			if (section !== currentSection) {
				elm.addClass('selected');
				$('#sub-nav :not(.' + section + ')').removeClass('selected');
				currentSection = section;
				$('#media-list').hide();
				$('#media-list .item-wrapper').remove();
				getMedia(section);
			}
		}
		return false;
	});
	$('#media-list').click(function(/* Event */ e) {
		e.preventDefault();
		var elm = $(e.target);
		if (elm.parent().is('a')) {
			var id = elm.parent().attr('id');
		}
		if (elm.parent().parent().is('a')) {
			var id = elm.parent().parent().attr('id');
		}
		if (id) {
			var item = $.grep(media, function(i) {
				return i.id === id;
			});
			if (item[0].media === 'video') {
				$('#media-player .title').html(item[0].title);
				$('#media-player .c').html(generateYouTubePlayerHTML(id));
				$('#media-player').jqmShow();
			}
			if (item[0].media === 'photo') {
				$('#media-player .title').html(item[0].title);
				$('#media-player .c').html(generatePhotoHTML(item[0].image_url, item[0].image_width, item[0].image_height));
				$('#media-player').jqmShow();
			}
		}
		return false;
	});
	$('#media-player').jqm({onHide: function(hash) {
		hash.w.hide();
		hash.w.children('.c').empty();
		hash.o.remove();
	}
	});
}

/**
 * Takes YouTube video id as a parameter and generates HTML code for embedding YouTube video player
 * @param {String} id YouTube video id
 * @return {String} HTML for embedding YouTube video player
 */
function generateYouTubePlayerHTML(id) {
	html =	'<object width="560" height="340">' +
				'<param name="movie" value="http://www.youtube.com/v/' + id + '"></param>' +
				'<param name="autoplay" value="1">' +
				'<param name="wmode" value="transparent"></param>' +
				'<embed src="http://www.youtube.com/v/' + id + '&autoplay=1" type="application/x-shockwave-flash" width="560" height="340" wmode="transparent"></embed>' +
			'</object>';
	return html;
}

/**
 * Generates HTML code for embedding image
 * @param {String} url Image URL
 * @param {String} width Image width
 * @param {String} height Image height
 * @return {String} HTML for embedding image
 */
function generatePhotoHTML(url, width, height) {
	html =	'<img src="' + url  + '" width="' + width + '" height="' + height + '" />';
	return html;
}