AC.PosterPopup = Class.create();
Object.extend(AC.PosterPopup.prototype, AC.ViewMaster.Viewer.prototype);
Object.extend(AC.PosterPopup.prototype, Event.Listener);
Object.extend(AC.PosterPopup.prototype, Event.Publisher);
Object.extend(AC.PosterPopup.prototype, {

	clickX: null,
	clickY: null,
	initialize: function(posterSrc) {
		this.setupOverlay();
		this.setupPopup(posterSrc);
		this.setupCaption();
		if(!(AC && AC.Detector && AC.Detector._isIpad)) this.addHoverEvent();
		this.addClickEvent();
	},
	
	setupOverlay: function() {
		this.overlayElement = Builder.node('div', { id:'poster-overlay'});
		$$('body').first().appendChild(this.overlayElement);
		Element.hide(this.overlayElement);
	},
	
	setupPopup: function(posterSrc) {
		this.poster = $('poster');
		this.popup = new Element('div', {
			id:'poster-popup'
		});
		this.popupShadow = new Element('img', { 
			id:'poster-popupShadow',
			src:'../images/body-black-poster-shadow.png',
			border:0
		 });
		this.popupPoster = new Element('img', {
			id:'poster-popupPoster',
			src:posterSrc,
			border:0
		});
		this.popup.appendChild(this.popupShadow);
		this.popup.appendChild(this.popupPoster);
		document.body.appendChild(this.popup);
		this.popup.hide();		
	},
	
	setupCaption: function(){
		if(this.poster.hasAttribute('title')) { this.caption = this.poster.getAttribute('title'); dash = ' - '; }
		else { this.caption = ''; dash = ''; }
		if(this.poster.getAttribute('href') != '#') this.download = this.poster.getAttribute('href');
		if(this.download) this.caption = this.caption + dash + '<a href="'+this.download+'" target="_blank" title="Download this poster">Download</a>';
		if(this.caption != '') {
			this.popupCaption = new Element('h2',{
				'style': 'display: none;',
				'id': 'poster-caption'
			});
			this.popupCaption.update(this.caption);
			this.popup.appendChild(this.popupCaption);
		}
	},
	
	addHoverEvent: function() {
		this.poster.observe('mouseover', function() {
			this.poster.hasClassName('active') ? this.poster.removeClassName('active') : this.poster.addClassName('active');
		}.bind(this));
		this.poster.observe('mouseout', function() {
			this.poster.hasClassName('active') ? this.poster.removeClassName('active') : this.poster.addClassName('active');
		}.bind(this));
	},
	
	addClickEvent: function() {
		this.poster.observe('click', function(e) {
			Event.stop(e);
			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() {
		var left = (windowSize().width/2) - (556/2);
		var top = ((windowSize().height/2) + windowSize().y) - (750/2);
		this.popup.setStyle({
			height:'219px',
			width:'142px',
			left:this.clickX + 'px',
			top:this.clickY + 'px'
		});
		this.popupShadow.setStyle({
			height:'209px',
			width:'141px',
			left:'0',
			top:'0'
		});
		this.popupPoster.setStyle({
			height:'193px',
			width:'134px',
			left:'0px',
			top:'-2px'
		});
		this.popup.show();
		posterHeight = 750;
		imageTop = 75;
		if(this.caption != '') posterHeight += (this.popupCaption.getHeight() * 2);
		if(this.caption != '') imageTop += (this.popupCaption.getHeight() / 5);
		new Effect.Transform([
			{ '#poster-popup' :
				'height:'+posterHeight+'px;' +
				'width:556px;' +
				'left:'+left + 'px;' +
				'top:'+top + 'px;' },
			{ '#poster-popupShadow' :
				'height:'+posterHeight+'px;' +
				'width:556px;' +
				'left:'+left + 'px;' +
				'top:'+top + 'px;' },
			{ '#poster-popupPoster' :
				'height:600px;' +
				'width:406px;' +
				'left:75px;' +
				'top:'+imageTop+'px;' }	
		], { duration: .4 , afterFinish:this.addPopupClickEvent.bind(this) }).play();

	},
	
	hidePopup: function() {
		if(this.popupCaption) this.popupCaption.setStyle({'display':'none'});
		this.dispatchEvent('beforeClose', this);
		this.overlayElement.hide();
		new Effect.Transform([
			{ '#poster-popup' :
				'height:209px;' +
				'width:141px;' +
				'left:'+this.clickX + 'px;' +
				'top:'+this.clickY + 'px;' },
			{ '#poster-popupShadow' :
			'height:193px;' +
			'width:134px;' +
				'left:0px;' +
				'top:-2px;' },
			{ '#poster-popupPoster' :
			'height:193px;' +
			'width:134px;' +
				'left:0px;' +
				'top:-2px;' },
		], { duration: .4 , afterFinish:this.afterClose.bind(this) }).play();
	},
	
	addPopupClickEvent: function() {
		if(this.popupCaption) this.popupCaption.setStyle({'display':'block'});
		Event.observe(this.popup, 'click', function() {
			this.hidePopup();
		}.bind(this));
		Event.observe(this.overlayElement, 'click', function() {
			this.hidePopup();
		}.bind(this));
	},

	afterClose: function() {
		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);

	if(AC.Detector.isiPhone()) {
		width = parseInt(980);
		height = parseInt(1212);
	}
	return {'width':width, 'height':height, 'x':x, 'y':y}
};