var AdsSwap = Class.create({
	movieSize: 'medium',
	newMovieSizes: { small:'320x180', medium:'480x272', large:'640x360', hd:'848x480' },
	nowPlaying: null,
	displayPanel: null,
	controllerPanel: null,
	pageTitle: document.title,
	
	initialize: function() {
		this.triggers = $$('.trigger');
		this.displayPanel = $('display');
		this.controllerPanel = $('controller');

		var adCollection = $$('#ads li');
		adCollection.each(function(ad, i) { this.sortAds(ad, i) }.bind(this));
		
		var deeplink = false;
		if(document.location.hash) {
			this.loadQuery(document.location.hash.match(/#(.*)/)[1]);
			deeplink = true;
		} 

		this.setBrowserItemEvents();
		this.setSizeNavEvents();
		this.setupAd($$('#ads li')[0]);
	},
		
	sortAds: function(ad, i) {
		ad.url = ad.down('a').href;
		ad.title = ad.down('h3').innerHTML;
		ad.subtitle = ad.down('p') ? ad.down('p').innerHTML : null;
		// create urls to all movie sizes
		ad.small = ad.url.replace('480x272',this.newMovieSizes.small);
		ad.medium = ad.url.replace('480x272',this.newMovieSizes.medium);
		ad.large = ad.url.replace('480x272',this.newMovieSizes.large);
		ad.hd = ad.url.replace('480x272',this.newMovieSizes.hd);
	},
		
	setSizeNavEvents: function() {
		$$('.movieoption').each(function(option) {
			option.observe('click', function(e) {
				Event.stop(e);
				var size = option.id.substring(7, option.id.length);
				this.movieSize = size;
				this.packageAd(option.href);
			}.bind(this));
		}.bind(this));
		
	},
	
	setBrowserItemEvents: function() {
		$$('#ads li').each(function(ad) {
			var adId = ad.id;
			ad.down('a').observe('click', function(e) {
				Event.stop(e);
				$$('#ads li').each(function(item) {
					if($(item.id).hasClassName('active')) $(item.id).removeClassName('active');
					if(item.id == adId) this.setupAd(item);
				}.bind(this));
			}.bind(this))
		}.bind(this));
	},
	
	setupAd: function(item) {
		document.title = this.pageTitle + ' - ' + item.title;
		// set size urls and events
		$('ad-title').update(item.title);
		$('ad-subtitle').update(item.subtitle);
		$('option-small').href=item.small;
		$('option-medium').href=item.medium;
		$('option-large').href=item.large;
		$('option-hd').href=item.hd;
		
		// currently playing movie to keep active across sliders
		this.nowPlaying = item;
		if($(item.id)) $(item.id).addClassName('active');
		this.packageAd(item[this.movieSize]);
	},
	
	packageAd: function(url) {
		// set size as content class to change layout
		var contentClasses = $w($('content').className);
		if(contentClasses.length > 0) {
			contentClasses.each(function(className) {
				if(className == 'small' || className == 'medium' || className == 'large' || className == 'hd') $('content').removeClassName(className);
			});					
		}
		$('content').addClassName(this.movieSize);
        
        //extract width x height form url (123)x(456).mov
        var dimensionMatch = url.match(/(\d{1,3})x(\d{1,3})\.mov/i); 
        
		var movieWidth = parseInt(dimensionMatch[1], 10)
		var movieHeight = parseInt(dimensionMatch[2], 10)
		
		// subtract 16 from the height in old movie urls where the 
        // default controller was included in the dimensions
		if((movieHeight + "").match(/6$/)) {
		    movieHeight -= 16;
	    }
		
		if(AC.Detector.isQTInstalled()) {
			if(this.movieController) {
				this.movieController.Stop();
				this.movieController.detachFromMovie();
			} 
			var movie = AC.Quicktime.packageMovie('admovie', url, {
				width: movieWidth,
				height: movieHeight,
				controller: false,
				showlogo: true,
				autostart: true,
				cache: true
			});

			this.displayPanel.innerHTML = '';
			this.displayPanel.removeClassName('loading');
			this.controllerPanel.innerHTML = '';
			// set movie container dimensions
			this.displayPanel.setStyle({ height:movieHeight+'px' });
			this.displayPanel.setStyle({ width:movieWidth+'px' });
			this.displayPanel.appendChild(movie);
		
			this.movieController = new AC.QuicktimeController();
			this.movieController.render(this.controllerPanel);
			this.movieController.attachToMovie(movie, {
				onMoviePlayable: function() {
					this.track('Start')
				}.bind(this),
				onMovieFinished: function() {
					this.track('End')
				}.bind(this)
			});
			this.movieController.monitorMovie();
		}
	},
	
	track: function(state) {
		if (state == 'Start') {
			this.order++;
		}

		if (state == 'Start') {
			AC.Tracking.trackPage({
				pageName: 'Get a Mac - Watch the TV Ads - '+this.nowPlaying.title + ' - '+this.movieSize,
				prop4: this.nowPlaying.url,
				prop6: this.nowPlaying.title,
				prop13: this.nowPlaying.title +' - '+ state
			});
		} else if (state == 'End') {
			AC.Tracking.trackClick({
				prop13: this.nowPlaying.title +' - '+ state
			}, this, 'o', this.nowPlaying.title +' - '+ state);
		}

	}
});
Event.onDOMReady(function() {
	new AdsSwap();
});