window.addEvent('domready',function()
{
	/* first we insert javascript only CSS! */
	var javascriptOnlyCSS = new Element('link', {
		'rel': 'stylesheet',
		'type': 'text/css',
		'href': 'design/css/javascriptOnly.css'
	});
	javascriptOnlyCSS.inject(document.head);

	/**************************************
	 * Thanks Michelle ^_^
	 * Magic Toggley.  Just add the class name 'toggler' and in the rel the id
	 * of the element to effect.
	 * Example: <a href="blah" class="toggler" rel="blahBox">
	 * An active toggler gets the class name active.
	 * A closed box gets the class name closed.
	 * Remember the 'toggleClosed' class name on each togglable element or bad shit
	 * will happen.
	 *************************************/

	$$('.toggler').each(function(toggler) {
		
		// hide relled items!
		var victim = $(toggler.get('rel'));
		if (victim) { victim.setStyle('opacity', 0); }
		
		// the click
		$(toggler).addEvent('click', function(e) {
			if (!this.get('type') == 'checkbox') { e.stop(); }
			
			// in
			if (!this.hasClass('togglerOpen')) { 	
				victim.fade('in').removeClass('toggleClosed');
				this.addClass('togglerOpen');
				if (this.get('type') == 'checkbox') {this.set('checked', true);}
			}
			
			// out
			else {
				victim.fade('out').addClass('toggleClosed');
				this.removeClass('togglerOpen');
				if (this.get('type') == 'checkbox') {this.set('checked', false);}
			}
		});		
	});
	
  // smooth scrolling
  var mySmoothScroll = new SmoothScroll({
    links: '.smoothAnchors',
    wheelStops: false
  });
    
// this function is for fields, and fills in some stuff

	function LabelInField(field, theValue){
	
		if ($(field)){
			field = $(field);
	
			field.addEvents({
				'click': function(){
					if (this.get('value') == theValue) { this.set('value', ''); }
				},
				'blur': function(){
					if (this.get('value') =='') { this.set('value', theValue); }
				},
				'domready': function(){
					if (this.get('value') =='') { this.set('value', theValue); }
				}
			});
	
		} // /end-if
	
	}
	// lets do some! 
	var fieldResetm2SearchDrop = new LabelInField('m2SearchDropInput', 'Search...');

/* --------------------------- */
/*	Here are some tooltips! 
/* --------------------------- */

	// thumb grid tooltips:
	if ($('thumbGrid')){
	
		var gridThumbFinishes = $('thumbGrid').getElements('span.finishes').getElements('a');
		var gridThumbFinishesTips = new Tips(gridThumbFinishes,{
			className: 'simpleTips'
		});
		
		// now store titles in them!
		gridThumbFinishes.each(function(item){
			item.store('tip:text', 'Available Finish:');
		});
	} 	// end thumb grid tooltips
	


	// prodInfoFinishesAvailable tooltips:
	if ($$('.prodInfoFinishesAvailable')){
	
		// because there's multiples, we iterate through each:
		$$('.prodInfoFinishesAvailable').each(function(item){
			var prodInfoFinishesAvailable = item.getElements('a');
			
			var prodInfoFinishesAvailableTips = new Tips(prodInfoFinishesAvailable,{
				className: 'simpleTips'
			});
			
			// now store titles in them!
			prodInfoFinishesAvailable.each(function(item){
				item.store('tip:text', 'Available Finish:');
			});
		
		});

	} 	// end prodInfoFinishesAvailable
	

	
	// prodInfoFunctionsAvailable tooltips:
	if ($('prodInfoFunctionsAvailable')){

		var prodInfoFunctionsAvailable = $('prodInfoFunctionsAvailable').getElements('a');

		var prodInfoFunctionsAvailableTips = new Tips(prodInfoFunctionsAvailable,{
			className: 'simpleTipsWider'
		});
		
		// now store titles in them!
		prodInfoFunctionsAvailable.each(function(item){
			item.store('tip:text', 'Available Function:');
		});
	} 	// end prodInfoFunctionsAvailable	
	
	





	// functionality for question marks in grey bar in search
	$$('.greyBar').each(function(bar) {
		var help = bar.getElement('a.helpCircle');
		help.fade('hide');
		bar.addEvents({
			'mouseenter': function(){
				help.fade('in');
			},
			'mouseleave': function(){
				help.fade('out');
			}
		});
	});

	// now tooltips for the question marks	
	var gridThumbFinishesTips = new Tips('.helpCircle',{
		className: 'questionMarkTips'
	});
	
	// change view!
  var linkySelects = $$('.selectDetailedView');
	linkySelects.each(function(sel, i) {
		sel.addEvent('change', function(e) {
			e.stop();

			if ($('thumbGrid').hasClass('detailedSearchResults') && (sel.get('value') =='simple')){
				
				$$('.searchResultsGrid').each(function(theDiv){
						theDiv.removeClass('detailedSearchResults');
//						theSearchCookie.set('style', 'simple');
				});

			} else {
			
				$$('.searchResultsGrid').each(function(theDiv){
						theDiv.addClass('detailedSearchResults');
//						theSearchCookie.set('style', 'detailed');			
						theDiv.getElements('.bigThumbNail').each(function(thumbies){
							thumbies.fade('in');
						});
				});
				
			}
		});
	});
	
	// and on-load, change it to normal:
	linkySelects.each(function(sel, i) {
		sel.set('value', 'simple');
	});
	$$('.searchResultsGrid').each(function(theDiv){
		theDiv.removeClass('detailedSearchResults');
	});
	
	
		// this does the grid popuppery for search results
	$$('.searchResultsGrid').each(function(grid){
			
		grid.getElements('.smallThumbNail').each(function(smallThumb){
		
			smallThumb.addEvents({
				'mouseenter': function(){
					var thumb = smallThumb.getElement('.bigThumbNail');
					thumb.fade('in');
				},
				'mouseleave': function(){
						smallThumb.getElement('.bigThumbNail').fade('out');
					//if (!($('thumbGrid').hasClass('detailedSearchResults'))) {
					//	smallThumb.getElement('.bigThumbNail').fade('out');
					//}
				}
			});
		});
	});

	
	
	
	// and the range home thing
	if ($('kwik')){
	
		var kiwk = $('kwik');
		var kiwks = kiwk.getElement('ul').getElements('li');
		var setWidth = 320;
		var maxWidth = 400;
		var minWidth = (((setWidth * kiwks.length) - maxWidth) / (kiwks.length-1));

		
		var myTransition = new Fx.Transition(Fx.Transitions.Elastic, 0.4);
		
		// now do it!
		kiwks.each(function(li){
		
			//li.set('morph', {duration: 1500, transition: myTransition.easeOut});
			li.set('morph', {duration: 750, transition: myTransition.easeOut});
		
			li.addEvents({
		
				'mouseover': function(){
					kiwks.each(function(item){
						item.morph({width: minWidth});
						if (!Browser.Engine.trident) {item.fade(0.5);} /* no IE for you */
					});
	
					this.morph({width: maxWidth});
						if (!Browser.Engine.trident) {this.fade(1);} /* no IE for you */
		    },
		    
 				'mouseleave': function(activeLi){
					kiwks.each(function(item){
						item.morph({width: setWidth});
						if (!Browser.Engine.trident) {item.fade(1);} /* no IE for you */
					});
		    }		
			
			});
		});
	
	}
	


}); //end domready