nfl.namespace('superbowl.cadillac');
nfl.superbowl.cadillac.VideoPlayer = Class.create();
nfl.superbowl.cadillac.VideoPlayer.prototype = {
	initialize: function(xmlURL, id, adUrl, options) {
		this.xmlURL			 = xmlURL;
		this.adURL			 = adUrl;
		this.parentID		 = id;
		this.containerID	 = id + '-viewer';
		this.controllerID	 = id + '-controller';
		this.flashID		 = id.replace(/-/g, "") + "Flash";
		this.attrs			 = ['autoplay', 'mediaPath', 'format', 'id', 'mediaFile'];
		if ($(this.flashID)) { throw("Cannot create video player, object with the id " + this.flashID + "already exists on this page.");}
		this.params			 = { allowScriptAccess: "always", allowFullScreen: "false", wmode: "transparent" }
		this.options = {
			format: "format",
			emailAFriendBaseUrl: "/email-a-friend?id=",
			playerbar: nfl.global.imagepath + "/img/flash/video_landing/player_bar_base.jpg",
			playerVolume: "50",
			previewImage: nfl.global.imagepath + "/img/superbowl/cadillac/video-preview.jpg",
			autoplay: 'true',
			mediaPath: nfl.global.imagepath + '/img/superbowl/cadillac/',
			mediaFile: 'video-preview.jpg',
			fullscreen: "false"
		}
		for (var i in options) { this.options[i] = options[i] }
		var me = this;
		new Ajax.Request(this.xmlURL, {
			method: 'get',
			onSuccess: function(transport) { me.create(transport.responseXML); }
		});
		Event.observe(window, "unload", this.clean);
	},
	create: function(XML) {
		// Parse XML Data & Create HTML structure
		var div, parent, container, controller, ul, lis, liWidth, ulWidth, items, so, cID, moveItems, fID, attrs, next, nextA, nextSpan, prev, prevA, prevSpan, aURL;
		ul = document.createElement('ul');
		ul.className = 'story-links';
		cID = ul.id = this.controllerID + "-ul";
		items = $A(XML.getElementsByTagName('item'));
		lis = [];
		for (var i = 0, len = items.length; i < len; i++) {
			var li, div, img, a, h3, p, attr, item, rt;
			item = items[i]
			a = document.createElement("a");
			a.href = "#";
			a.appendChild(document.createTextNode(item.getAttribute('body')));
			img = document.createElement("img");
			img.src = item.getAttribute('thumbSmall');
			div = document.createElement("div");
			div.className = 'thumbnail';
			div.appendChild(img);
			h3 = document.createElement("h3");
			h3.appendChild(a);
			p = document.createElement('p');
			rt = item.getAttribute('runTime').match(/^(00:)?(.*):\d\d$/);
			if (rt && rt[2]) { p.appendChild(document.createTextNode(rt[2])) }
			li = document.createElement("li");
			li.title = "Play this video";
			li.appendChild(div);
			li.appendChild(h3);
			li.appendChild(p);
			// add custom attributes for the video metadata
			for (var j = 0, len2 = this.attrs.length; j < len2; j++) {
				attr = this.attrs[j];
				itemAttr = item.getAttribute(attr);
				li.setAttribute('nfl-' + attr, itemAttr);
				itemAttr = attr = null;
			}
			ul.appendChild(li);
			lis[lis.length] = li;
			attr = item = li = div = img = a = h3 = p = null;
		}
		controller = document.createElement('div');
		controller.id = this.controllerID;
		controller.appendChild(ul);
		container = document.createElement('div');
		container.id = this.containerID;
		div = document.createElement('div');
		parent = $(this.parentID);
		div.appendChild(container);
		div.appendChild(controller);
		parent.appendChild(div);
		// add the video SWF
		so = new SWFObject(nfl.global.imagepath + "/flash/videogallery.swf",this.flashID,"646","400","8", "#FFFFFF");
		for (var i in this.params) { so.addParam(i, this.params[i]) }
		for (var i in this.options) { so.addVariable(i, this.options[i]) }
		so.write(this.containerID);
		// play a video when the list-item is clicked
		fID = this.flashID;
		aURL = this.adURL;
		Event.observe(ul, 'click', function(e) {
			var f, li;
			li = Event.findElement(e, 'li');
			if (li == document) { return true;}
			f = $(fID);
			f.playVideo(
				li.getAttribute('nfl-format'),
				li.getAttribute('nfl-mediaFile'),
				li.getAttribute('nfl-mediaPath'),
				null,
				aURL + window.adRandom,
				li.getAttribute('nfl-id')
			);
			Event.stop(e);
			f = li = null;
		});
		// Add the slide controller if necessary
		try { liWidth = ul.firstChild.offsetWidth;}
		catch(e) { liWidth = false;}
		ulWidth = liWidth * items.length;
		if (ulWidth > controller.offsetWidth) {
			// duplicate the childNodes of the list, for seamless animation
			lis.each(function(li) { ul.appendChild(li.cloneNode(true)) });
			// set the width of the list explicitly
			Element.setStyle(ul, { width: (ulWidth * 2) + 'px' });
			nextSpan = document.createElement('span');
			nextA = document.createElement('a');
			nextA.href = "#";
			nextA.appendChild(document.createTextNode(">"));
			nextA.appendChild(nextSpan);
			next = document.createElement('div');
			next.className = "next button replaced";
			next.appendChild(nextA);
			prevSpan = document.createElement('span');
			prevA = document.createElement('a');
			prevA.href = "#";
			prevA.appendChild(document.createTextNode("<"));
			prevA.appendChild(prevSpan);
			prev = document.createElement('div');
			prev.className = "prev button replaced";
			prev.appendChild(prevA);
			controller.appendChild(next);
			controller.appendChild(prev);
			Event.observe(next, 'click', function(e) { return moveItems(-1, e) });
			Event.observe(prev, 'click', function(e) { return moveItems(1, e) });
			moveItems = function(dir, e) {
				var ul, ulLeft, newLeft;
				ul = $(cID);
				// shift the element left or right for seamless animation
				ulLeft = parseInt(ul.getStyle('left'));
				// prevent moving mid-animation
				if (ulLeft % liWidth == 0) {
					newLeft = ulLeft + (dir * liWidth);
					// moving left and we're in the left half of the list
					if (dir == -1 && ulLeft <= -1 * ulWidth) {
						ul.setStyle({left: (ulLeft + ulWidth) + 'px'});
						newLeft += ulWidth;
					}
					// moving right and we're in the right half of the list
					if (dir == 1 && ulLeft >= 0) {
						ul.setStyle({left: (ulLeft - ulWidth) + 'px'});
						newLeft -= ulWidth;
					}
					ul.morph('left: ' + newLeft + 'px');
				}
				// cancel the event
				if (e) { Event.stop(e);}
				ul = null;
				return false;
			}
		}
		else {
			Element.hide(next);
			Element.hide(prev);			
		}
		div = next = nextA = nextSpan = prev = prevA = prevSpan = parent = container = controller = ul = lis = items = so = null;
	},
	getFlashId: function() { return this.flashID },
	clean: function(e) {
		delete nfl.superbowl.cadillac.VideoPlayer;
		return true;
	}
}