// JavaScript Document
var aytube4cb_enlarged_height = 420;
var aytube4cb_enlarged_width = 500;

var aytube4cb_enlarge_html = "";

dojo.require("dojo.parser"); 
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.form.Form");
dojo.require("dojo.io.iframe");
dojo.require("dijit.Tooltip"); 
dojo.require("dijit.TitlePane");

dojo.require("dijit.Dialog");

var aytube4cb_setInterval = false;

dojo.addOnLoad(function() {
	
	dojo.query("body").addClass("tundra");
	
	// if the video is playing in the dialog box, and the dialog box is closed, we want the video to stop playing.
	dojo.connect(dijit.byId("aytube4cb_enlarge"), "hide", function(e) {
		dijit.byId("aytube4cb_enlarge").setContent(aytube4cb_enlarge_html);
		if (dojo.isIE) {
			dojo.style(dojo.byId("mod_aytube4cb_youtube"), "display", "block");			
		}
	});
	
	// for IE, when the dialog box is shown, the video in the background (not inside the dialog) always shows on top.
	// so when the dialog is shown, we set it to display: none. when the dialog is hidden, we want to set it back to show.
	dojo.connect(dijit.byId("aytube4cb_selection_dialog"), "hide", function(e) {
		if (dojo.isIE) {
			dojo.style(dojo.byId("mod_aytube4cb_youtube"), "display", "block");			
		}
	});
	

	// Set the arguments			
	var aytube4cb_args = {
		outer_id: "aytube4cb_outer_container",
		display_id: "mod_aytube4cb_youtube",
		prev_id: "aytube4cb_prev",
		next_id: "aytube4cb_next",
		enlarge_id: "aytube4cb_enlarge",
		enlarge_label: "aytube4cbLarge",
		url: base_url + "index2.php?option=com_comprofiler&task=tabclass&tab=aytube4cbTab&no_html=1&format=raw",
		debug: debug
	};

	// Create a new instance of aytube4cb.cycle
	aytube4cb_youtube = new aytube4cb.cycle(aytube4cb_args);
	// Get the POST data
	dojo.xhrPost( {
		url: aytube4cb_args.url,
		handleAs: "json",
		content: {
			"userId": userId
		},
		load: function (response, ioArgs) { 
			if (response.error == "1") {
				dojo.byId("aytube4cb_outer_container").innerHTML = response.error_message;
				dojo.byId("aytube4cb_select_link").innerHTML = "";
				
				return false;
			}
			
			// Process the response and populate aytube4cb_data_array with the youtube objects
			successful_process = aytube4cb_youtube.process_youtube_information(response, ioArgs);
			if (successful_process) { // means no errors
				// Set the dimensions
				aytube4cb_youtube.set_dimensions(response);
				// Display the first video
				aytube4cb_youtube.display_video(0);
				// Display the selection button and set up the prev and next handlers only if more than 1 video
				if (response.data.length > 1) {
					// Set up the event handlers
					dojo.style("aytube4cb_prevnext", "display", "block");
					dojo.connect(aytube4cb_youtube._prev_node, 'onclick', function(evt) { aytube4cb_youtube._prev_next_handler("prev"); } );
					dojo.connect(aytube4cb_youtube._next_node, 'onclick', function(evt) { aytube4cb_youtube._prev_next_handler("next"); } );
					
					dijit.byId("aytube4cb_selection_dialog").setContent(response.selection);
					dojo.style("aytube4cb_select_link", "display", "block");
					// set up the listener for the selection
					dojo.connect(dojo.byId("aytube4cb_select_link"), "onclick", function(evt) {
						if (dojo.isIE) {
							dojo.style(dojo.byId("mod_aytube4cb_youtube"), "display", "none");
						}
						pause_player();
						dijit.byId("aytube4cb_selection_dialog").show();
					});

				}
			}
			return response;
		}
	});	

});

dojo.declare("aytube4cb.cycle", null, {

	_aytube4cb_data_array: null,
	dimensions: null,
	_error_output_node: null,
	_display_node: null,
	_prev_node: null,
	_next_node: null,
	_enlarge_node: null,
	_enlarge_label: null,
	_url: "",
	_debug: false,
	_enlarge_text: "",
	_enlarge_connector: false,

	//constructor : function(display_node, error_output_node, prev_node, next_node) {
	constructor : function(aytube4cb_args) {
		this._error_output_node = dojo.byId(aytube4cb_args.outer_id);	
		this._display_node = dojo.byId(aytube4cb_args.display_id);
		this._prev_node = dojo.byId(aytube4cb_args.prev_id);
		this._next_node = dojo.byId(aytube4cb_args.next_id);
		this._enlarge_node = dojo.byId(aytube4cb_args.enlarge_id);
		this._enlarge_label = dojo.byId(aytube4cb_args.enlarge_label);
		this._enlarge_text = dojo.byId(aytube4cb_args.enlarge_id).innerHTML;
		this._url = aytube4cb_args.url;
		this._debug = aytube4cb_args.debug;
	},


	// Get the width of the containing div (reference_container), and then sets the width and height of the internal (displaying) div accordingly, and returns 
	// the set width and height
	set_dimensions : function(response) { // example "aytube4cb_outer_container", "mod_aytube4cb_youtube"		
		var div_width = response.width;
		var div_height = 0.84 * div_width;
		if(this._debug) console.log("width and height: " + div_width + div_height);	
		// Set the height of the displaying div so it's not collapsed, so we can see the ajax-loading.gif
		this._display_node.style.height = div_height + "px";

		this.dimensions = {width: div_width, height: div_height};
	},

	// This function will process the information that is retrieved via ajax.
	// It will also populate the global array aytube4cb_data_array with the youtube data objects.
	// This function returns true if there are youtube information, and false if none.
	process_youtube_information : function(response, ioArgs) {
		
		if (response.error != 0) {
			this._error_output_node.innerHTML = response.error_message;
			return false;
		}
		var data = response.data;
		for (i=0; i<data.length; i++) {
			if(this.debug) console.log(data[i].url);
		}

		// Show the Prev and Next if data.length > 1
		if (data.length > 1) {
			dojo.style(this._prev_node.parentNode, "display", "block");
		}

		// Place the youtube data (which are objects) inside a global array 
		this._aytube4cb_data_array = data;

		return true;
	},

	// This function will display the first video in the global array aytube4cb_data_array initially.
	// It also sets up aytube4cb_enlarge.
	// It also sets up the Prev and Next hrefs to enable cycling
	display_video : function(video_number_to_show) {
		video_number_to_show = parseInt(video_number_to_show);
		var video_to_be_shown = this._aytube4cb_data_array[video_number_to_show];
		if(this._debug) console.log("video number to show: " + video_number_to_show);
		var title = this._aytube4cb_data_array[video_number_to_show].title;
		var div_width = this.dimensions.width;
		var div_height = this.dimensions.height;
		var video_html = '<object aytube4cb_video_number="' + video_number_to_show + '" id="aytube4cb_myytplayer" type="application/x-shockwave-flash" style="width:' + div_width + 'px; height:' + div_height + 'px;" data="' + video_to_be_shown.url + '&enablejsapi=1' + '&playerapiid=aytube4cb_playerapiid' + '"><param name="movie" value="' + video_to_be_shown.url + '&enablejsapi=1' + '&playerapiid=aytube4cb_playerapiid' + '" /><param name="allowScriptAccess" value="always"/></object>';
		var enlarged_video_html = '<object aytube4cb_video_number="' + video_number_to_show + '" id="aytube4cb_myytplayer_enlarged_player" type="application/x-shockwave-flash" style="display: none; width:' + aytube4cb_enlarged_width + 'px; height:' + aytube4cb_enlarged_width * 0.84 + 'px;" data="' + video_to_be_shown.url + '&enablejsapi=1' + '&playerapiid=aytube4cb_playerapiid' + '"><param name="movie" value="' + video_to_be_shown.url + '&enablejsapi=1' + '&playerapiid=aytube4cb_playerapiid' + '" /><param name="allowScriptAccess" value="always"/></object>';

		// we also set the global var aytube4cb_enlarge_html to enlarged_video_html, because if the video is playing in the 
		// enlarged window, we want to be able to clobber it when we hide the dialog box
		aytube4cb_enlarge_html = enlarged_video_html;

		// Write out the youtube video html
		this._display_node.innerHTML = video_html;

		// Show the enlarge link.
		dojo.style(this._enlarge_label, 'display', 'block');
		if(this._debug) console.log("number: " + video_number_to_show);
		
		// we cannot use this._enlarge_node as this._enlarge_node refers to dojo.by() and we need to use dijit.byId()
		dijit.byId("aytube4cb_enlarge").setContent(enlarged_video_html);
		dijit.byId("aytube4cb_enlarge").titleNode.innerHTML = title;
		
		// connect the Enlarge listener
		dojo.disconnect(this._enlarge_connector);
		this._enlarge_connector = dojo.connect(this._enlarge_label, "onclick", function(e) {
			pause_player();
			if (dojo.isIE) {
				dojo.style(dojo.byId("mod_aytube4cb_youtube"), "display", "none");
			}
			dojo.style(dojo.byId("aytube4cb_myytplayer_enlarged_player"), "display", "block");
			dijit.byId("aytube4cb_enlarge").resize({w: aytube4cb_enlarged_width + 30, h: aytube4cb_enlarged_height + 50});
			dijit.byId("aytube4cb_enlarge").show(); 
		});
		
	},

	// Stub: Event handler when Prev is clicked
	_prev_handler : function() {
		this._prev_next_handler("prev");
	},

	// Stub: Event handler when Next is clicked
	_next_handler : function() {
		this._prev_next_handler("next");
	},

	// Actual Event handler for Prev and Next 
	_prev_next_handler : function(prev_or_next) {
		if ( (prev_or_next != "prev") && (prev_or_next != "next") ) {
			if(this._debug) console.log("Neither prev or next");
			return false;
		}
		// Get current video number
		var current_video_number = dojo.attr(dojo.byId("aytube4cb_myytplayer"), "aytube4cb_video_number");
		if(this._debug) console.log("Current video showing: " + current_video_number);
		// Increment by 1 to get next video number
		if (prev_or_next == "prev") {
			video_number_to_show = parseInt(current_video_number) - 1;
			// Check if it's out of range 
			// If out of range, show the last video (aytube4cb_data_array.length)
			if (video_number_to_show < 0) {
				video_number_to_show = this._aytube4cb_data_array.length - 1;
			}
		}
		else {
			video_number_to_show = parseInt(current_video_number) + 1;
			// Check if it's out of range (compare against aytube4cb_data_array.length)
			// If out of range, show the first video
			if (video_number_to_show > (this._aytube4cb_data_array.length - 1)) {
				video_number_to_show = 0;
			}
		}

		// Call aytube4cb_display_video
		this.display_video(video_number_to_show);	
	}

});


// function that is called when the player is ready
function onYouTubePlayerReady(playerId) {
	// do nothing here.
}

// function that is called when user chooses and clicks on a video in shadowbox
function switch_video_aytube4cb(video_number) {
	aytube4cb_youtube.display_video(video_number);
	dijit.byId("aytube4cb_selection_dialog").hide();
}

// after buffering is over, the player is paused and the interval timer is cleared.
function _pause_player_after_buffering() {
	if (!dojo.byId("aytube4cb_myytplayer")) {
		return;
	}
	if (dojo.byId("aytube4cb_myytplayer").getPlayerState == undefined) {
		return;
	}
	else if (dojo.byId("aytube4cb_myytplayer").getPlayerState() != "2") 
	{ 
		// we keep trying to pause if it's not in paused mode
		dojo.byId("aytube4cb_myytplayer").pauseVideo();
		return;
	}
	else if (dojo.byId("aytube4cb_myytplayer").getPlayerState() == "2") 
	{ 
		// we clear the interval once it's paused
		clearInterval(aytube4cb_setInterval);
	}
	return;
}

// pauses the player, taking into account the fact that the player may be buffering.
function pause_player() 
{		
	if (!dojo.byId("aytube4cb_myytplayer")) 
	{
		aytube4cb_setInterval = setInterval("_pause_player_after_buffering()", 1000);
	}
	else if (aytube4cb_setInterval != null && typeof(dojo.byId("aytube4cb_myytplayer").getPlayerState) == "function") 
	{		
		if (dojo.byId("aytube4cb_myytplayer").getPlayerState() == "3") //buffering
		{				
			aytube4cb_setInterval = setInterval("_pause_player_after_buffering()", 1000);
		}
		else 
		{				
			dojo.byId("aytube4cb_myytplayer").pauseVideo();
		}
	}
	else 
	{			
		aytube4cb_setInterval = setInterval("_pause_player_after_buffering()", 1000);
	} 
}