/*	---------------------------------------------------------------------------
	CLASS:		Layout(el[,columns])
	AUTHOR:		Ryan J. Salva, http://www.capitolmedia.com
	LICENSE:	MIT License, <http://en.wikipedia.org/wiki/MIT_License>	
	REVISED:	January 2008
	EXAMPLE:	<div id="Wrapper"><div id="Left">Foo</div><div id="Right">Bar</div></div>
				var x = new Layout('Wrapper',['Left','Right']);
	ABOUT:		Utility function designed to fix any layout using aboslute positioning for each column
				Adjusts the page to make wrapper as tall as the highest column (left, right, etc.)
				Most Capitol Media websites use the column ids: Left, Right, Middle and Canvas	
*/

var Layout = new Class({
	initialize: function(el,columns){
		this.columns = columns;
		this.el = $(el);
		if (!$defined(this.el)) return false;
		
		this.el.setStyle('overflow','hidden');
		this.columns.each(function(col,index) {
			this.columns[index] = $(col);
		}.bind(this));
		this.columns = this.columns.clean();
		this.el.set('tween', {duration: 100});
		this.periodical = this.update.bind(this).periodical(200);
	},
	update: function() {
		var y = 0;
		this.columns.each(function(col,index) {
			var h = col.getCoordinates().height;
			if(h > y) y = h;
		});
		this.el.setStyle('height',y);
	}
});


/*	---------------------------------------------------------------------------
	CLASS:		Element
	METHOD:		fix();
	ABOUT:		Fixes alpha transparency in IE6
	REVISED:	February 27, 2008
*/

Element.implement({
	fix: function(){
		if(!Browser.Engine.trident) return this;
		var src;
		var size = this.getSize();
		if(this.get('tag')=='img'){
			src = this.get('src');
			if(src.indexOf('.png') < 0) return this;
			this.set('src', '/site/x.gif');
		} else {
			var bg = this.getStyle('background-image');
			if(bg && bg!='none')
				src = bg.match(/\(([^)]+)\)/)[1];
			if(src.indexOf('.png') < 0) return this;
		}
		if (src) {
			if(this.getStyle('display')=='inline' && !['input', 'textarea', 'button'].contains(this.get('tag'))) {
				this.setStyles({
					'display': 'block',
					'width': size.x,
					'height': size.y
				});
			}
			this.setStyles({
				'background': '',
				'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", src="'+src+'", sizingMethod="crop")'
			});
		}
		return this;
	}
});
if(Browser.Engine.trident4) window.addEvent('domready', function() {
	$$('img[src$=png]').fix();
});



/*	---------------------------------------------------------------------------
	CLASS:		Menu();
	AUTHOR:		Ryan J. Salva
	REVISED:	December 2007

	Creates a drop-down menu for navigation. Also Corrects Windows IE support 
	for LI:hover and adds an <IFRAME> behind drop-down menus to keep the 
	menu above <SELECT> elements.
*/

var Menu = new Class({
	Implements: Options,
	options: {
		iframe: false,
		onComplete: Class.empty,
		onStart: Class.empty
	},
	initialize: function(el,options){
		this.el = $(el);
		if (!$defined(this.el)) return false;
		this.setOptions(options);
		
		this.el.getElements('li').each(function(li,index) {
			li.addEvent('mouseenter',function() {
				this.addClass('hover');
			});
			li.addEvent('mouseleave',function() {
				this.removeClass('hover');
			});
		});
		if (this.options.iframe) this.addIframe();
	},
	addIframe: function() {
		this.el.getElements('ul').each(function(ul,index) {
			var coord = ul.getCoordinates();
			var iframe = new Element('iframe',{'src':'about:blank','styles':{
				overflow:'hidden',
				border:0,
				width: coord.width,
				height: coord.height,
				left: 0,
				top: 0,
				zIndex: -10,
				opacity: 0
			}});
			iframe.injectTop(ul);
			ul.setStyle('z-index',99);
		});
	}
});


/*	---------------------------------------------------------------------------
	CLASS:		FormTip(selector,[className])
	AUTHOR:		Ryan J. Salva
	REVISED:	December 2008
*/

var FormTip = new Class({
	Implements: Options,
	options: {
		className: 'FormTip'
	},
	initialize: function(selector,options){
		this.setOptions(options);
		this.els = $$(selector);
		this.els.each(function(el,index){
			el.addEvent('focus',this.show.bindWithEvent(this));
			el.addEvent('blur',this.hide.bindWithEvent(this));
		}.bind(this));
	},
	show: function(e) {
		var e = new Event(e);
		var el = e.target;
		if ($type(el) != 'element') return false;
		var title = el.getAttribute('title');
		if (!$defined(title)) return false;
		var pos = el.getPosition(el.getOffsetParent());
		var width = el.getWidth();
		this.tip = new Element('div',{'class':this.options.className,'styles':{
			opacity: 0,
			position: 'absolute',
			left: pos.x + width,
			top: pos.y
		}}).setText(title);
		this.tip.inject(el.getParent(),'inside');
		this.tip.tween('opacity',1); 
	},
	hide: function() {
		this.tip.remove();
	}
});



/*	---------------------------------------------------------------------------
	CLASS:		Fader(container,[pause,duration,loop])
	AUTHOR:		Ryan J. Salva
	MODIFIED: December 22, 2007
 
	creates a single, rotating image on a page

	IMPLEMENTATION:
	<div id="Container">
		<img src="1.jpg" /><img src="2.jpg" /><img src="3.gif" />
	</div>
	<script type="text/javascript">
		window.addEvent('domready',function() { 
			var f = new Fader('Container');
			f.start();
		});
	</script>
*/

var Fader = new Class({
	Implements: Options,
	options: {
		pause: 5000,
		duration: 1000,
		loop: true,
		type: 'img'
	},
	initialize: function(container,options) {
		this.setOptions(options);
		this.container = $(container);
		this.imgs = this.container.getElements(this.options.type);
		this.imgs.setStyles({
			'position':'absolute',
			'top':0,
			'left':0,
			'opacity':0
		});
		this.imgs[0].setStyle('opacity',1);
		this.el = new Element('div',{'styles': {
			'position':'relative'
	    }});
	    this.el.injectInside(this.container);
	    this.el.adopt(this.imgs);
		this.next = this.imgs.length - 1;
		this.start();
	},
	start: function() {
		this.show();
		this.periodical = this.show.bind(this).periodical(this.options.pause);
	},
	stop: function() {
		$clear(this.periodical);
	},
	show: function() {
		if (!this.options.loop && this.next==this.imgs.length-1) this.stop();
		this.next = (this.next==this.imgs.length-1)?0:this.next+1;
		var prev = (this.next==0)?this.imgs.length-1:this.next-1;
		
		this.imgs[this.next].fade('in');
		this.imgs[prev].fade('out');
		
		/*
		var onclick = this.imgs[this.next].getProperty('onclick'); 
		
		if(onclick != '') {
			
			this.container.setProperty('onclick', onclick);
		}*/
	}
});


/*	---------------------------------------------------------------------------
	CLASS:		Counter(el);
	AUTHOR:		Ryan J. Salva, http:www.capitolmedia.com
	REVISED:	January 2008

	Places a counter on the page displaying the number of remaining characters 
	in a form element
	
	IMPLEMENTATION:
	
	<span id="target"></span>
	<textarea id="myText"></textarea>
	
	<script language="javascript">
		var counter = new Counter('myText',{'counter':'target','maxlength':1000});
	</script>
*/

var Counter = new Class({
	Implements: Options,
	options: {
		counter: null,
		maxlength: 500,
		onComplete: Class.empty,
		onStart: Class.empty
	},
	initialize: function(el,options){
		this.setOptions(options);
		this.el = $(el);
		this.max = ($defined(this.el.getAttribute('maxlength')))?this.el.getAttribute:this.options.maxlength;
		this.len = this.el.value.length;
		
		if ($defined(this.options.counter)) {
			this.counter = $(this.options.counter);
		} else {
			this.counter = new Element('span');
			this.counter.inject(this.el,'after');
		}
		this.counter.setText(this.max - this.len);
		this.el.addEvent('keyup',this.update.bind(this));
	},
	update: function(e) {
		this.len = this.el.value.length;
		this.counter.setText(this.max - this.len);
		if (this.len >= this.max) {
			this.el.value = this.el.value.substring(0,this.max - 1);
			if (this.el.createTextRange) {
				var range = this.el.createTextRange();
				range.collapse(false);
				range.select();
			}
			this.el.scrollTop = this.el.scrollHeight;
		}
	}
});


/*	---------------------------------------------------------------------------
	CLASS:		Modal([speed,maskColor,width,height,classPrefix,onHide,onShow,onStart]);
	OPTIONS:	speed: the transition speed (default:500)
				maskColor: the background color of the mask (default: black)
				width: default width of the dialog box (default:400px)
				height: default height of the dialog box (default: auto)
				classPrefix: used to define unique classes for each dialog box (default: "Modal")
				onHide: event
				onShow: event
				onStart: event
	AUTHOR:		Ryan J. Salva, http:www.capitolmedia.com
	REVISED:	January 2008
*/

Modal = new Class({
	Implements: [Events, Options],
	options: {
		speed: 200,
		maskColor: '#000000',
		width: 400,
		height: 'auto',
		classPrefix: 'Modal',
		onHide: $empty,
		onShow: $empty,
		onStart: $empty
	},
	initialize: function(options) {
		this.setOptions(options);
		this.isShowing = false;
		var classPrefix = this.options.classPrefix;
		this.mask = new Element('div', {
			'class':classPrefix+'Mask',
			'styles':{
				'position':'absolute',
				'top': 0,
				'left': 0,
				'opacity': 0,
				'height': (window.getHeight() > window.getScrollHeight()) ? window.getHeight() : window.getScrollHeight(),
				'width': '100%',
				'background':this.options.maskColor,
				'z-index': 9999
			}
		});
		this.pop = new Element('div',{
			'class':classPrefix+'Pop',
			'styles':{
				'position': 'absolute',
				'visibility': 'hidden',
				'width': '100%',
				'margin': 0,
				'z-index': 10000
			}
		});
		this.container = new Element('div',{
			'class':classPrefix+'Container',
			'styles':{
				'margin':'0 auto'
			}
		});
		this.mask.set('tween',{duration:this.options.speed});
		this.pop.set('tween',{duration: this.options.speed});
		
		this.fireEvent('onStart');
	},
	show: function(el, title) {
		var classPrefix = this.options.classPrefix;
		switch($type(el)) {
			case 'element':
				this.el = new Element('div',{'styles':{'height':this.options.height}}).adopt(el);
				break;
			case 'string':
				this.el = new Element('div',{'styles':{'height':this.options.height}}).set('html', el);
				break;
			default:
				return false;
				break;
		}
		var message = new Element('div').addClass(classPrefix+'Message').adopt(this.el);
		if(title) var title = new Element('div').setText(title).addClass(classPrefix+'Title');
		
		if(this.isShowing) {
			this.container.adopt(title, message);
		} else {
			this.close = new Element('div');
			this.close.adopt(new Element('a', {
				'href':'#', 
				'text':'Close',
				'class':classPrefix+'Close',
				'events': {
					'click': function(event) {
						event.stop();
						this.hide();
					}.bind(this)
				}
			}));
			window.addEvent('keydown', function(event) {
				if(event.key == 'esc') this.hide();
			}.bind(this));
			
			$$('object', 'select').setStyle('visibility', 'hidden');
			
			$$('body').adopt(this.mask, this.pop);
			this.container.adopt(this.close, title, message);
			this.container.inject(this.pop, 'inside').setStyle('width', this.options.width);
		}
		
		this.pop.setStyles({
			'top': window.getScroll().y - this.pop.getSize().y,
			'visibility':'visible'
		});

		this.mask.tween('opacity',0.8);
		var slideTo = ((window.getSize().y - this.container.getSize().y) / 2 + window.getScroll().y);
		this.pop.tween('top',slideTo);
		this.periodical = this.update.periodical(100, this);
		this.isShowing = true;
		this.fireEvent('onShow');
	},
	update: function() {
		var slideTo = ((window.getSize().y - this.container.getSize().y) / 2 + window.getScroll().y);
		this.pop.tween('top',slideTo);
		var h = (window.getSize().y > window.getScrollSize().y) ? window.getSize().y : window.getScrollSize().y;
		this.mask.setStyle('height', h);
	},
	hide: function() {
		$$('object', 'select').setStyle('visibility', 'visible');
		$clear(this.periodical);
		var slideTo = window.getScroll().y - this.pop.getSize().y;
		this.close.destroy();
		this.pop.dispose();
		this.mask.tween('opacity',0);
		this.isShowing = false;
		this.fireEvent('onHide');
	}
});


/*	---------------------------------------------------------------------------
	CLASS:		Ticker(el,[speed,delay,direction]);
	OPTIONS:	speed:		the transition speed (default:500)
				delay:		the amount of time a news item stays at a position (default: 5000)
				direction:	horizontal or vertical scrolling (default: 'vertical')
	AUTHOR:		Ryan J. Salva
	EMAIL		ryan at capitolmedia.com
	REVISED:	September 2008
*/

var Ticker = new Class({
	Implements: Options,
	options: {
		speed: 1000,
		delay: 5000,
		direction: 'vertical'
	},
	initialize: function(el,options){
		this.setOptions(options);
		this.el = $(el);
		this.items = this.el.getElements('li');
		var w = 0;
		var h = 0;
		if(this.options.direction.toLowerCase()=='horizontal') {
			h = this.el.getCoordinates().height;
			this.items.each(function(li,index) {
				w += li.getCoordinates().width;
			});
		} else {
			w = this.el.getCoordinates().width;
			this.items.each(function(li,index) {
				h += li.getCoordinates().width;
			});
		}
		this.el.setStyles({
			position: 'absolute',
			top: 0,
			left: 0,
			width: w,
			height: h
		});
		this.fx = new Fx.Morph(this.el,{duration:this.options.speed,onComplete:function() {
			var i = (this.current==0)?this.items.length:this.current;
			this.items[i-1].injectInside(this.el);
			this.el.setStyles({
				left:0,
				top:0
			});
		}.bind(this)});
		this.current = 0;
		this.next();
	},
	next: function() {
		this.current++;
		if (this.current >= this.items.length) this.current = 0;
		var pos = this.items[this.current];
		this.fx.start({
			top: -pos.offsetTop,
			left: -pos.offsetLeft
		});
		this.next.bind(this).delay(this.options.delay+this.options.speed);
	}
});


var Tabs = new Class({
	Implements: Options,
	options: {
		classPrefix: 'Panel'
	},
	initialize: function(panels, options) {
		this.setOptions(options);
		if (panels.length <= 0) return false;
		
		this.panels = panels;
		this.panels.setStyle('display','none');
		
		this.tabs = [];
		this.panels.each(function(el,index) {
			var tab = new Element('span',{
				'class':this.options.classPrefix+'Tab DoNotPrint',
				'text':el.get('title'),
				'events':{
					'click':function(e){
						e.stop();
						this.activate(el,e.target);
					}.bindWithEvent(this)
				}
			});
			this.tabs.include(tab);
		}.bind(this));
		
		this.frame = new Element('div', {
			'class':this.options.classPrefix + 'Frame'
		});
		this.frametopleft = new Element('div', {
			'class':this.options.classPrefix + 'FrameTopLeft'
		});
		this.frametop = new Element('div', {
			'class':this.options.classPrefix + 'FrameTop'
		});
		this.frametopright = new Element('div', {
			'class':this.options.classPrefix + 'FrameTopRight'
		});
		this.framebottomleft = new Element('div', {
			'class':this.options.classPrefix + 'FrameBottomLeft'
		});
		this.framebottom = new Element('div', {
			'class':this.options.classPrefix + 'FrameBottom'
		});
		this.framebottomright = new Element('div', {
			'class':this.options.classPrefix + 'FrameBottomRight'
		});
		
		this.content = new Element('div',{
			'class':this.options.classPrefix+'Content',
			'styles':{
				'overflow':'hidden',
				'height':0
			}
		});
		
		this.frame.inject(this.panels[0],'before');
		this.frame.adopt(this.frametopleft);
		this.frame.adopt(this.frametop);
		this.frame.adopt(this.frametopright);
		this.frame.adopt(this.content);
		this.frame.adopt(this.framebottomleft);
		this.frame.adopt(this.framebottom);
		this.frame.adopt(this.framebottomright);
		
		var framesize = this.frame.getSize();
		this.frametop.setStyle('width', (framesize.x - 10) + 'px');
		this.framebottom.setStyle('width', (framesize.x - 10) + 'px');
		
		this.panels.each(function(el,index) {
			this.content.adopt(el);
		}.bind(this));
		
		this.tabs.each(function(el,index){
			el.inject(this.frame,'before');
		}.bind(this));
		
		this.tabs[0].addClass(this.options.classPrefix +'TabFirst');
		this.tabs[this.tabs.length - 1].addClass(this.options.classPrefix +'TabLast');
		this.activate(this.panels[0],this.tabs[0]);

		
	},
	
	activate: function(panel,tab){
		this.panels.removeClass(this.options.classPrefix+'Active');
		panel.addClass(this.options.classPrefix+'Active');
		
		this.panels.setStyle('display','none');
		panel.setStyle('display','block');
		
		this.tabs.each(function(el,index){
			el.removeClass(this.options.classPrefix+'Active');
		}.bind(this));
		tab.addClass(this.options.classPrefix+'Active');
		
		this.content.setStyle('height',panel.getSize().y);
		this.frame.setStyle('height',panel.getSize().y);
		
		if(panel.get('title') == 'Where to Buy') {
			if(product_page_name == "refuel-chocolate" || 
			   product_page_name == "cultured-buttermilk-powder") {
				var wtbpanel = $$(".WTBPanel"); 
				$$(".WTBPanel").setStyle('background', "#ffffff");
			} else if($("WTBResultIFrame") != null && $("WTBResultIFrame").get('src') == undefined) {
				$("WTBResultIFrame").set('src', wheretogetit_path);
			}
		}
	}
});

function markSelected(value, selectCtl) {
	var options = selectCtl.getChildren();
	$each(options, function(option, index) {
		if(option.value == value) {
			option.selected = true;
		} else {
			option.selected = false;
		}
	});
}