if (!document.trace) {
	this.trace = function(output) {
		//if (console.log && output) console.log(output);
	}
}


//// Global - pass xhtml content to the flash when ready

function onFlashReady() {
	
	trace('FlashView -> Document.onFlashReady()');
	
	// @TODO directly convert xhtml dom element to xml...
	
	var contentDTO = $('lightbox_gallery_content').getChildren();
	
	var contentAsString = "<?xml version='1.0'?>";
	contentAsString += "<div id='lightbox_gallery_content'>";
	
	for (var i = 0; i < contentDTO.length; ++i) {
		
		var anchor = contentDTO[i];
		var img = contentDTO[i].getChildren()[0];
		
		contentAsString += "<a href='" + anchor.getProperty('href') + "' class='" + anchor.getProperty('class') + "'>";
		contentAsString += "<img src='" + img.getProperty('src') + "' />";
		contentAsString += "</a>";
	}
	
	contentAsString += "</div>";
	
	if (window.ie) {
		deferSetContent(contentAsString);
	} else {
	// give slight delay for parsing safety...
	setTimeout(deferSetContent, 1000, contentAsString);
}
}

function deferSetContent(content) {
	var flashView = $('gallery');
	flashView.setContent(content);
}


//// Game Details View JS class

var GameDetailsView = new Class({
	
	
	initialize : function() {
		
		//
	},
	
	/**
	 * Called by the document hosting the view to get 
	 * an instance of this as a view helper.
	 */
	createViewHelper : function() {
	
		if (this.viewHelper) return; //<< prevent multiple instances...
		this.viewHelper = this;

		this.menuItems = $('lightbox_hud_menu').getChildren();
		this.contentItems = $('lightbox_content').getChildren();
		this.numItems = this.menuItems.length;
		
		this.currentIndex = -1;
		this.transitioning = false;
		
		for (var i = 0; i < this.numItems; ++i) {
			var menuItem = this.menuItems[i];	
			menuItem.addEvent('mousedown', this.onMenuItemSelect.bindWithEvent(this));
		}
		
		for (var j = 0; j < this.numItems; ++j) {
			var contentItem = this.contentItems[j];
			contentItem.setStyle('position', 'absolute');
			contentItem.setStyle('overflow', 'hidden');
			contentItem.setStyle('left', '-640px');
			contentItem.setStyle('width', '0px');
			contentItem.setStyle('height', '0px');
			contentItem.setOpacity(0);
		}
		
		$('lightbox_hud').setStyle('visibility', 'visible');
		$('lightbox_hud').setStyle('z-index', 50);
		$('lightbox_content').setStyle('visibility', 'visible');
		$('lightbox_preloader').setStyle('display', 'none');
		
		this.embedFlash();
		this.setNav(0);		
	},
	
	
	onMenuItemSelect : function(e) {
		this.setNav(this.getMenuItemIndex(e.target));
	},
	
	
	embedFlash : function() {
	
		var flashvars = {};
	
		var params = {
			menu: 'false', 
			allowScriptAccess: 'always',
			wmode: 'opaque'
		};
	
		var attributes = { 
			id: 'gallery', 
			name: 'gallery', 
			background: '#ff0000'
		};
	
		swfobject.embedSWF(sn_swf_base_url + 'usaca_gallery.swf', 'lightbox_gallery_flashview', '640', '360', '9.0.0', sn_swf_base_url + 'expressInstall.swf', flashvars, params, attributes);
	},
	
	
	/**
	 * Set the current view state based on a nav index.
	 * @param 	index The nav index / view state index to set to.
	 */
	setNav : function(index) {
		trace('setNav(' + index + ')');
		
		if (index == this.currentIndex || this.transitioning) return;
		
		if (index < 0) index = 0;
		if (index > this.numItems - 1) index = this.numItems - 1;
		
		if (this.currentIndex >= 0) this.hideElementByIndex(this.currentIndex);
		this.showElementByIndex(index);
		
		this.currentIndex = index;
	},
	
	
	getMenuItemIndex : function(menuItem) {
		trace('getMenuItemIndex(' + menuItem + ')');
		
		for (var i = 0; i < this.numItems; ++i) {
			trace("---- " + this.menuItems[i] + ", " + menuItem);
			if (this.menuItems[i] == menuItem) return i;
		}
		
		return -1;
	},
	
	
	showElementByIndex : function(index) {
		
		var contentItem = this.contentItems[index];
		
		contentItem.setStyle('opacity', '0');
		contentItem.setStyle('width', '640px');
		contentItem.setStyle('height', '360px');
		
		var scope = this;
		
		var wipe = new Fx.Styles(contentItem, {duration: GameDetailsView.TRANSITION_DURATION, transition: Fx.Transitions.Cubic.easeInOut});
 		wipe.addEvent('onComplete', function() { scope.onTransitionComplete(); });
 		
 		var left = 640;
 		if (index < this.currentIndex) left = -left;
 		if (index == 1) left = 0; //<< don't swipe on the flash element...
 		
 		var startOpacity = (window.ie || window.gecko) ? 1 : 0;
 		
		wipe.start({
			'left': [left, 0],
			'opacity': [startOpacity, 1]
		});
		
		this.transitioning = true;
		
		var menuItem = this.menuItems[index];
		menuItem.addClass('current');
	},
	
	
	hideElementByIndex : function(index) {
	
		var contentItem = this.contentItems[index];
		
		contentItem.setStyle('left', '-640px');
		contentItem.setStyle('width', '0px');
		contentItem.setStyle('height', '0px');
		
		var menuItem = this.menuItems[index];
		menuItem.removeClass('current');
	},
	
	
	onTransitionComplete : function() {
		this.transitioning = false;
	},
	
	
	toString : function() {
		return "[GameDetailsView]";
	}
});


/* STATIC */

GameDetailsView.TRANSITION_DURATION = 400;
GameDetailsView.dirtyElements = [];
GameDetailsView.placeholderElements = [];

/**
 * static factory, called by parent document to aggregate
 * a view and keep a static ref to it
 */
GameDetailsView.create = function(url) {
	
	// scroll the body to the top...
	var scrollUp = new Fx.Scroll($$('body')[0], {duration: 400, transition: Fx.Transitions.Quad.easeInOut}).toTop();
	
	// hide other document elements that contain flash content...
	
	GameDetailsView.dirtyElements = $$('*.flash_container');
	GameDetailsView.placeholderElements = [];
		
	for (var i = 0; i < GameDetailsView.dirtyElements.length; ++i) {
	
		var elem = GameDetailsView.dirtyElements[i];
		
		var placeholder = new Element('div');
		placeholder.setStyle('position', elem.getStyle('position'));
		placeholder.setStyle('top', elem.getStyle('top'));
		placeholder.setStyle('left', elem.getStyle('left'));
		placeholder.setStyle('width', elem.getStyle('width'));
		placeholder.setStyle('height', elem.getStyle('height'));
		placeholder.setStyle('margin-left', elem.getStyle('margin-left'));
		placeholder.setStyle('padding', elem.getStyle('padding'));
		placeholder.setStyle('background', '#999');
		placeholder.injectAfter(elem);
		
		GameDetailsView.placeholderElements.push(placeholder);
		GameDetailsView.hideElement(elem);
	}
	
	// create the lightbox content host...
	
	var host = new Element('iframe');
	host.setProperties({
		'id' : 'lightbox_game_details_container',
		'name' : 'lightbox_main',
		'src' : url,
		'frameborder' : '0',
		'scrolling' : 'no',
		'allowTransparency' : 'true'
	});
	host.setStyle('z-index', 30);
	host.injectInside(document.body);
	
	GameDetailsView.hostElement = host;
	
	// create the lightbox background...
	
	var bg = new Element('div');
	bg.setStyle('position', 'absolute');
	bg.setStyle('z-index', '20');
	bg.setStyle('height', $('container').getCoordinates().height + 'px');
	bg.setStyle('width', '100%');
	bg.setStyle('background', '#000');
	bg.setStyle('top', '0px');

	if (window.gecko) {
		// use a background tile fill png in firefox to prevent rendering issues with flash...
		bg.setStyle('background', 'url(' + sn_img_base_url + '/fill/000000_80.png)');
	} else {
		bg.setOpacity(0.8);
	}
	
	bg.injectAfter(host);
	
	GameDetailsView.bgElement = bg;
	
	// create the lightbox close button element...
	
	var size = 32;
	var x = host.getCoordinates().left - Math.round(size / 2);
	var y = host.getCoordinates().top - Math.round(size / 2);
	var closeButtonBg = sn_img_base_url + '/lightbox_close_button_bg.png';
	
	var close = new Element('div');
	close.setStyle('display', 'none');
	close.setStyle('overflow', 'hidden');
	close.setStyle('position', 'absolute');
	close.setStyle('z-index', '80');
	close.setStyle('width', size + 'px');
	close.setStyle('height', size + 'px');
	close.setStyle('top', y + 'px');
	close.setStyle('left', x + 'px');
	close.setStyle('cursor', 'pointer');
	if (window.ie && !window.ie7) {
		var glyph = new Element('div');
		glyph.setStyle('width', size + 'px');
		glyph.setStyle('height', size + 'px');
		glyph.setStyle('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + closeButtonBg + '")');
		glyph.injectInside(close);
	} else {
		close.setStyle('background', 'url(' + closeButtonBg + ') no-repeat');
	}
	close.injectAfter(host);
	
	// bind events to close button...
		
	close.addEvent('mouseover', function(e) { 
		if (!window.ie || window.ie7) {
			this.setStyle('background-position', '0px -' + size + 'px');
		} else {
			var glyph = this.getFirst();
			glyph.setStyle('top', '-' + size + 'px');
		}
	});
	
	close.addEvent('mouseout', function(e) { 
		if (!window.ie || window.ie7) {
			this.setStyle('background-position', '0px 0px');
		} else {
			var glyph = this.getFirst();
			glyph.setStyle('top', '0px');
		}
	});
	
	close.addEvent('mousedown', function(e){
		close.removeEvents('mouseover');
		close.removeEvents('mouseout');
		close.removeEvents('mousedown');
		GameDetailsView.remove();
	});
	
	// show the close button once the iframe has loaded...
	host.addEvent('load', function(e) { close.setStyle('display', 'block'); });
	
	GameDetailsView.closeElement = close;
	
	// bind events to close the window by other means...
	
	bg.addEvent('click', function(e) { GameDetailsView.remove(); });
	
	if (!window.ie) {
		window.addEvent('keypress', function(e) {
			if (e.keyCode == 27) GameDetailsView.remove();
		});
	}

}


GameDetailsView.remove = function() {
	
	// remove the key press listener...
	if (!window.ie) window.removeEvents('keypress');
	
	// remove the lightbox host/background...
	
	GameDetailsView.hostElement.remove();
	GameDetailsView.bgElement.remove();
	GameDetailsView.closeElement.remove();
	
	// restore the dirty page elements (flash content etc.)...
	
	for (var i = 0; i < GameDetailsView.dirtyElements.length; ++i) {
	
		var placeholder = GameDetailsView.placeholderElements[i];
		placeholder.remove();
	
		var elem = GameDetailsView.dirtyElements[i];
		GameDetailsView.showElement(elem);
	}
	
	GameDetailsView.dirtyElements = [];
	GameDetailsView.placeholderElements = [];
}


GameDetailsView.hideElement = function(elem) {
	//trace("-- hide: " + elem.getProperty('id'));
	
	// simply move the element... the rest were breaking the resume from render...
	
	elem.setStyle('left', '-2000px');
	
	//elem.setStyle('width', '1px');
	//elem.setStyle('height', '1px');
	//elem.setStyle('overflow', 'hidden');
	
	// completely obliterate the element in firefox (flash render issues). TEST.
	
	if (window.gecko) {
		elem.setStyle('position', 'static');
		elem.setStyle('top', '-2000px');
		elem.setStyle('left', '-2000px');
		elem.setStyle('display', 'none');
		elem.setStyle('visibility', 'hidden');
	}
}


GameDetailsView.showElement = function(elem) {
	//trace("++ show: " + elem.getProperty('id'));
	elem.setStyles('');
}