var VideoLinks = (function() {
	
	var Elements = jsl.Html.Elements;
	
	var videoDisplay;
	var mask, videoContainer, videoControls, playerContainer, player, sourceLink;
	var containerControls = new jsl.Collection({ emulate: Elements.Element });
	
	var smallPlayerSize = {
		width: 177,
		height: 170
	};
	
	var links;
	
	jsl.on({
		ready: function() {
			
			var videoLinks = jsl.document.get('videoLinks');
			videoDisplay = jsl.document.get('videoDisplay');
			
			var vdX = videoDisplay.styles.getDimensions();
			var vcMarginLeft = Math.round(vdX.left.toPixels() / 2) - 182;
			
			mask = new Elements.Div({
				attach: jsl.document.body,
				styles: {
					position: 'fixed',
					top: 0,
					left: 0,
					width: '100%',
					height: '100%',
					background: '#000',
					display: 'none'
				},
				on: {
					show: function() {
						this.styles.set({
							opacity: 0
						});
						this.fx.fade({
							opacity: .6
						});
					}
				}
			});
			
			videoContainer = new Elements.Div({
				attach: jsl.document.body,
				id: 'videoContainer',
				styles: {
					position: 'absolute',
					zIndex: 1001,
					top: vdX.top + 18,
					left: '50%',
					marginLeft: vcMarginLeft,
					height: 143,
					overflow: 'hidden'
				},
				children: [
					videoControls = new VideoControls(),
					addContainerControls(new Elements.Div({
						styles: {
							textAlign: 'right'
						},
						children: [
							new Elements.A({
								text: 'Close',
								on: {
									click: function() {
										mask.hide();
										videoContainer.styles.set({
											top: vdX.top + 18,
											marginTop: 0,
											marginLeft: vcMarginLeft,
											width: smallPlayerSize.width,
											height: 143,
											padding: 0,
											background: 'transparent'
										});
										player.styles.set(smallPlayerSize);
										containerControls.hide();
										videoControls.show();
									}
								}
							})
						]
					})),
					playerContainer = new Elements.Div(),
					addContainerControls(new Elements.Div({
						styles: {
							textAlign: 'center'
						},
						children: [
							new Elements.Span({
								text: 'Source: '
							}),
							sourceLink = new Elements.A({
								target: '_blank'
							})
						]
					}))
				]
			});
			
			sourceLink.dom.setAttribute('plugin', 'false');
			
			videoControls.on({
				fullsize: function() {
					var bodyX = jsl.document.body.styles.getDimensions();
					mask.show();
					videoControls.hide();
					containerControls.show();
					videoContainer.styles.set({
						marginTop: 0,
						marginLeft: 0,
						padding: '1px 10px',
						background: '#ccc'
					});
					videoContainer.fx.move({
						top: 150,
						left: bodyX.width / 2 - 300,
						width: 600,
						height: 440,
						on: {
							done: function() {
								player.styles.set({ width: 600, height: 400 });
								videoContainer.styles.set({
									left: '50%',
									marginLeft: -300
								});
							}
						}
					});
				}
			});
			
			links.forEach(function(u) {
				new Elements.Div({
					attach: videoLinks,
					children: [
						new Elements.A({
							text: u.getTitle(),
							on: {
								click: function() {
									attachPlayer(u, true);
								}
							}
						})
					]
				});
			});
			
			attachPlayer(links[0], false);
			
			containerControls.hide();
			
		}
	});
	
	function attachPlayer(videoLink, autoplay) {
		player = videoLink.getElement(autoplay);
		playerContainer.empty();
		player.styles.set(smallPlayerSize);
		player.attach(playerContainer);
		videoControls.setPlayer(player, videoLink.playControls)
		sourceLink.setText(videoLink.sourceUrl);
		sourceLink.setUrl(videoLink.sourceUrl);
	}
	
	function addContainerControls() {
		containerControls.pushAll(arguments);
		return new jsl.Html.Fragment({
			children: arguments
		});
	}
	
	return {
		
		setLinks: function(object) {
			
			var r = new jsl.Collection();
			
			jsl.Collection.cast(object).forEach(function(u) {
				r.push(new VideoLink(u));
			});
			
			links = r;
			
		}
		
	};
	
})();