/**
 * @fileOverview Vplayer | HTML5 Video Player
 * @author Abid Omar
 * @version 1.0
 * @description
 *          <p>
 *          Vplayer is an HTML5 Video Player. It's simple and minimalistic.<br>
 *          It has all the functionalities that you might need for your videos
 *          (FullScreen, Sharing, Video Gallery, Progress Bar, Sleek
 *          Animation...)
 *          </p>
 */

/**
 * Vplayer Class
 * 
 * @description Creates a new Vplayer Video Player
 * @constructor
 * @param {String}
 *            videoID
 *            <p>
 *            The Video element ID attribute.
 *            </p>
 * @param {Object}
 *            param
 *            <p>
 *            Parameters of the Vplayer instance
 *            </p>
 *            <p>
 *            <h2>Options</h2>
 *            <ul>
 *            <li><strong>autoplay</strong>{Bool}: Automatically start playing
 *            the video.</li>
 *            <li><strong>preload</strong>{Bool}: Preload the video. Dismissed
 *            if autoplay is enabled.</li>
 *            <li><strong>sharing</strong>{String}: URL of the page to share.</li>
 *            <li><strong>fullscreen</strong>{Bool}: Enable full screen mode.</li>
 *            <li><strong>logo</strong>{string}: URL of the logo to be
 *            displayed.</li>
 *            <li><strong>gallery</strong>{object/Bool}: Video Gallery
 *            (displayed in the end)
 *            <p>
 *            Syntax: <i>number</i>: { videos } <br>
 *            The videos object is a combination of video types and links. Check
 *            the examples for more information on the object structure.
 *            </p>
 *            </li>
 *            </ul>
 *            </p>
 */
function Vplayer(videoID, param) {
	/*
	 * this refers to the Vplayer instance
	 */
	var that = this;

	/**
	 * Step 1: Default Values
	 */
	/*
	 * Default Parameters
	 */
	var defaults = {
		'preload' : false,
		'autoplay' : false,
		'sharing' : false,
		'download' : true,
		'fullscreen' : true,
		'gallery' : false
	};
	/*
	 * Generate the Parameters
	 */
	/**
	 * @type Parameters of the Vplayer Instance
	 */
	that.param = $.extend({}, defaults, param);

	/**
	 * Step 2: Set the video Element Settings
	 */
	that.$videoElement = $('#' + videoID);
	that.videoElement = $('#' + videoID)[0];
	that.setup.videoElement(that);
	that.interval = {};

	/**
	 * Step 3: Define the Vplayer Skelton
	 */
	that._vplayer = that.setup.videoSkelton(that);
	step5();
	/*
	 * Check if the Video Metadata is ready
	 */
	if (that.$videoElement[0].readyState === 4) {
		step4();
	} else {
		that.$videoElement.bind('loadedmetadata', step4);
	}
	/**
	 * This function was made for cross-browser compatibility between FireFox
	 * and Google Chrome
	 */
	function step4() {
		/*
		 * Vplayer Container Style
		 */
		that._vplayer.style = that.setup.videoStyle(that);
		/*
		 * Show Buffering Status
		 */
		that.addons.buffer.timer(that);

		/**
		 * Step 4: Events
		 */

		/*
		 * Video Player Events
		 */
		that.Events();

		/*
		 * Sharing Plugin
		 */
		if (that.param.sharing !== false) {
			that._vplayer.toolbar.$share = that.functions.share(that);
		} else {
			that._vplayer.toolbar.buttons.share.hide();
		}

		if (that.param.gallery !== false) {
			that.addons.gallery.loadlist(that);
			that._vplayer.toolbar.$gallery = that.functions.gallery(that);
		}

		if (that.param.fullscreen === false) {
			that._vplayer.toolbar.buttons.fullscreen.hide();
		}

		if (that.param.download === false) {
			that._vplayer.toolbar.buttons.download.hide();
		}

		/*
		 * Hide the player
		 */
		that.functions.animation.hide(that);
		step5();
	}

	function step5() {
		/*
		 * PreLoad the Video if defined
		 */
		if (that.param.preload === true) {
			that.$videoElement.attr('AUTOBUFFER', 'TRUE');
		}
		/*
		 * Auto Play the Video if defined
		 */
		if (that.param.autoplay === true) {
			that.$videoElement.attr('AUTOPLAY', 'TRUE');
		}
	}
}

/**
 * @type Vplayer Setup
 * @description
 *       <p>
 *       Setup the Vplayer Video player
 *       <h2>Functions</h2>
 *       <ul>
 *       <li><strong>videoElement</strong>: Setup settings for the video
 *       element</li>
 *       <li><strong>videoSkelton</strong>: Wrap the video element inside a
 *       skelton</li>
 *       <li><strong>videoStyle</strong>: Style the video skelton with CSS and
 *       animations</li>
 *       </ul>
 *       </p>
 */
Vplayer.prototype.setup = {
	videoElement : function(that) {
		/*
		 * Remove the default controls
		 */
		that.$videoElement.removeAttr('controls');
	},
	videoSkelton : function(that) {
		/*
		 * To Change: #LOGO
		 */
		/*
		 * Define the Vplayer
		 */
		that.$videoElement.wrap('<div class="vplayer-container"></div>');
		var $vplayer = that.$videoElement.parent();
		/*
		 * Define the toolbar and items
		 */
		var $toolbar = $('<div></div>').addClass('vplayer-toolbar');
		var $ul_toolbar = $('<ul></ul>');
		$ul_toolbar
				.append('<li class="vplayer-download"><img src="script/vplayer/files/download.png"></li>');
		$ul_toolbar
				.append('<li class="vplayer-share"><img src="script/vplayer/files/share.png"></li>');
		$ul_toolbar
				.append('<li class="vplayer-fullscreen"><img src="script/vplayer/files/fullscreen.png"></li>');
		$toolbar.append($ul_toolbar);
		/*
		/*
		 * Define the player
		 */
		var $player = $('<div></div>').addClass('vplayer-player');
		/*
		 * Player buttons
		 */
		var $player_buttons = $('<div></div>').addClass('vplayer-buttons');
		var $pb_ul = $('<ul></ul>');
		$pb_ul
				.append('<li class="vplayer-play"><img src="script/vplayer/files/play.png"></li>');
		$pb_ul
				.append('<li class="vplayer-pause" style="display:none"><img src="script/vplayer/files/pause.png"></li>');
		$player_buttons.append($pb_ul);
		/*
		 * Player Progressbar
		 */
		var $player_progressbar = $('<div></div>')
				.addClass('vplayer-progressbar');
		$player_progressbar
				.append('<span class="vplayer-play-progress"></span>');
		$player_progressbar.append('<span class="vplayer-buffering"></span>');
		/*
		 * Player Timer
		 */
		var $player_timer = $('<div></div>').addClass('vplayer-timer');
		$player_timer.append('<span>00:00</span>')
		/*
		 * Player Sound
		 */
		var $player_sound = $('<div></div>').addClass('vplayer-sound');
		$player_sound.append('<img src="script/vplayer/files/sound.png">');
		$player_sound
				.append('<div class="vplayer-sound-meter"><div class="vplayer-scroller"><span class="vplayer-slider"></div></div></div>');
		/*
		 * Append the sub-element to player
		 */
		$player.append($player_buttons).append($player_progressbar)
				.append($player_timer).append($player_sound);

		/*
		 * Step 2: Add elements to the wrapper DIV
		 */
		$vplayer.append($toolbar);
		$vplayer.append($player);

		/*
		 * Step 3: Return the skelton
		 */

		var vplayer_skelton = {
			container : $vplayer,
			toolbar : {
				container : $('.vplayer-toolbar', $vplayer),
				buttons : {
					download : $('.vplayer-download', $vplayer),
					share : $('.vplayer-share', $vplayer),
					fullscreen : $('.vplayer-fullscreen', $vplayer)
				}
			},
			player : {
				container : $('.vplayer-player', $vplayer),
				buttons : {
					container : $('.vplayer-player .vplayer-buttons', $vplayer),
					play : $('.vplayer-play', $vplayer),
					pause : $('.vplayer-pause', $vplayer)
				},
				progressbar : {
					container : $('.vplayer-progressbar', $vplayer),
					progress : $('.vplayer-progressbar .vplayer-play-progress',
							$vplayer),
					buffering : $('.vplayer-buffering', $vplayer)
				},
				timer : $('.vplayer-timer span', $vplayer),
				sound : {
					container : $('.vplayer-sound', $vplayer),
					img : $('.vplayer-sound img', $vplayer),
					scroller : $('.vplayer-sound .vplayer-sound-meter',
							$vplayer),
					slider_container : $('.vplayer-sound .vplayer-scroller',
							$vplayer),
					slider : $('.vplayer-sound .vplayer-slider', $vplayer)
				}
			}

		}

		return vplayer_skelton;

	},
	videoStyle : function(that) {
		/*
		 * Checks if the height and width attributes are set
		 */
		if (that.$videoElement.attr('height')
				&& that.$videoElement.attr('width')) {
			var v_height = that.$videoElement.attr('height');
			var v_width = that.$videoElement.attr('width');
		} else {
			/*
			 * Get the height and width of the Video Element
			 */
			var v_height = that.$videoElement.height();
			var v_width = that.$videoElement.width();
		}
		/*
		 * Set the height and width of the player
		 */
		that._vplayer.container.css('height', v_height);
		that._vplayer.container.css('width', v_width);
		/*
		 * Get the width of the player bar
		 */
		var w_player = parseInt(that._vplayer.player.container.width(), 10);
		w_player -= 170;
		that._vplayer.player.progressbar.container.css('width', w_player);
		var v_style = {
			height : v_height,
			width : v_width,
			fullscreen : false,
			progress_width : w_player
		};
		return v_style;
	}
}

/**
 * @type Vplayer Functions
 * @description
 *       <p>
 *       Later
 *       </p>
 */
Vplayer.prototype.functions = {
	player : {
		/**
		 * Set the time to the Timer
		 * 
		 * @param {object}
		 *            that The current Vplayer instance
		 * @param {string}
		 *            time Video Play time
		 */
		timer : function(that, time) {
			that._vplayer.player.timer.text(time);
		},
		play : function(that) {
			that.videoElement.play();
		},
		pause : function(that) {
			that.videoElement.pause();
		},
		updatetimer : function(that) {
			/*
			 * Get time in Minutes and Seconds
			 */
			var m = 0;
			var i = parseInt(that.videoElement.currentTime, 10);
			if (i > 60) {
				m = parseInt(i / 60, 10);
				i = i % 60;
			}
			if (i < 10) {
				i = '0' + i;
			}
			if (m < 10) {
				m = '0' + m;
			}
			var time = m + ':' + i;
			that.functions.player.timer(that, time);
		},
		updateprogressbar : function(that) {
			var seconds = that.videoElement.currentTime;
			var progressbar_width = parseInt(
					that._vplayer.player.progressbar.container.css('width'), 10)
					- 4;
			var pb_ratio = progressbar_width / that.videoElement.duration;
			var play_progress = seconds * pb_ratio;
			that._vplayer.player.progressbar.progress.css('width',
					play_progress + 'px');
		},
		timeseek : function(that, point) {
			// Video Duration
			var l_vid = that.videoElement.duration;
			// Progress Bar Width
			var l_bar = parseInt(that._vplayer.player.progressbar.container
							.css('width'), 10);
			// Ratio
			var l_ratio = l_vid / l_bar;
			// Click Horizontal position
			var l_pos = point;
			// Time Seek point
			var time_seek = l_pos * l_ratio;
			// Return the Time point
			return time_seek;
		},
		sound : function(that, volume) {
			that.videoElement.volume = volume;
		}
	},
	toolbar : {
		download : function(that) {
			var downloadURL = that.videoElement.currentSrc;
			window.open(downloadURL);
		},
		fullscreen : function(that) {
			if (that._vplayer.style.fullscreen === false) {
				/*
				 * Turn fullscreen Mode
				 */
				that._vplayer.container.addClass('video-fullscreen');
				that.$videoElement.css({
							'height' : that._vplayer.container.height(),
							'width' : that._vplayer.container.width()
						});
				/*
				 * Resize the progress bar
				 */
				var w_player = parseInt(that._vplayer.player.container.width(),
						10);
				w_player -= 170;
				that._vplayer.player.progressbar.container.css('width',
						w_player);
				that.functions.player.updateprogressbar(that);
				/*
				 * Resize the progressbar on window resize
				 */
				$(window).resize(function() {
					var w_player = parseInt(that._vplayer.player.container
									.width(), 10);
					w_player -= 170;
					that._vplayer.player.progressbar.container.css('width',
							w_player);
					that.functions.player.updateprogressbar(that);
					that.$videoElement.css({
								'height' : that._vplayer.container.height(),
								'width' : that._vplayer.container.width()
							});
				});

				/*
				 * Save to the Global Object
				 */
				that._vplayer.style.fullscreen = true;
			} else {
				/*
				 * Return to the normal Mode
				 */
				that._vplayer.container.removeClass('video-fullscreen');
				that.$videoElement.css({
							'height' : that._vplayer.style.height,
							'width' : that._vplayer.style.width
						});
				that._vplayer.player.progressbar.container.css('width',
						that._vplayer.style.progress_width);
				that.functions.player.updateprogressbar(that);
				/*
				 * Save to the Global Object
				 */
				that._vplayer.style.fullscreen = false;
			}
		}
	},
	share : function(that) {
		/*
		 * Create a new Window
		 */
		var css = {
			height : '78px',
			width : '280px'
		};
		var $share = that.addons.window(that, 'v-share', css);

		/*
		 * Add the sharing icons list
		 */
		var $ul = $('<ul><li></li></ul>');
		$ul
				.append('<li><img class="twitter" src="script/vplayer/files/share/twitter.png"></li>');
		$ul
				.append('<li><img class="facebook" src="script/vplayer/files/share/facebook.png"></li>');
		$ul
				.append('<li><img class="digg" src="script/vplayer/files/share/digg.png"></li>');
		$ul
				.append('<li><img class="stumbleupon" src="script/vplayer/files/share/stumbleupon.png"></li>');
		$ul
				.append('<li><img class="delicious" src="script/vplayer/files/share/delicious.png"></li>');
		$ul
				.append('<li><img class="reddit" src="script/vplayer/files/share/reddit.png"></li>');
		$ul
				.append('<li><img class="email" src="script/vplayer/files/share/email.png"></li>');
		$share.append('<h2>Share this video</h2>');
		$share.append($ul);
		// Append a transparent background
		$share
				.append('<div style="position:absolute;height:78px;width:280px;opacity:0.7;background-color: black;top:0;left:0;z-index:-1"></div>');
		// Animate the icons
		var $img = $('img', $share);
		$img.css('opacity', '0.5');
		$img.hover(function() {
					$(this).animate({
								opacity : 1
							})
				}, function() {
					$(this).animate({
								opacity : 0.5
							})
				});

		/*
		 * Sharing Function: Wrap the icons with A element
		 */
		// Default Data
		var defaults = {
			status : '',
			url : location.href,
			title : $('title').text()
		};
		defaults.status = 'I just found out this amazing video, watch it here '
				+ defaults.url;
		var params = $.extend({}, defaults, that.param.sharing);
		// Wrap the icons
		$('.twitter', $share).wrap('<a href="http://twitter.com/?status='
				+ params.status + '" target="_blank"></a>');
		$('.facebook', $share)
				.wrap('<a href="http://www.facebook.com/share.php?u='
						+ params.url + '" target="_blank"></a>');
		$('.digg', $share).wrap('<a href="http://digg.com/submit?phase=2&url='
				+ params.url + '&title=' + params.title
				+ '" target="_blank"></a>');
		$('.stumbleupon', $share)
				.wrap('<a href="http://www.stumbleupon.com/submit?url='
						+ params.url + '&title=' + params.title
						+ '" target="_blank"></a>');
		$('.delicious', $share).wrap('<a href="http://del.icio.us/post?url='
				+ params.url + '&title=' + params.title
				+ '" target="_blank"></a>');
		$('.reddit', $share).wrap('<a href="http://reddit.com/submit?url='
				+ params.url + '&title=' + params.title
				+ '" target="_blank"></a>');
		$('.email', $share).wrap('<a href="mailto:?subject=' + params.title
				+ '&body=' + params.url + '"></a>');

		/*
		 * Hide the Sharing window and return
		 */
		$share.css('opacity', 0).hide();
		return $share;
	},
	gallery : function(that) {
		/*
		 * Create a new Window
		 */
		var css = {
			height : '220px',
			width : '380px'
		};
		var $gallery = that.addons.window(that, 'v-gallery', css);

		/*
		 * Add a reply button
		 */
		$gallery.append(that.addons.gallery.replybutton(that));

		/*
		 * Add the Video Gallery
		 */
		$gallery.append(that.addons.gallery.slider(that));

		/*
		 * Return and Hide the Gallery
		 */
		$gallery.css('opacity', 0).hide();
		return $gallery;

	},
	animation : {
		show : function(that) {
			that._vplayer.toolbar.container.animate({
						right : '10'
					}).dequeue();
			that._vplayer.player.container.slideDown()
		},
		hide : function(that) {
			that._vplayer.toolbar.container.animate({
						right : '-50'
					});
			that._vplayer.player.container.slideUp();
		},
		rehide : ''
	}
}

/**
 * Define the events for all the video Elements
 */
Vplayer.prototype.Events = function() {
	// Refer to the Video Element
	var that = this;

	/**
	 * Video Events
	 */
	// Video (Play)
	that.$videoElement.bind('play', function() {
				/*
				 * Update the Timer and Progress Bar
				 */
				that.interval.timer = setInterval(function() {
							that.functions.player.updatetimer(that);
						}, 1000);
				that.interval.progressbar = setInterval(function() {
							that.functions.player.updateprogressbar(that);
						}, 50);
				/*
				 * Update buttons
				 */
				that._vplayer.player.buttons.play.hide();
				that._vplayer.player.buttons.pause.show();

			});
	// Video (Pause)
	that.$videoElement.bind('pause', function() {
				/*
				 * Update the Timer and Progress Bar
				 */
				clearInterval(that.interval.timer);
				/*
				 * Update the Progress Bar
				 */
				clearInterval(that.interval.progressbar);
				/*
				 * Update Player Buttons
				 */
				that._vplayer.player.buttons.pause.hide();
				that._vplayer.player.buttons.play.show();
			});
	// Video (End)
	that.$videoElement.bind('ended', function() {
				/*
				 * Update the Timer
				 */
				clearInterval(that.interval.timer);
				that.functions.player.timer(that, '00:00');
				/*
				 * Update the Progress Bar
				 */
				clearInterval(that.interval.progressbar);
				that._vplayer.player.progressbar.progress.css('width', '0px');
				/*
				 * Update Player Buttons
				 */
				that._vplayer.player.buttons.pause.hide();
				that._vplayer.player.buttons.play.show();
				/*
				 * Re-Init the Video
				 */
				that.videoElement.currentTime = 0;
				that.videoElement.pause();
				/*
				 * Display the gallery
				 */
				// Center the window in the screen
				var left = (that._vplayer.container.width() - parseInt(
						that._vplayer.toolbar.$gallery.width(), 10))
						/ 2;
				var top = (that._vplayer.container.height() - parseInt(
						that._vplayer.toolbar.$gallery.height(), 10))
						/ 2;
				that._vplayer.toolbar.$gallery.css({
							left : left,
							top : top
						});
				that._vplayer.toolbar.$gallery.show().animate({
							opacity : 1
						});
			});
	// Video Skelton Animation
	that._vplayer.container.bind('mouseenter', function() {
				that.functions.animation.show(that);
			});
	that._vplayer.container.bind('mouseleave', function() {
				that.functions.animation.hide(that);
			});
	that._vplayer.container.bind('mousemove', function() {
				clearTimeout(that.functions.animation.rehide);
				that.functions.animation.show(that);
				that.functions.animation.rehide = setTimeout(
						that.functions.animation.hide, 3500, that);
			});

	/**
	 * Control Events
	 */

	/*
	 * Play/Pause buttons
	 */
	that._vplayer.player.buttons.play.click(function() {
				/*
				 * Start Playing the Video
				 */
				that.functions.player.play(that);
			});
	that._vplayer.player.buttons.pause.click(function() {
				/*
				 * Start Playing the Video
				 */
				that.functions.player.pause(that);
			});
	/*
	 * Sound Scroller
	 */
	that._vplayer.player.sound.img.bind('mouseenter', function() {
				/*
				 * Show Scroller
				 */
				that._vplayer.player.sound.scroller.show();
			});
	that._vplayer.player.sound.container.bind('mouseleave', function() {
				/*
				 * Hide Scroller
				 */
				that._vplayer.player.sound.scroller.hide();
			});
	function findPos(x) {
		var top = x.offsetTop;
		while (x = x.offsetParent) {
			top += x.offsetTop;
		}
		return top;
	}
	that._vplayer.player.sound.slider_container.bind('click', function(e) {
				var layerx = e.pageY
						- (findPos(that._vplayer.player.sound.scroller[0]) + 17);
				if (layerx < 0) {
					layerx = 0;
				}
				if (layerx > 50) {
					layerx = 50;
				}
				that._vplayer.player.sound.slider.css('top', layerx);
				// Set the Video Volume
				var volume = Math.abs((layerx / 50) - 1);
				that.functions.player.sound(that, volume);
			});
	that._vplayer.player.sound.slider.bind('mousedown', function(e) {
		function unbind() {
			that._vplayer.player.sound.slider.unbind('mouseup');
			that._vplayer.player.sound.scroller.unbind('mousemove');
		}
		that._vplayer.player.sound.scroller.bind('mousemove', function(e) {
					var layerx = e.pageY
							- (findPos(that._vplayer.player.sound.scroller[0]) + 17);
					if (layerx < 0) {
						layerx = 0;
					}
					if (layerx > 50) {
						layerx = 50;
					}
					that._vplayer.player.sound.slider.css('top', layerx);
					// Set the Video Volume
					var volume = Math.abs((layerx / 50) - 1);
					that.functions.player.sound(that, volume);
				});
		that._vplayer.player.sound.slider.bind('mouseout', function(e) {
					unbind();
				});
		that._vplayer.player.sound.slider.bind('mouseup', function(e) {
					unbind();
				});
	});
	/*
	 * ProgressBar Controller
	 */
	that._vplayer.player.progressbar.container.bind('mousedown', function(e) {
				/*
				 * Mouse Down: Move the pointer to the selected point
				 */
				that._vplayer.player.progressbar.progress.css('width', e.layerX
								- 2);
				that.videoElement.currentTime = that.functions.player.timeseek(
						that, e.layerX);
				that.videoElement.pause();
				/*
				 * Mouse Move: Move the ProgressBar and the Pointer
				 */
				that._vplayer.player.progressbar.container.bind('mousemove',
						function(e) {
							that._vplayer.player.progressbar.progress.css(
									'width', e.layerX - 2);
							that.videoElement.currentTime = that.functions.player
									.timeseek(that, e.layerX);
						});
				/*
				 * Mouse Up: Play the video
				 */
				that._vplayer.player.progressbar.container.bind('mouseup',
						function() {
							// Resume Playing
							that.videoElement.play();
							// Unbind Events
							that._vplayer.player.progressbar.container
									.unbind('mousemove');
							that._vplayer.player.progressbar.container
									.unbind('mouseup');
						});
			});
	/**
	 * Toolbar Events
	 */
	/*
	 * Download Button
	 */
	that._vplayer.toolbar.buttons.download.click(function() {

				that.functions.toolbar.download(that);
			});
	/*
	 * Share Button
	 */
	that._vplayer.toolbar.buttons.share.toggle(function() {
				/*
				 * Reload CSS Parameters
				 */
				// Center the window in the screen
				var left = (that._vplayer.container.width() - parseInt(
						that._vplayer.toolbar.$share.width(), 10))
						/ 2;
				var top = (that._vplayer.container.height() - parseInt(
						that._vplayer.toolbar.$share.height(), 10))
						/ 2;
				that._vplayer.toolbar.$share.css({
							left : left,
							top : top
						});
				that._vplayer.toolbar.$share.show().animate({
							opacity : 1
						});
				/*
				 * Bind EveryWhere Hiding
				 */
				that._vplayer.container.bind('click', function() {
							that._vplayer.toolbar.buttons.share
									.trigger('click');
							that._vplayer.container.unbind('click');
						});
			}, function() {
				that._vplayer.toolbar.$share.animate({
							opacity : 0
						}, function() {
							$(this).hide();
						});
				that._vplayer.container.unbind('click');
			});
	/*
	 * FullScreen Button
	 */
	that._vplayer.toolbar.buttons.fullscreen.click(function() {
				that.functions.toolbar.fullscreen(that);
			});

}

/**
 * @type Vplayer Addons
 * @descrpition
 *       <p>
 *       Later
 *       </p>
 */
Vplayer.prototype.addons = {
	/**
	 * Insert a new Box inside the Video Player
	 * 
	 * @param {object}
	 *            that
	 * @param {string}
	 *            ID Window Identifier
	 * @param {object}
	 *            param Window Parameters
	 * @return The window jQuery object
	 */
	window : function(that, ID, param) {
		/*
		 * Creates the new Window Object
		 */
		var $win = $('<div></div>');
		/*
		 * Assign the ID
		 */
		$win.attr('id', ID);
		/*
		 * Assign the param as CSS properties
		 */
		// Center the window in the screen
		param.left = (that._vplayer.container.width() - parseInt(param.width,
				10))
				/ 2;
		param.top = (that._vplayer.container.height() - parseInt(param.height,
				10))
				/ 2;
		$win.css(param);
		/*
		 * Insert the window
		 */
		$win.appendTo(that._vplayer.container);
		/*
		 * Return the window instance
		 */
		return $win;
	},
	gallery : {
		replybutton : function(that) {
			var $replybutton = $('<a href="#">Reply</a>');
			$replybutton.addClass('replybutton');
			$replybutton.click(function() {
						/*
						 * Hide the Gallery Window
						 */
						that._vplayer.toolbar.$gallery.animate({
									opacity : 0
								}, function() {
									$(this).hide();
								});
						/*
						 * Play the Video
						 */
						that.functions.player.play(that);
						return false;
					});
			return $replybutton;
		},
		slider : function(that) {
			/*
			 * Slider Cracass
			 */
			var $slider = $('<div></div>');
			$slider.addClass('slider');
			/*
			 * Slider Navigation
			 */
			var $next = $('<a href="#" class="next">&gt;</a>');
			var $previous = $('<a href="#" class="previous">&lt;</a>');
			$slider.append($next).append($previous);
			/*
			 * Video Slider
			 */
			var $bvslider = $('<div></div>');
			$bvslider.addClass('bvslider');
			var $vslider = $('<ul></ul>');
			$vslider.addClass('vslider');
			// short notation
			var _gallery = that.param.gallery;
			var _items = 0;
			for (item in _gallery) {
				var title = _gallery[item].title;
				var url = _gallery[item].url;
				var thumb = _gallery[item].thumb;
				$vslider.append('<li><a href="' + url + '"><img src="' + thumb
						+ '" /><span class="title">' + title
						+ '</span></a></li>');
				_items++;
			}
			$bvslider.append($vslider);
			$slider.append($bvslider);
			/*
			 * Binding Events
			 */
			$next.click(function() {
						var _left = parseInt($vslider.css('left'), 10);
						if (_left > ((_items - 3) * 94 * (-1))) {
							$vslider.animate({
										left : (_left - 94)
									});
						}
						return false;
					});
			$previous.click(function() {
						var _left = parseInt($vslider.css('left'), 10);
						if (_left < 0) {
							$vslider.animate({
										left : (_left + 94)
									});
						}

						return false;
					});
			/*
			 * Return slider
			 */
			return $slider;
		},
		loadlist : function(that) {
			$.ajaxSetup({
						cache : false
					});
			if (typeof(that.param.gallery) === 'string') {
				$.ajax({
							async : false,
							url : that.param.gallery,
							dataType : 'json',
							success : function(json, status) {
								if (status === 'success') {
									if (json) {
										that.param.gallery = json;
									}
								}
							}
						});
			}
		}
	},
	buffer : {
		timer : function(that) {
			if (that.videoElement.buffered) {
				that.buffering = setInterval(function() {

							var loaded = that.videoElement.buffered.end(0)
									/ that.videoElement.duration;
							that.addons.buffer.display(that, parseInt(loaded
													* 100, 10));
							if (loaded === 1) {
								clearInterval(that.buffering);
								that.addons.buffer.display(that, 'loaded');
							}

						}, 500);
			}
		},
		display : function(that, loaded) {
			if (loaded === 'loaded') {
				that._vplayer.player.progressbar.buffering.text('');
			} else {
				that._vplayer.player.progressbar.buffering.text(loaded + '%');
			}
		}
	}
}