// When document is ready
jQuery(document).ready(function($) {
	
	/**
	 * Media Browser
	 */
	$('.media-browser-wrapper').each(function() {
		
		// Variables
		var $this = $(this);
		var browser = $(this).find('.media-browser');
		var innerBrowser = browser.find('.media-browser-inner');
		var media = browser.find('.media'); // are not images but list elements li
		var maxHeight = 0;
		var current = index = hasPrev = hasNext = null;

		// Set width of inner container
		browser.css({'z-index': '100'});
		innerBrowser.css({'width': (media.length * 480) + 'px', 'z-index': '90'});
		
		// Left control, shows previous image
		var leftControl = $this.find('.media-browser-control-left');
		
		// Right control, shows next image
		var rightControl = $this.find('.media-browser-control-right');
		if (media.length > 1) {
			rightControl.show();
		}
		
		// Initialize: previous button has to be hidden
		current = browser.find('.curr');
		index = current.index();
		hasPrev = (index > 0);
		if (!hasPrev) {
			leftControl.hide();
		}
		
		// Find tallest images and set player
		media.each(function() {
			var li = $(this);
			if (li.height() > maxHeight) {
				maxHeight = li.height();
			}
			if (li.attr('data-uuid') !== undefined) {
				var $uuid = li.attr('data-uuid');
				var $url = li.attr('data-url');
				$('#' + $uuid).jwplayer({
					flashplayer: ctx + '/docroot/km/js/mediaplayer-html5-beta/player.swf',
					skin: ctx + '/docroot/km/js/mediaplayer-html5-beta/five/five.xml'
				});
			}
		});

		maxHeight = maxHeight < 360 ? 360 : maxHeight;
		
		// Set margins for all images
		media.each(function() {
			var li = $(this);
			li.find('img').css({'margin-top': Math.floor((maxHeight - li.height()) / 2) + 'px'});
		});
		
		
		/**
		 * Left click, show previous image
		 */
		leftControl.click(function () {
			//alert('left click');
			var btn = $(this);
			current = browser.find('.curr');
			index = current.index();
			hasPrev = (index > 0);
			
			if (hasPrev) {
				var items = browser.find('.media-browser-items');
				innerBrowser.animate({'margin-left': '+=480px'});
				current.removeClass('curr');
				newCurrent = media.eq(index - 1).addClass('curr');
				// Hide/show buttons
				rightControl.show();
				if(newCurrent.index() == 0)
					leftControl.hide();
			}
			
		}).mouseenter(function() {
			$(this).find('img').attr('src', ctx + '/docroot/km/imgs/left-black.png');
		})
		.mouseleave(function() {
			$(this).find('img').attr('src', ctx + '/docroot/km/imgs/left-grey.png');
		});

		
		/**
		 * Right click, show next image
		 */
		rightControl.click(function () {
			//alert('right click');
			var btn = $(this);
			current = browser.find('.curr');
			index = current.index();
			hasNext = (index + 1 < media.length);
			if (hasNext) {
				var items = browser.find('.media-browser-items');
				innerBrowser.animate({'margin-left': '-=480px'});
				current.removeClass('curr');
				newCurrent = media.eq(index + 1).addClass('curr');
				// Hide/show button images
				leftControl.show();
				if(newCurrent.index() + 1 >= media.length)
					rightControl.hide();
			}
		})
		.mouseenter(function() {
			$(this).find('img').attr('src', ctx + '/docroot/km/imgs/right-black.png');
		})
		.mouseleave(function() {
			$(this).find('img').attr('src', ctx + '/docroot/km/imgs/right-grey.png');
		});
		
		
		
	});
	
	
});