//global
var siteMode = 'live';

if((typeof console == "undefined")/* || (siteMode == 'live') */){
	window.console = {};
	console.log = function(content){
		//alert(contents);
	}
}
// text inputs
function getTextInputs() {
 	var frame = $('frame');
 	var textInputs = frame.getElements('input[type=text]');
 	textInputs.each(addInputEvents);
 }Onload.add(getTextInputs);

function addInputEvents(el,index,group){
 	var initValue = el.value;
	if(!el.hasClass("omitMemory")) {
	 	el.addEvents({
	 		'focus':clearInputValue.bindWithEvent(initValue),
	 		'blur':restoreInputValue.bindWithEvent(initValue)
	 	});
	}
 }
function clearInputValue(e){
 	var initValue = this;
 	var event = new Event(e);
 	if (initValue == event.target.value) {
 		event.target.value="";
 	}
}
function restoreInputValue(e){
 	var event = new Event(e);
 	var initValue = this;
 	if($type(initValue) != 'string'){
 		initValue = "";
 	}
 	if (event.target.value.trim() == "") {
 		event.target.value = initValue;
 	}
 	
}
//character count
function initCharCount(){
	if(!$type($('messageText'))){return;}
	var textarea = $('messageText');
	var target = $('charCount').getFirst();
	var limit = '100';
	textarea.addEvent('keyup', countCharacters.bindWithEvent(this, [target, limit]))
	
}Onload.add(initCharCount);
function countCharacters(x, target, limit){
	if(x.target.value.length < 100){
		target.set('text', x.target.value.length)
		target.setStyle('color', '#525557');
	}else{
		target.set('text', 'Limit Reached');
		var tmp = x.target.value;
		x.target.value = tmp.substr(0,limit);
		target.setStyle('color', 'red');
	}
	
}

/* popup */
function closeIngOverlay(x, y){
	
	// parent stays at .7 and image now needs to go back to 100%
	y.target.fade('in');
	if($type(x)&& $type(x.target)) {
		var fx = new Fx.Morph(x.target, {transition: Fx.Transitions.Expo.easeIn,duration:200,
			onComplete:function(){
				x.target.dispose();
			}
		});
		fx.start({'opacity':0,'top':x.target.getCoordinates().top + 100})
	}
}
function showIngOverlay(x, y){
	x.target.setStyle('opacity',.1);
	var coords = x.target.getCoordinates();
	var pos = x.target.getPosition(x.target.getParent());
	var scrolled = x.target.getParent().getParent().getScroll() 
	
	var olTop = coords.top+10; 
	var olToTop = coords.top -2; 
	var olLeft = coords.left -2; 
	if(Browser.Engine.trident && Browser.Engine.version < 7){
		olLeft = scrolled.x+olLeft;
	}
	
	if($type($('ingOverlay'))) {$('ingOverlay').dispose();}
	var ingOverlay = new Element('div',{
		'id':'ingOverlay',
		'text':y,
		'styles':{
			'opacity':0,
			'position':'absolute',
			'top':olTop,
			'left':olLeft,
			'z-index':200
		},
		'events':{
			'click':closeIngOverlay.bindWithEvent(this, x)
		}
	
	})
	ingOverlay.inject($(document.body),'bottom');
	var fx = new Fx.Morph(ingOverlay, {transition: Fx.Transitions.Expo.easeOut,duration:200,
		onComplete:function(){
			ingOverlay.addEvent('mouseleave',closeIngOverlay.bindWithEvent(this, x))	
		}
	});
	fx.start({'opacity':1,'top':olToTop})
}


function initSledMarquee() {
	if(!$type($('wis'))) {return;}
	
	var path = '../../../resources/images/sledMarquee/'
	var overlayImg = new Asset.image('../../../resources/images/backgrounds/ingOverlay.png');
	var imageList  = new Array(path+'sled_01.jpg', path+'sled_02.jpg', path+'sled_03.jpg',	path+'sled_04.jpg',	path+'sled_05.jpg',	path+'sled_06.jpg',	path+'sled_07.jpg',	path+'sled_08.jpg',	path+'sled_09.jpg',	path+'sled_10.jpg',	path+'sled_11.jpg',	path+'sled_12.jpg',	path+'sled_13.jpg',	path+'sled_14.jpg',	path+'sled_15.jpg',	path+'sled_16.jpg',	path+'sled_17.jpg',	path+'sled_18.jpg',	path+'sled_19.jpg',	path+'sled_20.jpg',	path+'sled_21.jpg',	path+'sled_22.jpg',	path+'sled_23.jpg',	path+'sled_24.jpg',	path+'sled_25.jpg',	path+'sled_26.jpg',	path+'sled_27.jpg',	path+'sled_28.jpg',	path+'sled_29.jpg',	path+'sled_30.jpg');
	var myImages = new Asset.images(imageList,{onComplete:function(){createSledMarquee(imageList)}});
}Onload.add(initSledMarquee);


function createSledMarquee(imgs) {
	var target = $('wis');
	target.setStyle('background','none');
	var imgCount = 30;
	var addImage = function(img, index) {
		var image = new Element('img',{
			'src':img,
			'styles':{
				'opacity':0
				}
		});
		image.inject(target, 'bottom');
		image.fade('in');
		
		if(index == imgCount-1){
			initMarqueeHighlight()
		}
	};
	var chainLoad = new Chain();
	
	imgs.each(function(image, index) {
		chainLoad.chain(addImage.pass([image, index]))
	});
	var runChain = function() { 
		chainLoad.callChain();
	};
	var timer = runChain.periodical(30);
	
};

function initMarqueeHighlight(){
	var items = [
		{'x':83,	'y':462,	'name':'Granite Gear Aqua-Therm'},
		{'x':45,	'y':342,	'name':'GSI Mug'},
		{'x':83,	'y':306,	'name':'GSI Fairshare Mug'},
		{'x':152,	'y':306,	'name':'Thermos 2 qt'},
		{'x':95,	'y':257,	'name':'Bergans of Norway Extreme Sleeping Mat'},
		{'x':228,	'y':365,	'name':'DeLorme PN-40 GPS'},
		{'x':258,	'y':335,	'name':'Iridium 9505-A Satellite Phone'},
		{'x':203,	'y':419,	'name':'Brunton Compass'},
		{'x':236,	'y':228,	'name':'Granite Gear Zip Sack'},
		{'x':443,	'y':384,	'name':'MSR Whisperlite International Stove'},
		{'x':294,	'y':374,	'name':'Victorinox Swiss Army Swiss Tool Spirit RS'},
		{'x':308,	'y':79,		'name':'Acapulka 160cm Pulk'},
		{'x':354,	'y':290,	'name':'Oakley Crowbar Goggles'},
		{'x':356,	'y':335,	'name':'Oakley Radar Sunglasses'},
		{'x':539,	'y':290,	'name':'MSR Blacklite 3L Pot with MSR Heat Exchanger'},
		{'x':429,	'y':275,	'name':'7L Stainless Teapot with MSR Heat Exchanger'},
		{'x':643,	'y':302,	'name':'Bergans of Norway Senja Ice Down Sleeping Bag'},
		{'x':737,	'y':238,	'name':'Bergans of Norway Ranger Primaloft Sleeping bag'},
		{'x':682,	'y':258,	'name':'Integral Designs Sleeping Bag Vapor Liner'},
		{'x':537,	'y':225,	'name':'Adventure Medical Kit Ultralight & Watertight Professional'},
		{'x':512,	'y':96,		'name':'GV Aerolite Showshoes'},
		{'x':614,	'y':404,	'name':'Therm-a-rest Classic Short Sleeping Pad'}
	]
	var pinImg = '';
	
	if(Browser.Engine.trident){
		pinImg = 'resources/images/backgrounds/highlight.gif'
	}else{
		pinImg =  'resources/images/backgrounds/highlight.png'
	}
	
	var chainPins = new Chain();
	
	items.each(function(el) {
		chainPins.chain(addMarqueeHighlight.pass([el, pinImg]))
	});
	var runChain = function() { 
		chainPins.callChain();
	};
	var timer = runChain.periodical(70); 
}

function addMarqueeHighlight(el, pinImg){
	var target = $('wis');
	var pin = new Asset.image(pinImg)
	var highlight = new Element('div',{
		'class':'highlight',
		'styles':{
			'top':el.y,
			'left':el.x,
			'opacity':0
		},
		'events':{
			'mouseenter':showIngOverlay.bindWithEvent(this, el.name)
		}
	});
	pin.inject(highlight);
	highlight.inject(target);
	
	var fy = new Fx.Morph(highlight, {transition: Fx.Transitions.Expo.easeOut,duration:200});
	var fx = new Fx.Morph(highlight, {transition: Fx.Transitions.Expo.easeIn,duration:200,
		onComplete:function(){
			fy.start({'opacity':.7,'height':20,'width':20,'margin':5})
		}
	});
	fx.start({'opacity':.8,'height':30,'width':30,'margin':0})
}



/* message handler */
function msgHandler(){
	if (window.msgControl.message === 'none') return;
	req = window.msgControl;


	function addNotice(str){
			var setClass = window.msgControl.message == 'notice' ? 'notice' : 'error';
			messageOb = new Element('span',{
				'class':setClass,
				'styles': {
			        'display': 'inline',
			        'margin-right':8
			    },
				'html':str
			});
			if(!$('genericNotice')) {
				var generic = new Element('div',{'id':'genericNotice'});
				var errorTarget = $('frame').getElement('.alpha')
				generic.inject(errorTarget, 'top');
			}
			messageOb.inject($('genericNotice'), 'bottom');
	}

	if(req.message == 'valid'){
		console.log('VALID-VALID-VALID-VALID');

		if($('e_'+req.collection.id)) {
			$('e_'+req.collection.id).dispose();
		}
	}
	if(req.message == 'notice'){
		console.log('NOTICE-NOTICE-NOTICE-NOTICE');
		// notice ONLY has one message in collection//
		// we're going to use an overlay for notice messages this time//
		/* addNotice(req.collection.msg);*/
		
		// init overlay
		messageOverlay(req.collection.msg)

		/*for(var i=0; i<req.collection.length; i++) {
			console.log(req.collection[i].msg)
			addNotice(req.collection[i].msg);
		}*/
	}else if(req.message == 'error'){
		console.log('ERROR-ERROR-ERROR-ERROR');

		if(typeof req.collection.length == 'undefined') addNotice(req.collection.msg);

		for(var i=0; i<req.collection.length; i++) {
			if($(req.collection[i].id)){
				var target = $(req.collection[i].id);
				var last = target.getParent().getLast();

				// if error already there, stop
				if(!$('e_'+req.collection[i].id)) {
					var msg = new Element('span', {'id':'e_'+req.collection[i].id, 'class':'error','html':req.collection[i].msg});
					/* here */
					
					msg.inject(last, 'after');
					var scrollToError = new Fx.Scroll(window);
					scrollToError.toElement(last.getPrevious())
					
				};
			}else{
				addNotice(req.collection[i].msg);
			}
		}
	}
}Onload.add(msgHandler);


function debug(txt) {
		var frame = $('frame');
		if(!$('debug')){
			var newEl = new Element('div', {
			    'styles': {
					'position':'absolute',
					'top':0,
					'left':0,
					'font-size':10,
					'width':250,
					'min-height':300,
					'z-index':9999,
					'display':'block',
					'background-color':'#fff',
					'border':'1px solid red'
			    },
			    'id': 'debug'
			});
			newEl.injectInside(frame);
			var dragger = new Drag(newEl);
			newEl.innerHTML += '<span id="clearDebug" style="text-decoration:underline;cursor:pointer;">Clear:</span><br />';
		}
	var debug = $('debug');
	debug.innerHTML += '<br />' + txt;
	var debugClear = $('clearDebug');
	debugClear.addEvent('click',function(){
		debug.innerHTML = '<span id="clearDebug" style="text-decoration:underline;cursor:pointer;">Clear:</span><br />';
	})
}

function initEquipmentModule() {
	if(!$type($('essentialEquipment'))) {return;}
	var path = '/resources/images/equipment/';
	var data = new Hash({options:[
		{'title':'ST-5000 Digital Compass',	subtitle:'Achieve Directional Accuracy',	copy:'A sleek timepiece packed with navigational features, including heading memory and 5-point LED heading accuracy.', src:path+'watch.jpg',	link:'http://www.swissarmy.com/Timepieces/Pages/Product.aspx?category=st+collection&product=24837'},
		{'title':'Night Vision II with LED',	subtitle:'Illuminate',		copy:'With an integrated LED flashlight and water resistance to 50 meters, the Night Vision II is a necessity in extreme weather conditions.',	src:path+'demo.jpg',	link:'http://www.swissarmy.com/Timepieces/Pages/Product.aspx?category=nightvision&product=241131'},
		{'title':'Swiss Tool Spirit',	subtitle:'Rugged and Lightweight',	copy:'27 features in an ergonomic design, the Swiss Tool Spirit is a backcountry essential.',	src:path+'tools.jpg',	link:'http://www.swissarmy.com/MultiTools/Pages/Product.aspx?category=doityourself&product=53809'},
		{'title':'Soldier Knife - 2009  Standard Issue',	subtitle:'Pure Functionality',	copy:'With its large one-hand-opening-lock blade, wood saw, can opener, screwdriver, and wire stripper the Soldier stands up to its name.',	src:path+'knife.jpg',	link:'http://www.swissarmy.com/Marketing/Pages/soldierknife.aspx'}
		]}
	);
	var imageList  = [];
	data.options.each(function(x){
		imageList.push(x.src);
	})
	var myImages = new Asset.images(imageList,{onComplete:function(){createEquipmentTout(data)}});
}Onload.add(initEquipmentModule);

function createEquipmentTout(data) {
	data = data.options;
	var cycle = 15000;
	var len = data.length;
	var target = $('essentialEquipment').getElement('.image');
	target.setStyle('background','none');
	var position = $random(0, 3);
	var zindex   = 0;
	
	function slectItem(){
		if(position >= 0 && position < len-1){
			position++;
		}else{
			position = 0;
		}
		zindex++;
		cycleEquipment(target, position, data[position], zindex)
	}
	
	var rotation = slectItem.periodical(cycle);
	cycleEquipment(target, position, data[position], 0)
	
	//pause cycle when mouse in module
	target.addEvents({
		'mouseenter':function(){
			clearRotation = $clear(rotation);
		},
		'mouseleave':function(){
			rotation = slectItem.periodical(cycle);
		}
		
	})
	
};
function updateCopy(data){
	var imageTarget = $('essentialEquipment').getElement('.image');
	
	if(imageTarget.getChildren().length > 2){
		imageTarget.getLast().dispose()
	}
	imageTarget.set('href', data.link)
	var target = $('essentialEquipment').getElement('.copy');
	
	var fx = new Fx.Tween(target, {transition: Fx.Transitions.Sine.easeOut,duration:80,
		onComplete:function(){
			target.getElement('h1').set('text', data.title)
			target.getElement('h2').set('text', data.subtitle)
			target.getElement('p').set('text', data.copy)
			target.getElement('a').set('href', data.link)
			target.fade('in')
		}
	});
	fx.start('opacity',0)
}


function cycleEquipment(target, position, data, zindex){
	var newTout = new Asset.image(data.src);
	newTout.setStyles({
		'opacity':0,
		'z-index':zindex
	})

	newTout.inject(target, 'top');
	
	var fy = new Fx.Morph(newTout, {transition: Fx.Transitions.Sine.easeOut,duration:40});
	var fx = new Fx.Morph(newTout, {transition: Fx.Transitions.Sine.easeIn,duration:40,
		onComplete:function(){
			fy.start({
				'opacity':1,
				'top':4,
				'left':4,
				'height':159,
				'width':258
			})
		}
	});
	fx.start({
		'opacity':5,
		'top':0,
		'left':0,
		'height':167,
		'width':266
	})
	updateCopy(data);
}
function centerElement(el){
	el = $(el);
	var elTop = (window.getCoordinates().height * .5) - (el.getCoordinates().height * .5).toInt();
	var elLeft = (window.getCoordinates().width * .5) - (el.getCoordinates().width * .5).toInt();
	el.setStyles({
		'top':elTop+window.getScroll().y,
		'left':elLeft
	})
}
function overlayCenterElement(el){
	var windowSize = window.getScrollSize();
	var dimmer = new Element('div',{'id':'dimmer'})
	dimmer.setStyles({
		'height':windowSize.y,
		'width':windowSize.x,
		'opacity':.5
	})
	dimmer.inject(document.body,'bottom');
	dimmer.addEvent('click',closePreview);
	var elTop = ((window.getCoordinates().height * .5) - (el.getCoordinates().height * .5) + window.getScroll().y).toInt();
	var elLeft = (windowSize.x * .5) - (el.getCoordinates().width * .5).toInt();
	el.setStyles({
		'top':elTop,
		'left':elLeft
	})
}
function messageOverlay(m){
	var html = m || 'Submitted... Please stand by';
	var overlay = new Element('div',{
		'id':'messageOverlay',
		'html':'<span>'+html+'</span>'
	})
	overlay.inject(document.body, 'bottom')
	overlayCenterElement(overlay);
	overlay.addEvent('click',closePreview);
};

function closePreview(){
	$('dimmer').dispose();
	$('messageOverlay').dispose();
	
}