/*	
	
	This JavaScript file is different than the one found inside the www domain
	I've stripped out all the "extra" functions, so only the basic layout fixes remain.
	
	1.) openWindow() - convenience function to open chromeless windows
	2.) Menu() - fix for IE hover issues in the navigation
	3.) Element() - fix for IE png transparence
	3.) Layout() - fix for CSS layout issues due to absolute positioning

	HISTORY: 
	
	06/21/08	ryan@capitolmedia.com
				Deleted all the unused functions 
				
	06/26/08	ryan@capitolmedia.com
				Fixed z-index issues in IE7 for ProductPreview
				Changed Element.fix() to only call for IE6
*/


/*	---------------------------------------------------------------------------
	FUNCTION:	openWindow()
	
	Opens a new JS window
*/

function openWindow (html, name, layout, width, height) {
	var action = "'" + html + "', '" + name + "', 'menubar='" + layout + ", 'width='" + width + ", 'height='" + height + ", 'toolbar='" + layout + ", 'scrollbars='" + layout + ", 'status='" + layout + ", 'resizeable='" + layout + ", 'toolbar='" +layout; 
	window.open(action);
}



/*	---------------------------------------------------------------------------
	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.

	REQUIREMENTS:
	Styles found in default.css
	
	TESTED IN:
	Windows: IE 6, Firefox 1, Opera 8
	Mac: IE 5.2, Firefox 1, Safari 1
*/

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:		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;
	}
});


/*	---------------------------------------------------------------------------
	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.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.get('tween',{property:'height',duration:100}).start(y);
	}
});


/*	---------------------------------------------------------------------------
	Initialize the page
*/

window.addEvent('domready',function() {

	// fix CSS layout issues due to absolute positioning
	var layout = new Layout('Wrapper',['Canvas','Left']);
	
	// fix IE bugs for primary navigation
	var primary = new Menu('Primary');
	
	// add click event to "I want to stay informed" in header
	// $('ShowSubscribe').addEvent('click',showSubscribe);
	
	// fix PNG transparency in IE6
	if(Browser.Engine.trident4) $$('img[src$=png]').fix();

});


/*	---------------------------------------------------------------------------
	CLASS:		ProductPreview(selector)
	AUTHOR:		Ryan J. Salva, ryan@capitolmedia.com
	HISTORY:	06/21/08 - v1.0

	ABOUT:		Displays a product preview from the product list page
*/

var ProductPreview = new Class({
	Implements: [Options,Events],
	options: {
		onComplete: $empty,
		onStart: $empty
	},
	initialize: function(selector,options){
		this.showing = false;
		this.els = $$(selector);
		this.els.each(function(el,index) {
			el.setStyle('z-index',this.els.length+10-index);
			this.addItem(el);
		}.bind(this));
	},
	addItem: function(el) {
		var pop = el.getElements('.Pop')[0];
		pop.setStyles({
			'opacity':1,
			'width':0,
			'height':0,
			'overflow':'hidden',
			'display':'block',
			'z-index':1000
		});
		var close = new Element('span',{
			'class':'Close',
			'text':'close',
			'events':{
				'click':function(e) {
					this.hide(pop);
				}.bindWithEvent(this)
			}
		});
		pop.adopt(close);

		var open = new Element('span',{
			'class':'Open',
			'styles':{
				'display':'none',
				'z-index':10
			},
			'text':'preview',
			'events':{
				'click':function(e) {
					this.show(pop);
				}.bindWithEvent(this)
			}
		});
		
		el.addEvents({
			'mouseenter':function(e) {
				open.setStyle('display','block');
			},
			'mouseleave':function(e) {
				open.setStyle('display','none');
			}
		});
		el.adopt(open);
	},
	show: function(pop) {
		if (this.showing) this.hide(this.showing);
		pop.morph({
			'width':300,
			'height':400
		});
		this.showing = pop;
	},
	hide: function(pop) {
		this.showing = false;
		pop.morph({
			'width':0,
			'height':0
		});
	}
});

//	---------------------------------------------------------------------------
//	CLASS:		Modal();
//	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: 500,
		maskColor: '#000000',
		width: 400,
		height: 'auto',
		classPrefix: 'Modal',
		onHide: Class.empty,
		onShow: Class.empty,
		onStart: Class.empty
	},
	initialize: function(options) {
		this.setOptions(options);
		this.isShowing = false;
		var classPrefix = this.options.classPrefix;
		this.mask = new Element('div', {
			'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
			},
			'class':classPrefix+'Mask'
		});
		this.pop = new Element('div',{
			'styles':{
				'position': 'absolute',
				'visibility': 'hidden',
				'width': '100%',
				'margin': 0,
				'z-index': 10000
			},
			'class':classPrefix+'Pop'
		});
		this.container = new Element('div',{
			'styles':{
				'margin':'0 auto'
			},
			'class':classPrefix+'Container'
		});
		this.close = new Element('div',{'class':classPrefix+'Close'}).adopt(new Element('a', {'href':'#', 'text':'Close'}));

		this.fade = new Fx.Tween(this.mask, {duration:this.options.speed});
		this.slide = new Fx.Tween(this.pop, {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.clone().cloneEvents(el));
				break;
			case 'string':
				this.el = new Element('div',{'styles':{'height':this.options.height},'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',{'text':title,'class':classPrefix+'Title'});
		
		if(this.isShowing) {
			this.container.adopt(title, message);
		} else {
			this.close.getElement('a').addEvent('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.fade.start('opacity',0.8);
		var slideTo = ((window.getSize().y - this.container.getSize().y) / 2 + window.getScroll().y);
		this.slide.start('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.slide.start('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);
		this.slide.cancel();
		var slideTo = window.getScroll().y - this.pop.getSize().y;
		this.slide.start('top',slideTo).chain(function() {
			this.pop.destroy();
			this.fade.start('opacity',0).chain(function() {
				this.mask.destroy();
				this.isShowing = false;
				this.fireEvent('onHide');
			}.bind(this));
		}.bind(this));
	}
});



function showSubscribe() {
	var subscribe = new Modal({width:420});
	var iframe = new IFrame({ 
		src: 'http://www.zokacoffee.com/index.php/page/Display/subscribe',
		styles: { 
			'width': '100%', 
			'height': 300, 
			'border': 'none',
			'background':'#ffffff'
		},
		scrolling: 'no'
	});
	subscribe.show(iframe);
}