var elSelect = new Class({
	options: {
		container: false,
		baseClass : 'elSelect'
	},
	source : false,
	selected : false,
	_select : false,
	current : false,
	selectedOption : false,
	dropDown : false,
	optionsContainer : false,
	hiddenInput : false,
	/*
	pass the options,
	create html and inject into container
	*/
	initialize: function(options){
		this.setOptions(options)

		if ( !this.options.container ) return

		this.selected = false
		this.source = $(this.options.container).getElement('select')
		this.buildFrameWork()

		$(this.source).getElements('option').each( this.addOption, this )
		$(this.options.container).setHTML('')
		this._select.injectInside($(this.options.container))

		this.bindEvents()

	},

	buildFrameWork : function() {
		this._select = new Element('div').addClass( this.options.baseClass )
		this.current = new Element('div').addClass('selected').injectInside($(this._select))
		this.selectedOption = new Element('div').addClass('selectedOption').injectInside($(this.current))
		this.dropDown = new Element('div').addClass('dropDown').injectInside($(this.current))
		new Element('div').addClass('clear').injectInside($(this._select))
		this.optionsContainer = new Element('div').addClass('optionsContainer').injectInside($(this._select))
		var t = new Element('div').addClass('optionsContainerTop').injectInside($(this.optionsContainer))
		var o = new Element('div').injectInside($(t))
		var p = new Element('div').injectInside($(o))
		var t = new Element('div').addClass('optionsContainerBottom').injectInside($(this.optionsContainer))
		var o = new Element('div').injectInside($(t))
		var p = new Element('div').injectInside($(o))

/*		this.hiddenInput = $(document.body).getElement('_facility');*/

		this.hiddenInput = new Element('input').setProperties({
			type  : 'hidden',
			name  : this.source.getProperty('name')
		}).injectInside($(this.options.container));

	},

	bindEvents : function() {
		document.addEvent('click', function() {
				if ( this.optionsContainer.getStyle('display') == 'block')
					this.onDropDown()
			}.bind(this));

		$(this.options.container).addEvent( 'click', function(e) { new Event(e).stop(); } )
		this.current.addEvent('click', this.onDropDown.bindWithEvent(this) )

	},

	//add single option to select
	addOption: function( option ){
    	var o = new Element('div').addClass('option').setProperty('value',option.value)
		if ( option.disabled ) { o.addClass('disabled') } else {
			o.addEvents( {
				'click': this.onOptionClick.bindWithEvent(this),
				'mouseout': this.onOptionMouseout.bindWithEvent(this),
				'mouseover': this.onOptionMouseover.bindWithEvent(this)
			})
		}

		if ( $defined(option.getProperty('class')) && $chk(option.getProperty('class')) )
			o.addClass(option.getProperty('class'))


		if ( option.selected ) {
			if ( this.selected) this.selected.removeClass('selected');
			this.selected = o
			o.addClass('selected')
			this.selectedOption.setText(option.text);
			this.hiddenInput.setProperty('value',option.value);
		}
		o.setText(option.text)
		o.injectBefore($(this.optionsContainer).getLast())
	},

	onDropDown : function( e ) {

			if ( this.optionsContainer.getStyle('display') == 'block') {
				this.optionsContainer.setStyle('display','none')
			} else {
				this.optionsContainer.setStyle('display','block')
				this.selected.addClass('selected')
				//needed to fix min-width in ie6
				var width =  this.optionsContainer.getStyle('width').toInt() > this._select.getStyle('width').toInt() ?
															this.optionsContainer.getStyle('width')
															:
															this._select.getStyle('width')

				this.optionsContainer.setStyle('width', width)
				this.optionsContainer.getFirst().setStyle('width', width)
				this.optionsContainer.getLast().setStyle('width', width)
			}
	},
	onOptionClick : function(e) {
		var event = new Event(e)
		if ( this.selected != event.target ) {
			this.selected.removeClass('selected')
			event.target.addClass('selected')
			this.selected = event.target
			this.selectedOption.setText(this.selected.getText());
			this.hiddenInput.setProperty('value',this.selected.getProperty('value'));
			$$('#_facility').setProperty('value',this.selected.getProperty('value'));
		}
		this.onDropDown()
	},
	onOptionMouseover : function(e){
		var event = new Event(e)
		this.selected.removeClass('selected')
		event.target.addClass('selected')
	},
	onOptionMouseout : function(e){
		var event = new Event(e)
		event.target.removeClass('selected')
	}

});
elSelect.implement(new Events);
elSelect.implement(new Options);


window.addEvent('domready', function()
{
	var ecoHTML = "<form action='' method='post'>\
		<h5>Environmental Benefits Calculator</h5>\
		<p>Calculate the Environmental Benefits of Your Precision-Paragon [P2] Installation.</p>\
		<div class='lbl'><span>Annual kWh Savings:</span>\
			<div class='entry'>\
				<div class='hint-popup'></div>\
				<div class='hint'>DON'T KNOW<br />You can estimate annual kWh savings at our energy saving calculator</div>\
				<input type='text' name='kwh' />\
			</div>\
		</div>\
		<p class='r'><input type='submit' class='submit' name='submitBtn' value='' /></p>\
	</form>\
	<div class='form-result'></div>";

	var costHTML = "<form action='' method='post'>\
		<input type='hidden' id='_facility' value='office' name='_facility' />\
		<h5>Cost Savings Calculator</h5>\
		<div class='lbl' style='z-index:8990'><span>Facility type:</span>\
			<div class='entry' id='cost_facility_container'>\
				<select id='cost_facility' name='facility'>\
				<option value='office'>Office Space</option>\
				<option value='warehouse'>Warehouse</option>\
				<option value='manufacturing'>Manufacturing Plant</option>\
				</select>\
			</div>\
		</div>\
		<div class='lbl' style='z-index:8980'><span>Total Square Feet:</span>\
			<div class='entry short'>\
				<div class='hint-popup'></div>\
				<div class='hint'>Interior square footage.</div>\
				<input type='text' class='short' name='square' />\
			</div>\
		</div>\
		<div class='lbl' style='z-index:8970'><span>Total Cost per kWh:</span>\
			<div class='entry short'>\
				<div class='hint-popup'></div>\
				<div class='hint'>If unknown use $0.10 per kWh for approximate national average rate. Blended annual average rate per kWh includes all costs per kWh, demand charges, taxes, transmission and delivery.</div>\
				<input type='text' class='short' name='cost' value='0.1' />\
			</div>\
		</div>\
		<div class='lbl' style='z-index:8960'><span>Annual Hours of Operation:</span>\
			<div class='entry short'>\
				<div class='hint-popup'></div>\
				<div class='hint'>Total annual hours lighting system is operated. Daily Hours x days per week x 52.</div>\
				<input type='text' class='short' name='hrs' />\
			</div>\
		</div>\
		<p class='r'><input type='submit' class='submit' name='submitBtn' value='' /></p>\
	</form>\
	<div class='form-result'></div>";

	if ($$('#eco-calculator').length)
	{
		$('eco-calculator').innerHTML = ecoHTML;

		$('eco-calculator').getElements('div.hint').addEvent('mouseenter', function(e)
		{
			var txt = this.innerHTML;
			var popup = this.getParent().getElement('.hint-popup');
			if (popup)
			{
				popup.innerHTML = txt;
				popup.setStyle('display', 'block');
			}
		});

		$('eco-calculator').getElements('div.hint').addEvent('mouseleave', function(e)
		{
			var popup = this.getParent().getElement('.hint-popup');
			if (popup)
			{
				popup.setStyle('display', 'none');
			}
		});

		$('eco-calculator').getElement('input[name=submitBtn]').addEvent('click', function(e)
		{
			new Event(e).stop();

			var kwh = parseInt($('eco-calculator').getElement('input[name=kwh]').value);
			if (!kwh)
			{
				alert('Please enter annual kWh savings to calculate');
			}
			else
			{
				$('eco-calculator').getElements('div.form-result').setStyle('display', 'none');
				$('eco-calculator').getElements('div.form-result').innerHTML = '';

				var req = new Ajax('/ajax.eco.php?kwh='+kwh.toString()+'&ts='+Number(new Date()).toString(), {method: 'get', update:$('eco-calculator').getElement('div.form-result')});
				req.request();

				$('eco-calculator').getElements('div.form-result').setStyle('display', 'block');
			}
		});
	}

	if ($$('#cost-calculator').length)
	{
		$('cost-calculator').innerHTML = costHTML;

		$('cost-calculator').getElements('div.hint').addEvent('mouseenter', function(e)
		{
			var txt = this.innerHTML;
			var popup = this.getParent().getElement('.hint-popup');
			if (popup)
			{
				popup.innerHTML = txt;
				popup.setStyle('display', 'block');
			}
		});

		$('cost-calculator').getElements('div.hint').addEvent('mouseleave', function(e)
		{
			var popup = this.getParent().getElement('.hint-popup');
			if (popup)
			{
				popup.setStyle('display', 'none');
			}
		});

		var mySelect = new elSelect( {container : 'cost_facility_container'} );

		$('cost-calculator').getElement('input[name=submitBtn]').addEvent('click', function(e)
		{
			new Event(e).stop();

			var ftSel = $('cost-calculator').getElement('input[name=_facility]');
			var ft = ftSel.value;
			var cost = parseFloat($('cost-calculator').getElement('input[name=cost]').value);
			var square = parseFloat($('cost-calculator').getElement('input[name=square]').value);
			var hrs = parseFloat($('cost-calculator').getElement('input[name=hrs]').value);
			if (!cost)
			{
				alert('Please enter Total Cost per kWh to calculate');
			}
			else if (!square)
			{
				alert('Please enter Total Square Feet to calculate');
			}
			else if (!hrs)
			{
				alert('Please enter Annual Hours of Operation to calculate');
			}
			else
			{
				$('cost-calculator').getElements('div.form-result').setStyle('display', 'none');
				$('cost-calculator').getElements('div.form-result').innerHTML = '';

				var req = new Ajax('/ajax.cost.php?cost='+cost.toString()+'&square='+square.toString()+'&hrs='+hrs.toString()+'&ft='+ft+'&ts='+Number(new Date()).toString(), {method: 'get', update:$('cost-calculator').getElement('div.form-result')});
				req.request();

				$('cost-calculator').getElements('div.form-result').setStyle('display', 'block');
			}
		});
	}

	if ($$('#article-search').length)
	{
		$('article-search').getElements('input[name=resetBtn]').addEvent('click', function(e)
		{
			$('article-search-results').innerHTML = '';

			var rows = $$("#mainarea table.searchable tr");
			rows.setStyle('font-weight', 'normal');

			$('article-search').getElements('input[name=resetBtn]').setStyle('visibility','hidden');
		});

		$('article-search').addEvent('submit', function(e)
		{
			new Event(e).stop();

			var value = $('article-search-text').value;
			if (value == '')
			{
				alert('Please enter Legacy Precision Name or Legacy Paragon Name to find new product name');
				return;
			}

			tmp = value;
			tmp = tmp.replace('?', '(.)');
			tmp = tmp.replace('*', '(.+)');
			var rex = new RegExp(tmp, 'gi');

			$('article-search-results').innerHTML = '';

			var rows = $$("#mainarea table.searchable tr");
			rows.setStyle('font-weight', 'normal');

			if (rows.length)
			{
				var txt = "<br /><table cellpadding=\"2\" bordercolor=\"#99cc33\" cellspacing=\"0\" border=\"2\" style=\"width: 450px;\"><tbody><tr><td width=\"75\" bgcolor=\"#99cc33\">New [P2] Product Family</td><td width=\"151\" bgcolor=\"#99cc33\">Description</td><td width=\"80\" bgcolor=\"#99cc33\">Legacy Precision Name</td><td width=\"80\" bgcolor=\"#99cc33\">Legacy Paragon Name</td></tr>";
				var foundCnt = 0;

				rows.each(function(item, index){
					var cells = item.getElements('td');
					cells.each(function(cell, cellIndex){
						found = false;

						cellValue = cell.innerHTML;
						if (cellValue != 'N/A')
						{
							var m = rex.exec(cellValue);
							if (m != null)
							{
								found = true;
								foundCnt++;
							}
						}

						if (found)
						{
							txt += '<tr>'+item.innerHTML + '</tr>';
							item.setStyle('font-weight', 'bold');
						}

					});
				});

				txt += '</tbody></table>';

				if (foundCnt)
				{
					$('article-search-results').innerHTML = txt;
					$('article-search').getElements('input[name=resetBtn]').setStyle('visibility','visible');
				}
				else {
					alert("Sorry, we couldn\'t find the term you were searching for.\r\nPlease contact our Service Hub at 714-386-5550 and we\'ll be happy to help you.");
				}
			}
			else
			{
				$('article-search').getElements('input[name=resetBtn]').setStyle('visibility','hidden');
			}
		});
	}
}
);