window.addEvent('domready', function(){
	
	// loop through the video links
	$$('.boxedMedia').each(function(el){
		
		// get the JSON which is stored in the REL property
		var modalInfo = JSON.decode(el.get('rel'));

		var parameters = {"url": modalInfo.bFilepath, "autoPlay": false, "autoBuffering": true};
			
		SqueezeBox.assign(el, {
			size: {x: modalInfo.bDimensions.width},
			sizeLoading: {x: modalInfo.bDimensions.width},
			onOpen: function(){
				
				var box = new Element("a", {"id": "sbox-swf"}).inject(this.content);
				var accessibility = new Element("div", {"id": "videobox-controls", "class": "videobox-controls"}).inject(this.content);
				box.setStyles({
					"height": modalInfo.bDimensions.height,
					"width": modalInfo.bDimensions.width,
					"display": "block"
				});
				
				$f('sbox-swf', absoluteUrl + 'static/flash/flowplayer-3.2.5.swf', {
					clip: {
						url: modalInfo.bFilepath,
						autoPlay: false,
						autoBuffering: true
					},
					plugins: { controls: null }
				}).controls("videobox-controls");
				
				// new Swiff(absoluteUrl + 'static/flash/flowplayer-3.2.5.swf', {
				// 	'id': 'sbox-swf',
				// 	'params': {
				// 		'config': parameters
				// 	},
				// 	'vars': {
				// 		'config': parameters
				// 	},
				// 	'width': modalInfo.bDimensions.width,
				// 	'height': modalInfo.bDimensions.height,
				// 	'container': this.content
				// });
				// flowplayer("sbox-swf").controls("videobox-controls");

				
				// title of the modal box
				new Element('h3', {
					'html': modalInfo.bTitle
				}).inject(this.content, 'bottom');

				// description of the modal box
				// Has to be a DIV, otherwise it breaks IE's JS parser
				new Element('div', {
					'html': modalInfo.bDescription
				}).inject(this.content, 'bottom');
				
				// ignore if there are no transcripts
				if (modalInfo.bTranscripts.length){
					// transcripts heading
					new Element('strong', {
						'class': 'transcription',
						'html': 'Transcript:'
					}).inject(this.content, 'bottom');
					
					// transcripts container
					var boxTranscript = new Element('ul', {
						'class': 'boxTranscript'
					}).inject(this.content, 'bottom');
							
					// loop through all transcripts and inject into the transcript container
					modalInfo.bTranscripts.each(function(transcript){
						new Element('a', {
							'href': transcript.mediaFilename,
							'html': transcript.mediaTitle
						}).inject(new Element('li').inject(boxTranscript));
					});
				}
				
				// AddThis
				if(this.element.hasClass("addthis")) {
				
					addthis.init();
					var addthis_config = {
						pubid: "nationalgalleriesofscotland", 
						data_track_clickback: true, 
						ui_use_css : false, 
						services_expanded: 'email, twitter, facebook, favorites, delicious, google, live, stumbleupon', 
						services_compact: 'email, twitter, facebook, favorites, delicious, google, live, stumbleupon', 
						data_track_clickback: true, 
						ui_508_compliant: true, 
						data_use_cookies: false, 
						data_use_flash: false, 
						addthis_disable_flash: false, 
						ui_click: true
					};
				
					var NGSTitle = "National Galleries of Scotland - ";
					var addThis = new Element("div", {"class": "addthis_toolbox addthis_top"});
					
					new Element("div", {"class": "addthis_heading", "text": "bookmark & share"}).inject(new Element("div").inject(addThis));
					var hover = new Element("div", {"class": "hover_effect"}).inject(addThis);

					new Element("a", {
						"href": "#", 
						"class": "addthis_button_email", 
						"addthis:url": modalInfo.bPagelink, 
						"addthis:title": NGSTitle + modalInfo.bTitle, 
						"text": "Email", 
						"title": "Send via Email"
					}).inject(new Element("div").inject(hover));
					new Element("a", {
						"href": "#", 
						"class": "addthis_button_twitter", 
						"addthis:url": modalInfo.bPagelink, 
						"addthis:title": NGSTitle + modalInfo.bTitle, 
						"text": "Twitter", 
						"title": "Share via Twitter"
					}).inject(new Element("div").inject(hover));
					new Element("a", {
						"href": "#", 
						"class": "addthis_button_facebook", 
						"addthis:url": modalInfo.bPagelink, 
						"addthis:title": NGSTitle + modalInfo.bTitle, 
						"text": "Facebook", 
						"title": "Share via Facebook"
					}).inject(new Element("div").inject(hover));
					new Element("a", {
						"href": "#", 
						"class": "addthis_button_favorites", 
						"addthis:url": modalInfo.bPagelink, 
						"addthis:title": NGSTitle + modalInfo.bTitle, 
						"text": "Bookmarks", 
						"title": "Add to Bookmarks"
					}).inject(new Element("div").inject(hover));
					new Element("a", {
						"href": "#", 
						"class": "addthis_button_compact", 
						"addthis:url": modalInfo.bPagelink, 
						"addthis:title": NGSTitle + modalInfo.bTitle, 
						"text": "More...", 
						"title": "More"
					}).inject(new Element("div").inject(hover));

					addThis.inject(this.content, 'bottom');
					addthis.toolbox(".addthis_toolbox");
				}
				
				// need to delay this function because Squeezebox needs to fade the modal box in
				(function(){
					
					// get the scroll size of the inner container ...
					var height = this.getScrollSize().y;
					
					(function(){
						// ... and update the outer container with the new height
						this.getParent('#sbox-window').tween('height', height);						
						//to fix FF3.6 disappearing title issue
						(function() { $$('#sbox-content').setStyle('position', 'relative')}).delay(500, this);
						if ($$('#videobox-controls .play').length) {
							// $$('#videobox-controls .play')[0].focus();
							document.body.scrollTo(0, 0);
						}
					}).delay(1500, this);
				}).delay(500, $(this.content));
				
			},
			handler: 'clone',
			size: {
				x: modalInfo.bDimensions.width
			}
		});
	});
});

function resetAddThis(){
	$(".addthis_toolbox").each(function() {
		$(this).attr("onclick", "return addthis_open(this, '', '"+$(this).attr('addthis:url')+"', '"+$(this).attr('addthis:title')+"');");
	});
}