URBAN.Comic = new Class({
    initialize: function(arFullScreenImgSrcs)
	{
		this.open = false;
		this.close = true;
		this.nextOnClick = false;
        this.currentPage = 0;
		this.arFullScreenImgSrcs = arFullScreenImgSrcs;
		this.totalPages = this.arFullScreenImgSrcs.length;
		this.arFullScreenImg = new Array();
    },

	getPageImageSrc: function(page)
	{
		return this.arFullScreenImgSrcs[page];
	},

	getPageImage: function(page)
	{
		return this.arFullScreenImg[page];
	},

	loadPageImage: function(page, callback)
	{
		if ( $ES('.comicPageLoading') ) $ES('.comicPageLoading').setStyle("visibility", "visible");

		var tmpImgs = new Asset.images( [this.getPageImageSrc(page)], {"onComplete": function() {
			if ( $ES('.comicPageLoading') ) $ES('.comicPageLoading').setStyle("visibility", "hidden");
				callback();
			}
		});


		this.arFullScreenImg[page] = tmpImgs[0];
		this.arFullScreenImg[page].addClass("comicPage");
		this.arFullScreenImg[page].setStyle( 'opacity', 0.05);
	},

	displayComic: function(page)
	{
		if ( this.open ) return;

		this.open = true;
		this.close = false;
		this.currentPage = page;

		var smallPageCoordinates = $('comic' + page + 'SmallImg').getCoordinates();
		var comicLoadingImg = new Element("img", {'id': 'comicLoadingImg', 'src': staticsHost + '/img/loading_negative.gif'});
		comicLoadingImg.setStyles({
			'position': 'absolute',
			'top': smallPageCoordinates.top + (smallPageCoordinates.height - 16) / 2,
			'left': smallPageCoordinates.left + (smallPageCoordinates.width - 16) / 2,
			'z-index': 200
		});

		$('pageBody').adopt(comicLoadingImg);

		if ( $chk(this.getPageImage(page)) )
		{
			this.getPageImage(page).setStyle("opacity", 1);
			darkenPopup( this.addPageDiv.bind(this), 1200 );
		}
		else
		{
			this.loadPageImage( page, darkenPopup.pass( [this.addPageDiv.bind(this), 1200] ) );
		}
	},

	hideComic: function()
	{
		if ( this.close ) return;

		$ES('.closeLink', 'fullPageDiv').removeEvents();
		this.open = false;
		this.close = true;
		this.currentPage = 0;

		var myEffects = new Fx.Tween("fullPageDiv", {"property": "opacity", "duration": 300, "fps": 15, "transition": Fx.Transitions.linear, "onComplete": function()
			{
				$("fullPageDiv").dispose();
				undarkenPopup();
			}
		}).start(0);

		window.fireEvent('hasComicClosed');
	},

	addPageDiv: function( callback )
	{
		if ( $chk($('comicLoadingImg')) ) $('comicLoadingImg').dispose();

		var imgWidth = 650;
		var imgHeight = 1000;
		var tmpLeft = window.getScrollLeft() + (window.getWidth() - imgWidth) / 2;
		var tmpTop = window.getScrollTop() + (window.getHeight() - imgHeight) / 2;

		if (tmpTop <= 10) tmpTop = 10;

		var fullPageDiv = new Element("div", {
			"id": "fullPageDiv",
			"styles": {
				'position': "absolute",
				'textAlign': "center",
				"padding-left": "5px",
				"padding-right": "5px",
				'top': "20px",
				'left': tmpLeft + "px",
				'width': imgWidth + "px",
				'color': "#fff",
				'backgroundColor': "#000",
				'zIndex': 1001,
				'line-height': '10px'
			}
		});

		getDarkDiv().getParent().adopt( fullPageDiv );

		// Display requested page
		this.showPage( this.currentPage );

		new Fx.Scroll(window).toTop();

		if( callback )
		{
			callback();
		}
	},

	showPage: function( page )
	{
		this.currentPage = page;
		var fullScreenImg;
		var oldFullScreenImg = $E(".comicPage", "fullPageDiv");

		var comicNav = new Element("div", {"class": "comicPageNav"});

		var previousLink = new Element('img', { 'src': staticsHost + '/img/v2/comic/comicNavLeft.gif', 'class': 'previousLink', 'styles': {'cursor': 'pointer'}});
		var nextLink = new Element('img', { 'src': staticsHost + '/img/v2/comic/comicNavRight.gif', 'class': 'nextLink', 'styles': {'cursor': 'pointer'}});
		var closeLink = new Element('img', { 'src': staticsHost + '/img/v2/comic/comicNavClose.gif', 'class': 'closeLink', 'styles': {'cursor': 'pointer'}});
		var comicPageLoading = new Element("img", {"src": staticsHost + "/img/loading_negative.gif", "class": "comicPageLoading" });

		comicNav.adopt( previousLink );
		comicNav.adopt( nextLink );
		comicNav.adopt( closeLink );
		comicNav.adopt( comicPageLoading );

		var newFullScreenImg = this.getPageImage( this.currentPage );

		if ( $chk(oldFullScreenImg) )
		{
			fullScreenImg = oldFullScreenImg;
			new Fx.Tween(fullScreenImg, {'property':  'opacity', 'onComplete': function(element) {
					newFullScreenImg.replaces( element );
					newFullScreenImg.setStyle( 'opacity', 0.05);
					new Fx.Tween( newFullScreenImg, {'property': 'opacity', 'onComplete': function() { new Fx.Scroll(window).toTop(); }} ).start(1);
				}
			}).start(0.05);
		}
		else
		{
			newFullScreenImg.setStyle( 'opacity', 1);
			fullScreenImg = newFullScreenImg;
		}

		if( this.hasNextPage() )
		{
			newFullScreenImg.addEvent('click', this.nextPage.bind(this) );
		}
		else
		{
			newFullScreenImg.addEvent('click', this.hideComic.bind(this) );
		}

		$("fullPageDiv").empty();

		$("fullPageDiv").adopt( comicNav );

		$("fullPageDiv").adopt( fullScreenImg );
		$("fullPageDiv").adopt( comicNav.clone() );


		if ( this.hasPreviousPage() )
		{
			$ES('.previousLink', 'fullPageDiv').addEvents(
				{
					'click': this.previousPage.bind(this),
					'mouseover': function() { this.setProperty('src', staticsHost + '/img/v2/comic/comicNavLeft-over.gif') },
					'mouseout': function() { this.setProperty('src', staticsHost + '/img/v2/comic/comicNavLeft.gif') }
				}
				);
		}
		else
		{
				$ES('.previousLink', 'fullPageDiv').setStyle('visibility', 'hidden');
		}

		if ( this.hasNextPage() )
		{
			$ES('.nextLink', 'fullPageDiv').addEvents(
				{
					'click': this.nextPage.bind(this),
					'mouseover': function() { this.setProperty('src', staticsHost + '/img/v2/comic/comicNavRight-over.gif') },
					'mouseout': function() { this.setProperty('src', staticsHost + '/img/v2/comic/comicNavRight.gif') }
				}
				);
		}
		else
		{
			$ES('.nextLink', 'fullPageDiv').setStyle('visibility', 'hidden');
		}

		$ES('.closeLink', 'fullPageDiv').addEvents(
			{
				'click': this.hideComic.bind(this),
				'mouseover': function() { this.setProperty('src', staticsHost + '/img/v2/comic/comicNavClose-over.gif') },
				'mouseout': function() { this.setProperty('src', staticsHost + '/img/v2/comic/comicNavClose.gif') }
			}
			);
	},

	hasPreviousPage: function()
	{
		return (this.currentPage);
	},

	hasNextPage: function()
	{
		return ( (this.currentPage + 1) < this.totalPages );
	},

	previousPage: function()
	{
		if ( $chk(this.getPageImage( this.currentPage - 1 )) )
		{
			this.showPage( this.currentPage - 1 );
		}
		else
		{
			$ES('.previousLink', 'fullPageDiv').removeEvents();
			this.loadPageImage( this.currentPage - 1, this.showPage.pass( [(this.currentPage - 1)], this) );
		}
	},

	nextPage: function()
	{
		if ( $chk(this.getPageImage( this.currentPage + 1 )) )
		{
			this.showPage( this.currentPage + 1 );
		}
		else
		{
			$ES('.nextLink', 'fullPageDiv').removeEvents();
			this.loadPageImage( this.currentPage + 1, this.showPage.pass( [(this.currentPage + 1)], this) );
		}
	}
});