var newIconLight = '/trailers/images/generic/hud_icon_new.png';
var newIconDark = '/trailers/images/generic/hud_icon_new.png';
var hudContrast = 'light';
var hudArrowContrast = 'light';

PosterPopup = Class.create({
	clickX: null,
	clickY: null,
	imgW: null,
	imgH: null,
	imgRatio: null,
	popupWidth: 300,
	popupImgWidth: 0,
	popupImgHeight: 0,
	stopEvent : false,
	initialize: function(posterSrc) {
		this.setupOverlay();
		this.setupPopup(posterSrc);
		this.addClickEvent();
	},
	setupOverlay: function() {
		this.overlayElement = new Element('div', { id:'poster-overlay'});
		$$('body').first().appendChild(this.overlayElement);
		$(this.overlayElement).hide();
	},
	
	setupPopup: function(posterSrc) {
		this.poster = $('poster');
		this.popup = new Element('div', { id:'poster-popup'	});
		this.popupPoster = new Element('img', {
			id:'poster-popupPoster',
			src:posterSrc,
			border:0,
			style:"border: 3px solid #000000;"
		});
	
		this.popup.appendChild(this.popupPoster);
		document.body.appendChild(this.popup);
		$(this.popup).hide();		
	},
	addClickEvent: function() {
		this.poster.observe('click', function(event) {
			Event.stop(event);
			
			this.imgW = $$('#poster img').first().offsetWidth;
			this.imgH = $$('#poster img').first().offsetHeight;
			this.imgRatio = this.popupWidth / this.imgW;
			this.popupImgWidth = this.popupWidth; 
			this.popupImgHeight = (this.imgH * this.imgRatio) + 3;
			
			this.clickX = Position.cumulativeOffset(this.poster)[0];
			this.clickY = Position.cumulativeOffset(this.poster)[1] + 2;
			this.overlayElement.setStyle({ "height": getPageDimensions().height +'px' });
			this.overlayElement.show();
			this.showPopup();						
		}.bind(this));
	},
	
	showPopup: function() {
		if(this.stopEvent) return;
		var width = this.popupPoster.offsetWidth;
		var height = this.popupPoster.offsetHeight;
		
		var left = (windowSize().width / 2) - (this.popupImgWidth/2);
		var top = ((windowSize().height/2) + windowSize().y) - (this.popupImgHeight/2);
		this.popup.setStyle({
			height:'209px',
			width:'141px',
			left: this.clickX + 'px',
			top: this.clickY + 20 + 'px'
		});
		this.popupPoster.setStyle({
			height: this.imgH + 'px',
			width: this.imgW + 'px',
			left:'1px',
			top:'1px'
		});
		this.popup.show();
		this.stopEvent = true;
		$j("#poster-popup").animate({ 
			'left' : left + 'px',
			'top'  : top + 'px'
		}, 400 );
		$j("#poster-popupPoster").animate({ 
			'width' : this.popupImgWidth + 'px',
			'height' : this.popupImgHeight + 'px'
		}, 400, null, this.addPopupClickEvent.bind(this));
		

	},
	addPopupClickEvent: function() {
		this.stopEvent = false;
		$(this.popup).observe('click', function() {
			this.hidePopup();
		}.bind(this));
		
		$(this.overlayElement).observe('click', function() {
			this.hidePopup();
		}.bind(this));
	},
	hidePopup: function() {
		if(this.stopEvent) return;
		this.overlayElement.hide();	
		this.stopEvent = true;
		$j("#poster-popup").animate({ 
			'left' : this.clickX + 'px',
			'top'  : this.clickY + 20 + 'px'
		}, 400 );
		$j("#poster-popupPoster").animate({ 
			'height' : this.imgH + 'px',
			'width' : this.imgW + 'px'
		}, 400, null, this.afterClose.bind(this));
	},
	afterClose: function() {
		this.stopEvent = false;
		this.popup.hide();
	}
});
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);
	return {'width':width, 'height':height, 'x':x, 'y':y}
};