/* Cookie */
/**********/
var Cookie = {
	set: function(name, value, hoursToExpire) {
		var expire = '';
		if (hoursToExpire != undefined) {
			var d = new Date();
			d.setTime(d.getTime() + (3600000 * parseFloat(hoursToExpire)));//86400000ms = 1 day
			expire = '; expires=' + d.toGMTString();
		}
		return (document.cookie = escape(name) + '=' + escape(value || '') + expire + '; path=/;');
	},
	get: function(name) {
		var cookie = document.cookie.match(new RegExp('(^|;)\\s*' + escape(name) + '=([^;\\s]*)'));
		return (cookie ? unescape(cookie[2]) : null);
	},
	erase: function(name) {
		var cookie = Cookie.get(name) || true;
		Cookie.set(name, '', -1);
		return cookie;
	},
	accept: function() {
		if (typeof navigator.cookieEnabled == 'boolean') {
			return navigator.cookieEnabled;
		}
		Cookie.set('_test', '1');
		return (Cookie.erase('_test') === '1');
	}
};

/* AgeGate */
/***********/
var AgeGate = Class.create({
	initialize: function(options) {
		// make sure we have the expected elements
		if(!$('agegate-overlay') || !$('selMonth') || !$('selDay') || !$('selYear')){return;}
		this.options = Object.extend({
			cookieName : 'DOB',
			hoursToExpire : 0,
			minAge : 21,
			maxAge : 100,
			populateSelects: true,
			elTooYoungErr: $$("#agegate #msg-too-young")[0]
		}, options || {});
		this.userDOB = new Date();
		
		this.__siteLoad();
		
		this.container = $('agegate-overlay');
		this.btnEnter = $('btn-enter');
		// Attach events to form
		$('btn-enter').observe('click', this.__enterClick.bindAsEventListener(this));
		
		if(options.populateSelects) {
			var now = new Date();
			var currentYr = now.getFullYear();

			// month
			var monthNames = $w('Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec');
			$('selMonth').childElements().invoke('remove');
			for(var i=0; i < monthNames.length; i++){
				$('selMonth').insert('<option value="' + (i+1) + '">' + monthNames[i] + '</option>');
			}
			$('selMonth').selectedIndex = 0;

			//day
			$('selDay').childElements().invoke('remove');
			for(var i=1; i <= 31; i++){
				$('selDay').insert('<option value="' + i + '">' + i + '</option>');
			}
			$('selDay').selectedIndex = 0;

			//year
			$('selYear').childElements().invoke('remove');
			var startYear = currentYr - (this.options.maxAge);
			for(var i = currentYr; i >= startYear; i--){
				$('selYear').insert('<option value="' + i + '">' + i + '</option>');
			}
			$('selYear').selectedIndex = 0;
		}
		$('selMonth').observe('change', function(e){
			var selectedMonth = e.element().value;
			if(selectedMonth == 2){
				$('selDay').childElements().invoke('remove');
				for(var i=1; i <= 29; i++){
					$('selDay').insert('<option value="' + i + '">' + i + '</option>');
				}
				$('selDay').selectedIndex = 0;
			} else if(selectedMonth == 4 || selectedMonth == 6 || selectedMonth == 9 || selectedMonth == 11){
				$('selDay').childElements().invoke('remove');
				for(var i=1; i <= 30; i++){
					$('selDay').insert('<option value="' + i + '">' + i + '</option>');
				}
				$('selDay').selectedIndex = 0;
			} else {
				$('selDay').childElements().invoke('remove');
				for(var i=1; i <= 31; i++){
					$('selDay').insert('<option value="' + i + '">' + i + '</option>');
				}
				$('selDay').selectedIndex = 0;
			}
		});
	},

	isOldEnough: function(dtDOB){
		var now = new Date();
		var minDOB = new Date();
		minDOB.setFullYear((now.getFullYear() - this.options.minAge));
		return (dtDOB <= minDOB)
	},

	__siteLoad: function(){
		var ck = this.getCookie();
		if(ck){// user already has a DOB cookie
			this.userDOB.setTime(Date.parse(ck));
			if(ck == 'true'){
				// remove the overlay
				this.__removeOverlay();
			} else {
				document.location = '/under13/home.action';
//				document.location = '/under13/';
			}
		} else {
			this.__showOverlay();
		}
		
	},

	__closeLnkClick: function(e){
		e.stop();
		this.__removeOverlay();
	},

	verify: function() {
		// get user input
		var ms = Date.parse($F('selMonth') + '/' + $F('selDay') + '/' + $F('selYear'));
		this.userDOB.setTime(ms);
		var isOfAge = this.isOldEnough(this.userDOB);
		
		if (isOfAge) {
			// success
			this.succeed();
		} else {
			// check age
			if(isOfAge) {
				this.options.elTooYoungErr.hide();
			} else {
				this.options.elTooYoungErr.show();
				// hide the form elements
				this.container.select('ol.fieldlist').first().hide();
				this.btnEnter.hide();
				this.fail();
			}
		}
	},

	succeed: function() {
		this.setCookie(true);
		this.__removeOverlay();
	},
	
	fail: function() {
		this.setCookie(false);
	},

	embedFlash: function() {
	    var settings_tr = {
	    	path: '_ui/swf/GiJoeShell.swf',
	    	width: '100%',
	    	height: '700px',
	    	version: '9.0.0',
	    	id: 'flash-target', // flash replace id
	    	expressInstall: false
	    };
	    var flashvars_tr = {
			xmlFile: "_ui/xml/gijoe_shell.xml",
			swfPath: "_ui/swf/",
			imgPath: "_ui/img/flash/"
	    };
		var params = {
			wmode: 'transparent',
			scale: 'noscale'
		};
		var attributes = {};
		swfobject.embedSWF(
			settings_tr.path,
			settings_tr.id,
			settings_tr.width,
			settings_tr.height,
			settings_tr.version,
			settings_tr.expressInstall,
			flashvars_tr,
			params,
			attributes
		);
		if (swfobject.getFlashPlayerVersion().major >= 9) {
			$('wrapper').setStyle({
				backgroundImage: 'none'
			});
		};
	},
	
	setCookie: function(dtDOB) {
		var ck;
		if(this.options.hoursToExpire == 0){
			ck = Cookie.set(this.options.cookieName, dtDOB.toString());
		} else {
			ck = Cookie.set(this.options.cookieName, dtDOB.toString(), this.options.hoursToExpire);
		}
	},

	getCookie: function() {
		return Cookie.get(this.options.cookieName);
	},

	__removeOverlay: function() {
		this.embedFlash();
		$('agegate-overlay').hide();
		$('overlay').removeClassName('agegate-active').hide();
		omnitureLoader.pageView($(document.body).id);
	},

	__stopRemove: function(e) {
		e.stop();
	},

	// event handlers
	__enterClick: function(evnt) {
		var e = evnt || window.event;
		// stop the submit event
		Event.stop(e);
		// verify the user input
		this.verify();
	},

	__showOverlay: function() {
		var viewportHeight = $(document.body).getHeight() + 'px';
		var viewportWidth = document.body.getWidth() + 'px';
		$('overlay').addClassName('agegate-active').setStyle({
			display: 'block',
			height: viewportHeight
		});
		$('agegate-overlay').setStyle({
			display: 'block'
		});
		var heightAgeGate = $("agegate").getHeight();
		var scrollOffset = document.viewport.getScrollOffsets()[1];
		omnitureLoader.overlayView();
	}
});

var interstitialOverlay = Class.create({
	initialize: function(options) {
		this.options = Object.extend({
			targetLinkSelector: 'a.target-link',
			targetLinkDestination: '_self',
			cancelLinkSelector: 'a.cancel-link',
			parentContainer: 'parent-overlay'
		}, options || {});
		this._createOverlay();
		this._insertOverlay();
		this.elDiv.hide();
        $$(this.options.targetLinkSelector).invoke('observe', 'click', this.__openClick.bindAsEventListener(this));
        $$(this.options.cancelLinkSelector).invoke('observe', 'click', this.__closeOverlay.bindAsEventListener(this));
	},

	_createOverlay: function() {
		this.elDiv = new Element('div', {'id': this.options.parentContainer});
		var elDivChild = new Element('div', {'id': this.options.parentContainer+'-child'});
		var elUl = new Element('ul');
		var elContinue = new Element('li');
		elContinue.insert(new Element('a', {'class': 'continue'}).writeAttribute('target', this.options.targetLinkDestination).update('<span>Continue</span>'));
		var elCancel = new Element('li');
		elCancel.insert(new Element('a', {'class': 'cancel-link', 'href': '#'}).update('<span>Cancel</span>'));
		this.elDiv.insert(elDivChild);
		elDivChild.insert(elUl);
		elUl.insert(elContinue);
		elUl.insert(elCancel);
	},

	_insertOverlay: function() {
		$('overlay').insert({after: this.elDiv});
	},

	show: function() {
		var viewportHeight = $(document.body).getHeight() + 'px';
		var viewportWidth = document.viewport.getWidth();
		this.elDiv.show();
		$('overlay').addClassName('interstitial-active').setStyle({
			display: 'block',
			height: viewportHeight
		});
		$(this.options.parentContainer).setStyle({
			left: (viewportWidth - $(this.options.parentContainer).getWidth()) / 2 +'px'
		});
		$('overlay').observe('click', this.__closeOverlay.bindAsEventListener(this));
	},

	hide: function() {
		$('overlay').hide();
		this.elDiv.hide();
	},

    __openClick: function(e) {
    	Event.stop(e);
		var elLink = Event.element(e);
		var siteURL = elLink.readAttribute('href');
		$(this.options.parentContainer).down('a.continue').setAttribute('href', siteURL);
		this.show();
	},
	
	__flashOpenClick: function(siteURL) {
		$(this.options.parentContainer).down('a.continue').setAttribute('href', siteURL);
		this.show();
	},
	
	__closeOverlay: function(e) {
		Event.stop(e);
		this.hide();
	}

});

var badgeOverlay = Class.create(interstitialOverlay,{
	initialize: function($super, options) {
		$super(options);
		$$('a.close-link').invoke('observe', 'click', this.__closeOverlay.bindAsEventListener(this));
	},

	_createOverlay: function() {
		this.elDiv = new Element('div', {'id': this.options.parentContainer});
		var elDivChild = new Element('div', {'id': this.options.parentContainer+'-child'});
		this.elDiv.insert(elDivChild);
		this.elDiv.insert({top: new Element('a', {'class': 'close-link', 'href': '#'}).update('<span>Close</span>')});
	},
	
	__openClick: function(e) {
    	Event.stop(e);
		this.show();
	}

});

var NoJsRemover = {
	initialize: function(){
		$$('.nojs').invoke('removeClassName', 'nojs');
		//$(document.body).removeClassName('nojs');
	}
}

var PopUps = Class.create({
	initialize: function (elPopups, hDefaultWinOptions) {
		// create a default options hash
		this.defaultOptions = $H({
			width: 450,
			height: 490,
			//windowPosition: 'center', //['top-left'|'top-center'|'top-right'|'center'|'bottom-left'|'bottom-center'|'bottom-right]
			//left:  #,					// DIY left position of the window
			//top:  #,					// DIY top position of the window
			hOffset: 100,					// Horizontal offset
			vOffset: 100,					// Vertical offset
			location: 'no',
			menubar: 'no',
			status: 'no',		
			toolbar: 'no',
			scrollbars: 'no',
			resizable: 'yes',
			fullscreen: 'no',			// Display the window in theater mode?
			channelmode: 'no',			// Display the browser in full-screen mode? (must also be in theater mode)
			titlebar: 'no',
			windowName: 'popup'
		}).update(hDefaultWinOptions);

		var linkEventHandle = this.__LinkClick.bindAsEventListener(this);
		var elementEventHandle = this.__ElementClick.bindAsEventListener(this);
	
		elPopups.each(function(el){
			el.observe('click', (el.nodeName == 'A') ? linkEventHandle : elementEventHandle);
		});

	},

	__LinkClick: function (e){
		var el = Event.findElement(e, 'a');
 		var url = el.readAttribute('href');
 		var instanceOptions;
 		if(el.readAttribute('rel')){
 			instanceOptions = $H(el.readAttribute('rel').evalJSON());
 		}
		e.preventDefault();
		
		this.openWindow(url, instanceOptions);
	},
	
	__FlashClick: function (url, options){
		var instanceOptions = {height:450, width:680, windowPosition:'center'};
		this.openWindow(url, instanceOptions);		
	},
	
	__ElementClick: function (e){
		var el = e.element();
		var params = el.readAttribute('_popup').evalJSON();
 		var url = el.readAttribute('_popup');
 		var instanceOptions;
 		if(params.winOptions){
 			instanceOptions = $H(params.winOptions);
 		}
		this.openWindow(params.url, instanceOptions);
	},	
	
	openWindow: function(url, instanceWinOptions){
		// Merge specific options hash set in the rel with default options
		var options = (instanceWinOptions) ? this.defaultOptions.merge($H(instanceWinOptions)) : this.defaultOptions.clone();
		
		// position the window if specified
		if(options.get('windowPosition')){
			var pos = options.unset('windowPosition');	
			var left, top;
			var availHeight = screen.availHeight, availWidth = screen.availWidth;
			var popupHeight = options.get('height'), popupWidth = options.get('width');
			var vOffset = options.get('vOffset'), hOffset = options.get('hOffset');
			switch(pos){
				case 'top-left': 
					top = 0 + vOffset;
					left = 0 + hOffset;
					break;
				case 'top-center': 
					top = 0 + vOffset;
					left = ((availWidth - popupWidth)/2) + hOffset;
					break;
				case 'top-right': 
					top = 0 + vOffset;
					left = availWidth - (popupWidth + hOffset);
					break;
				case 'center': 
					top = ((availHeight - popupHeight)/2) + vOffset;
					left = ((availWidth - popupWidth)/2) + hOffset;
					break;
				case 'bottom-left': 
					top = availHeight - (popupHeight + vOffset);
					left = 0 + hOffset;
					break;
				case 'bottom-center': 
					top = availHeight - (popupHeight + vOffset);
					left = ((availWidth - popupWidth)/2) + hOffset;
					break;
				case 'bottom-right': 
					top = availHeight - (popupHeight + vOffset);
					left = availWidth - (popupWidth + hOffset);
					break;
			}
			options.set('top', top);
			options.set('left', left);
		}

		var win = window.open(url, escape(options.unset('windowName')), options.invoke('join', '=').join(','));
		if (window.focus) {
			win.focus()
		}
	}
});

document.observe("dom:loaded", function() {
	GIJoeAgeGate = new AgeGate({
		cookieName : 'DOB',
		hoursToExpire : 24,
		minAge : 13, 
		maxAge : 100, 
		populateSelects: true
	});

	window.leavingSite = new interstitialOverlay({
		parentContainer: 'exit-overlay',
		targetLinkSelector: 'a.exit-link'
	});	
	$('exit-overlay').down('div').insert({top: $('exit-copy')});
	$('exit-copy').removeClassName('invisible');
	
	window.popUps = new PopUps($$('.popup'), {windowName: 'defaultWindowName', windowPosition: 'top-left'});
	
	var openBadge = new badgeOverlay({
		parentContainer: 'badge-overlay',
		targetLinkSelector: 'a.badge-link'
	});	
	$('badge-overlay').down('div').insert({top: $('badge-widget')});
	$('badge-widget').removeClassName('invisible');
});