HOMISSMECoverController = new Class({

	initialize: function() {
		this.name = 'Covers';
		this.Frame = $('Covers');

		// all covers should have the same dimensions!
		this.BG_WIDTH                   = 1675;                 // original width of cover
		this.BG_HEIGHT                  = 980;                  // original height of cover
		this.BG_ASPECT_RATIO            = this.BG_WIDTH / this.BG_HEIGHT;
		this.NUM_COVERS                 = 5;                    // number of covers to load

		this.coverWidth                 = this.BG_WIDTH;       // actual cover width
		this.coverHeight                = this.BG_HEIGHT;      // actual cover height
		this.isHorizontallyScrolling    = false;               // boolean indicating if the covers are sliding horizontally


		this.imageOffsetX;                                     // how much to offset cover images (margin-left)

		this.currentIndex               = 0;

		this.coverURLs;                         // contains URLS to all cover images

		// TODO: Cache selectors

		// All morphs
		this.coversContainerFX = new Fx.Morph("Covers", {
			duration: (new HOMISSMESettings()).PAGE_TRANSITION_DURATION,
			frameSkip: true,
			transition: (new HOMISSMESettings()).PAGE_TRANSITION_TYPE,
			link: 'cancel'
		});

		$('Covers').setStyles({
			'width':  window.getSize().x,
			'height': window.getSize().y,
			'left': 0
		});
		$('Covers').hide();

		this.coverURLs = new Array();
		for (var i=0; i<this.NUM_COVERS; i++) {
			// Inject div elements
			var newImageContainer = new Element('div.Covers-imagesContainers');
			newImageContainer.hide();
			newImageContainer.inject('Covers');

			// Push URLs to load later
			this.coverURLs[i] = 'library/covers/cover_image_' + (i+1) + '.jpg';     // not zero based
		}

		this.resizeCovers();

		// load first cover only
		this.loadCoverAt(0);

		// hide navigation
		this.hideNavigation();

		// event delegation for nav
		$('Covers-Navigation').addEvent('click:relay(a)', function(event) {
			var index = event.target.parentNode.getElements('a').indexOf(event.target);

			this.showCoverAt(index);
		}.bind(this));
	},

	PresentScene : function() {
 
		// hide preloader
		spinner.hide();				

		$('Covers').setStyles({
			'top': -window.getSize().y,
//			'z-index': ++GLOBAL['zcounter'],
			'display': 'inline-block'
		});

		// show covers container
		$('Covers').show();

		// show current cover first
		this.showCurrentCover();

		// slide down covers and
		this.coversContainerFX.start({
			'top': 0
		}).chain(function(){
			// show other covers when complete
			this.showOtherCovers();

			// show navigation
			this.showNavigation();
		}.bind(this));

		// Load remaining covers (if they haven't been loaded yet)
		for (var i=1; i<this.NUM_COVERS; i++) {
			this.loadCoverAt(i);
		}
	},

	covers: function() {
		return $$('.Covers-imagesContainers');
	},

	hideNavigation: function() {
		$('Covers-Navigation').hide();
		$('Covers-Backbutton').hide();
	},

	showNavigation: function() {
		$('Covers-Navigation').show();
		$('Covers-Backbutton').show();
	},

	directorDidRequestResize: function() {
		// Rescale all cover images loaded
		this.resizeCovers();

		// stop covers sliding, if active
		if (this.isHorizontallyScrolling) {

			this.coversContainerFX.stop();

			// show back button
//			this.showBackButton();
		}
	},

	showBackButton: function() {
		$('Covers-Backbutton').show();
	},

	hideBackButton: function() {
		$('Covers-Backbutton').hide();
	},

	directorDidChangeVersionControl : function(version) {

	},

	hideCurrentCover: function() {
		$$(".Covers-imagesContainers")[this.currentIndex].hide();
	},

	hideOtherCovers: function() {
		$$(".Covers-imagesContainers").each(function(cover, index) {
			if(index != this.currentIndex){
				cover.hide();
			}
		}.bind(this));
	},

	showCurrentCover: function() {
		$$(".Covers-imagesContainers")[this.currentIndex].show();
	},

	showOtherCovers: function() {
		$$(".Covers-imagesContainers").each(function(cover, index) {

			if(index != this.currentIndex){
				cover.show();
			}
		}.bind(this));
	},

	loadCoverAt: function($index) {
 
		// check to see if the image has been loaded / inserted into the DOM first
		if ($$('.Covers-imagesContainers img')[$index] == undefined) {
			var img = Asset.image(this.coverURLs[$index], {
				'class': 'Covers-images',
				onLoad: function(result) {
					// set width, height and margin-left of loaded image
					result.setStyles({
						'width': this.coverHeight,
						'height': this.coverWidth,
						'margin-left': this.imageOffsetX
					});

					// inject img tag into container
					result.inject($$('.Covers-imagesContainers')[$index]);

					// add button
					var navIcon = new Element('a');
					$('Covers-Navigation').grab(navIcon, 'top');

					// update buttons
					this.updateNavigation();
				}.bind(this)
			});
		}
	},

	/**
	 *  Determine dimension for covers based on browser width / height
	 */

	recalculateDimensions : function() {
//		console.log("HOMISSMECoverController.recalculateDimensions()");

		// get screen aspect ratio
		var screenAspectRatio = window.getSize().x / window.getSize().y;
		var aspectRatio;

		// resize images so that they are always full screen and maintain aspect ratio

		// determine screen orientation
		if (this.BG_ASPECT_RATIO > screenAspectRatio) {
			aspectRatio = this.BG_WIDTH / this.BG_HEIGHT;

			this.coverHeight = window.getSize().y * aspectRatio;
			this.coverWidth = window.getSize().y;
		} else {
			aspectRatio = this.BG_HEIGHT / this.BG_WIDTH;

			this.coverHeight = window.getSize().x;
			this.coverWidth = window.getSize().x * (aspectRatio);
		}

		// determine image offset, this will be used for all new images being loaded in
		this.imageOffsetX = -(Math.abs(window.getSize().x - this.coverHeight) / 2);
	},

	resizeCovers: function() {
//		console.log("HOMISSMECoverController.resizeCovers()");

		this.recalculateDimensions();

		$('Covers').setStyles({
			'width': window.getSize().x * this.NUM_COVERS,
			'height': window.getSize().y,
			'left':-(window.getSize().x * this.currentIndex),
			'overflow':'hidden'
		});

		$$('.Covers-imagesContainers').each(function(items, index) {
			items.setStyles({
				'width': window.getSize().x,
				'height': window.getSize().y,
				'overflow':'hidden' ,
				'left': window.getSize().x * index });
		});

		$$('.Covers-images').setStyles({
			'width': this.coverHeight,
			'height': this.coverWidth,
			'margin-left': this.imageOffsetX
		});
	},

	showCoverAt: function($index) {
		if (this.currentIndex != $index) {
			// set current index
			this.currentIndex = $index;

			// scroll to position
			this.scrollToCover($index);

			// update navigation
			this.updateNavigation();
		}
	},

	scrollToCover : function($index) {
		// hide back button
//		$('Covers-Backbutton').hide();

		this.isHorizontallyScrolling = true;

		this.coversContainerFX.start({
			'left':-(window.getSize().x * $index)
		}).chain(function() {
			// show back button
//			this.showBackButton();

			this.isHorizontallyScrolling = false;
		}.bind(this));
	},

	updateNavigation: function() {
		// loop through all nav items and set 'active' class on currentIndex
		for (var i=0; i< $$('#Covers-Navigation a').length; i++) {
			if (i == this.currentIndex) {
				$$('#Covers-Navigation a')[i].addClass('Active');
			} else {
				$$('#Covers-Navigation a')[i].removeClass('Active');
			}
		}
	},

	closeScene: function() {
//		console.log("HOMISSMECoverController.closeScene()");

		this.isHorizontallyScrolling = false;

		this.resizeCovers();

		// hide cover nav and back button
		this.hideNavigation();

		// hide all other covers first
		this.hideOtherCovers();

		// slide down frame
		this.coversContainerFX.start({
			'top': -window.getSize().y
		}).chain(function() {
			// hide the current cover onComplete
			this.hideCurrentCover();

			// hide covers container
			$('Covers').hide();
		}.bind(this));
	}
});