var Overlay = Class.create();
Overlay.prototype = {
	overlayElement: null,
	overlayPopup: null,
	clickX: null,
	clickY: null,
	movieHeight: null,
	movieWidth: null,
	button: null,
	qtPanel: null,
	qtController: null,
	
	initialize: function() {
		this.overlayElement = Builder.node('div', { id:'overlay'});
		this.overlayPopup = Builder.node('div', { id:'popup' }, [
			Builder.node('div', { id:'qt-display'}), 
			Builder.node('img', { id:'qt-spinny', src:'http://images.apple.com/trailers/images/qt_spinny.gif'}),
			Builder.node('img', { id:'popup-close', src:'http://images.apple.com/trailers/images/popup_close_light.png'})
		]);
		$$('body').first().appendChild(this.overlayElement);
		$$('body').first().appendChild(this.overlayPopup);
		Element.hide(this.overlayElement);
		Element.hide(this.overlayPopup);
	},
	
	onClick: function(button) {
		this.button = button;
		this.movieHeight = parseInt(button.href.toQueryParams().height)+16;
		this.movieWidth = parseInt(button.href.toQueryParams().width);
		//this.size = button.className;
		this.clickX = Position.cumulativeOffset(button)[0] + (button.getWidth()/2);
		this.clickY = Position.cumulativeOffset(button)[1] + (button.getHeight()/2);
		this.showPopup();
	},
	
	showOverlay: function() {
		this.overlayElement.setStyle({ height: getPageDimensions().height +'px' });
		this.overlayElement.show();
	},
		
	hideOverlay: function() {
		this.overlayElement.hide();
	},
	
	showPopup: function() {
		var left = (windowSize().width/2) - ((this.movieWidth+36)/2);
		var top = ((windowSize().height/2) + windowSize().y) - ((this.movieHeight)/2);
		this.showOverlay();
		this.overlayPopup.setStyle({
			height:'0px',
			width:'0px',
			left: (this.clickX) + 'px',
			top: (this.clickY) + 'px',
			opacity:'0'
		});
		$('qt-display').setStyle({
			height:'0px',
			width:'0px',
			left:'0px',
			top:'0px'
		});	
		$('qt-spinny').setStyle({
			height:'0px',
			width:'0px',
			left:'0px',
			top:'0px'
		});		
		$('popup-close').setStyle({
			height:'0px',
			width:'0px',
			right:'0px',
			bottom:'0'
		});
		this.overlayPopup.show();
		new Effect.Transform([
			{ '#popup' : 
				'height:'+(this.movieHeight+69)+'px;' +
				'width:'+(this.movieWidth+36)+'px;' +
				'left:'+left+'px;' +
				'top:'+top+'px;' + 
				'opacity:1' },
			{ '#qt-display' :
				'height:'+this.movieHeight +'px;' +
				'width:'+this.movieWidth +'px;' +
				'top:18px;' +
				'left:18px' },
			{ '#qt-spinny' :
				'height:30px;' +
				'width:30px;' +
				'top:'+(this.movieHeight/2) +'px;' +
				'left:'+(this.movieWidth/2) +'px;'},
			{ '#popup-close' :
				'height:28px;' +
				'width:60px;' +
				'right:18px;' +
				'bottom:10px' },
			{ '#popup-itunes img' :
				'height:28px;' +
				'width:158px;' }
		], { duration: .6 , afterFinish:this.afterPop.bind(this) }).play();
		
		
	},
	
	afterPop: function() {
		this.qtPanel = $('qt-display');		
		this.addClickEvent();
		
		if(this.qtController) {
			if(this.qtController.Playing) this.qtController.Stop();
			this.qtController.detachFromMovie();
			this.qtController = false;
			this.qtPanel.update('');
		}	
		
		var movie = AC.Quicktime.packageMovie('trailerMovie', this.button.href, {
			width: this.movieWidth,
			height: this.movieHeight,
			controller: true,
			showlogo: false,
			cache: true,
			bgcolor: '#000000',
			autoplay: true
		});
		$('qt-spinny').hide();
		this.qtPanel.appendChild(movie);
		this.qtController = new AC.QuicktimeController();
		movie = null;
	},
		
	afterClose: function() {
		this.overlayPopup.hide();
		$('qt-spinny').show();
		this.hideOverlay();
	},
	
	addClickEvent: function() {
		[$('overlay'),$('popup-close')].each(function(el) {
			Event.observe(el, 'click', function() {
				this.hidePopup();
			}.bind(this));
			
		}.bind(this))
	},
	
	hidePopup: function() {
		if(this.qtController) {
			if(this.qtController.isPlaying) this.qtController.Stop();			
			this.qtController.detachFromMovie();
			this.qtController = false;
			this.qtPanel.update('');
		}
		new Effect.Transform([
			{ '#popup' : 
				'height:0px;' +
				'width:0px;' +
				'left:'+this.clickX+'px;' +
				'top:'+this.clickY+'px;' + 
				'opacity:0' },
			{ '#qt-display' :
				'height:0px;' +
				'width:0px;' +
				'left:0px;' +
				'top:0px'},
			{ '#qt-spinny' :
				'height:0px;' +
				'width:0px;' +
				'left:0px;' +
				'top:0px'},
			{ '#popup-close' :
				'height:0px;' +
				'width:0px;' +
				'right:0px;' +
				'bottom:0px' },
			{ '#popup-itunes img' :
				'height:0px;' +
				'width:0px;' }
		], { duration: .4 , afterFinish:this.afterClose.bind(this) }).play();
	}
};
 
function getPageDimensions() {
	var xScroll, yScroll;
 
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { 
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
 
	var windowWidth, windowHeight;
	if (self.innerHeight) {
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { 
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
 
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}
 
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}
 
	pageDimensions = { height:pageHeight };
	return pageDimensions;	
};
 
function windowSize() {
	var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
	var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
	var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
	var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
 
	if(AC.Detector.isiPhone()) {
		width = parseInt(980);
		height = parseInt(1212);
	}
	return {'width':width, 'height':height, 'x':x, 'y':y}
};
 
function preloadCssImages() {
	var styles = '';
	$A(document.styleSheets).each(function(sheet, i) {
		if(i != 0) {
			if(!AC.Detector.isIE()) {
				$A(sheet.cssRules).each(function(rule, i) {
					styles+=rule.cssText
				})			
			} else {
				styles+=sheet.cssText;
			}					
		}
	});
	var section = document.location.toString().match(/http:\/\/[^\/]*\/([^\/]*)/);
	if (section.length>0) section = section[1];
	var search = new RegExp('\/'+section+'\/([^\)]*)', 'g');
	var match = styles.match(search);
	var image = new Image();
	match.each(function(match) {
		image.src = match;
	});
};
 
Event.onDOMReady(function() {
	$('main').addClassName('hasjs');
	var safari2 = false;
	if(AC.Detector.isWebKit()) safari2 = AC.Detector.getAgent().match(/safari\/(\d*)\./)[1] < 500;
	
	// if not safari 2, preload all the css images
	if(!safari2 && document.images) setTimeout("preloadCssImages()", 10);
	
	// set HD, NEW and Close images based on light or dark contrasts specified in html 
	$$('.close-hud').each(function(close) {
		close.setStyle({ backgroundImage:'url('+(hudContrast == "dark" ? closeHudLight : closeHudDark) +')'}) 
	});	
	$$('.navitem.hd').each(function(navitem) {
		navitem.down('.text').setStyle({ backgroundImage:'url('+(hudContrast == "dark" ? hdIconLight : hdIconDark) +')'}) 
	})
	
	TrailerOverlay = new Overlay();
	$$('.movie .pillbutton a').each(function(button) {
		Event.observe(button, 'click', function(e) {
			Event.stop(e);
			TrailerOverlay.onClick(button);
		});
	});
	// show message if no quicktime 
	if(!AC.Detector.isQTInstalled()) {
		$('noqt').show();
	}
		
})