// dojo.require("dojox.html.styles");

dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");

dojo.require("dijit.Tooltip");
dijit.Tooltip.defaultPosition = ["below"];


// Media player namespace
var U2_MEDIA_PLAYER = {};
U2_MEDIA_PLAYER.collapsed = false;
U2_MEDIA_PLAYER.TRACKNAME_MAX_CHARACTERS = 43;



(function()
{
	var init = function()
	{
		// Hide the other content panes
		// dojo.query('#content-lyrics').style('opacity', '0');
		// dojo.query('#content-details').style('opacity', '0');

		setupTrackEvents();
		setupInterfaceEvents();
		truncateTrackNames();
	}

	// Find all track names and trucate them to set number of characters
	// we also add a tooltip to the long track names
	var truncateTrackNames = function()
	{
		dojo.query('li span.track', 'content-tracks').forEach(function(item)
		{
			var trackName = item.innerHTML;
			var trackLen = item.innerHTML.length;
			if (trackLen > U2_MEDIA_PLAYER.TRACKNAME_MAX_CHARACTERS) {
				item.innerHTML = trackName.substr(0, U2_MEDIA_PLAYER.TRACKNAME_MAX_CHARACTERS-3) + '...';
				// Add tooltip
				new dijit.Tooltip({
				    connectId: [item.parentNode.id],
				    label: trackName
				});
			}
		});
	}
	
	
	var setupTrackEvents = function()
	{
		dojo.query('ol li span', 'content-tracks').style("cursor","pointer");
		
		dojo.query('ol li span.track', 'content-tracks')
			.connect('onclick', function(e)
			{
				console.log('clicked track');
			});

		dojo.query('ol li span.audio', '#content-tracks')
			.connect('onclick', function(e)
			{
				var elementClicked = e.target;
				dojo.forEach(dojo.query('ol li span.audio', '#content-tracks'),
					function(item, index) {
						if(item == elementClicked) {
							playMedia(index);
							return;
						}
					});
				console.log('clicked audio');
			});

		dojo.query('ol li span.video', '#content-tracks')
			.connect('onclick', function(e)
			{
				console.log('clicked video');
			});
	}
	
	var setupInterfaceEvents = function()
	{
		onExpandPlayerClick();
		
		dojo.query('ol#purchase li')
			.style('cursor', 'pointer')
			.connect('onclick', function(e)
			{
				var link = dojo.query('a', e.target)[0];
				window.open(dojo.attr(link, 'href'));
			});
	}
	
	// Hide the player extras for expand/collapse
	var onExpandPlayerClick = function()
	{
		dojo.query('#player-size', '#header-details')
		.style("cursor","pointer")
		.connect('onclick', function(e)
		{
			var width;
			var ieWidth;
			var minWidth;
			var label;
			var labelClass;

			var yuiDoc = dojo.byId('doc4');
			// Grab all nodes we wish to hide during expand/contract
			var playerExtras = dojo.query('.player-extras');
			// var ads = dojo.query('#ads');
			// var footer = dojo.query('#ft');
			var expandButton = dojo.query(e.target);
			
			if (U2_MEDIA_PLAYER.collapsed) {
				expandButton.removeClass('expanded');
				expandButton.addClass('collapsed');

				playerExtras.style('display', 'block');

				width 	= "74.923em";
				ieWidth = "73.050em";
				minWidth = "974px";
				
				label = 'Collapse Player';
			} else {
				expandButton.removeClass('collapsed');
				expandButton.addClass('expanded');

				playerExtras.style('display', 'none');
				
				width 	= "51.308em";
				ieWidth = "50.025em";
				minWidth = "667px";
				
				label = 'Expand Player';
			}

			// Resize YUI grid custom-doc to be narrower
			// TODO is *width being set???
			dojo.attr(yuiDoc, 'style', {
				"width": 	width,
				"*width": 	ieWidth,
				"minWidth": minWidth });

			// Switch label
			e.target.innerHTML = label;
			var labelClass = (U2_MEDIA_PLAYER.collapsed) ? 'collapsed' : 'expanded';

			// TODO change width/height of pop-up window
			
			
			// var sel = dojox.html.insertCssRule('body div', 
			// 	'border:#0000FF 5px dotted !important;');
			
			U2_MEDIA_PLAYER.collapsed = !U2_MEDIA_PLAYER.collapsed;			
		});
	}
	
		

	// When DOM is ready setup events and init app
	dojo.addOnLoad(function()
	{
		init();		
	});


	// Hide these asap, do not wait for DOM to be complete
	// TODO yui has a onContentReady which guarentees just that dom element is ready, dojo has something similar??
	// dojo.query('#content-tracks').style('opacity', '0');
	// dojo.query('#content-lyrics').style('opacity', '0');
	// dojo.query('#content-details').style('opacity', '0');
	
	return {}
	
})();