/**
 * @author Dmitry Karpenkov
 * @version 0.0.1.4
 * @class Select
 * @constructor
 * @param  {String} elementID The source HTMLSelect ID
 * @param  {Array} options The source HTMLSelect ID
 */
function Select(elementID, options) {
	var self = this;
	
    // source <select /> element
	this.select = $(elementID)[0];//document.getElementById(elementID);
    if(!this.select)
    {
        this.select = document.getElementById(elementID);
    }
	// hide the select field
    this.select.style.display = 'none'; 
	if (!this.select || this.select.tagName.toLowerCase() != 'select')
		return;
	this.options = this.select.options;

	// initialize options
	this._initializeOptions(options);
	
	// create and build div structure
	this.selectArea = document.createElement('div');
	var leftDiv = document.createElement('div');
	var rightDiv = document.createElement('div');
	this.textContainer = document.createElement('div');
	this.textContainer.id = this.select.id + 'Text';
	var text = document.createTextNode(this.emptyText);
	this.selectArea.id = this.select.id + 'SelectArea';
	this.selectArea.style.width = parseInt(this.width) + 'px';
	this.selectArea.style.height = parseInt(this.height) + 'px';
	addClass(this.selectArea, this.selectAreaStyle);
	addClass(leftDiv, this.selectAreaLeftStyle);
	addClass(rightDiv, this.selectAreaRightStyle);
	addClass(this.textContainer, this.selectAreaCenterStyle)
	this.textContainer.appendChild(text);
	this.selectArea.appendChild(leftDiv);
	this.selectArea.appendChild(rightDiv);
	this.selectArea.appendChild(this.textContainer);
	//insert select div
	this.select.parentNode.insertBefore(this.selectArea, this.select);
	// fix IE6 bug
	if($.browser.msie && ($.browser.version == '6.0'))
	{
		this.textContainer.style.width = this.width - 7 - getDimensions(leftDiv).width - getDimensions(rightDiv).width + 'px'
	}
	//build & place options div
	this.optionsArea = document.createElement('ul');
	this.optionsArea.id = this.select.id + 'Options';
	this.optionsArea.style.width = parseInt(this.width) - 2 + 'px';
	if (this.dropDownSize > 0 && this.options.length > this.dropDownSize) {
		this.optionsArea.style.height = this.dropDownSize * this.optionHeight + 'px';
	}
	this.optionsArea.className = this.optionsInvisibleStyle;
	//get select's options and add to options div
	for(var w = 0; w < this.options.length; w++) {
		var optionHolder = document.createElement('li');
		optionHolder.id = this.select.id + 'Option' + w;
		if (this.options[w].text.length == 0)
			this.options[w].text = this.emptyText;
		optionHolder.className = this.options[w].className;
		var optionTxt = document.createTextNode(this.options[w].text);
		optionHolder.position = w;
		optionHolder.onclick = function() {
			if (self.select.multiple) {
				self.selectOption(this.position);
			}
			else {
				self.selectOption(this.position);
			}
		}
		optionHolder.onmouseover = function() {
			self.unhoverOption(self.hoveredIndex);
			self.hoveredIndex = this.position;
			self.hoverOption(self.hoveredIndex);
		}
		optionHolder.onmouseout = function() {
			self.unhoverOption(this.position);
			self.hoveredIndex = -1;
		}
		optionHolder.appendChild(optionTxt);
		this.optionsArea.appendChild(optionHolder);
		//check for pre-selected items
		if(this.options[w].selected) {
			this.selectOption(w);
			addClass(optionHolder, this.optionSelectedStyle);
		}
	}

	//insert options div
	this.selectArea.appendChild(this.optionsArea);
	
	// fix IE6 bug
	if (/MSIE 6/.test(navigator.userAgent)) {
		this.optionsIFrame = document.createElement('iframe');
		this.selectArea.appendChild(this.optionsIFrame);
	}
	
	this._initializeEventHandlers();
}

function SelectUpdate(elementId)
{
	var self = Select.prototype;
	self.select = jQuery('#'+elementId+'Options');
	self.select.id = elementId;
	self.options = jQuery('#'+elementId)[0].options;
	self.textContainer = jQuery('#'+elementId+'Text');
	self.optionSelectedStyle = 'select-option-selected';
	self.optionHoveredStyle = 'select-option-hovered';
	jQuery('#'+elementId+'Options').html('');
	var count = 0;
	var optionsCustom = jQuery('#'+elementId+'Options');
	jQuery('#'+elementId+' > option').each(function() {
		var newOption = $('<li id="' + elementId + 'Option' + count + '" num="' + count + '">' + this.text + '</li>');
		optionsCustom.append(newOption);
		count++;
	});
	
	/*As we unable determine option element height assume it 26px and default element count 15 */
	count = count < 15 ? count - 1 : 15;
	optionsCustom.css('height', 26 * count);
	
	jQuery('#'+elementId+'Options > li').click(function() {
			self.selectOption(jQuery(this).attr('num'));
	}).mouseover(function() { 
			self.unhoverOption(self.hoveredIndex);
			self.hoveredIndex = jQuery(this).attr('num');
			self.hoverOption(self.hoveredIndex);
	}).mouseout(function() { 
			self.unhoverOption(jQuery(this).attr('num'));
			self.hoveredIndex = -1;
	});
	
	jQuery('#' + elementId + 'Text').text('-- Empty --');
	var selected = 0;
	jQuery('#' + elementId + ' > option').each(function(i){
		jQuery('#' + elementId + 'Text').text($(this).text());
		if($(this).attr('value') == jQuery('#' + elementId).val())
		{
			selected = i;
		}
	});
	self.selectOption(selected);
}

Select.prototype = {
	/**
	 * @description Initializes options.
	 * @method _initializeOptions
	 * @param {Array}	options	The options to initialize from.
	 * @return {void}
	 * @private
	 */
	_initializeOptions: function(options) {
		// initialize CSS styles
		var options = options || {};
		this.selectAreaStyle = options.selectAreaStyle || 'select-area';
		this.selectAreaOpenedStyle = options.selectAreaOpenedStyle || 'select-area-opened';
		this.selectAreaLeftStyle = options.selectAreaLeftStyle || 'select-area-left';
		this.selectAreaRightStyle = options.selectAreaRightStyle || 'select-area-right';
		this.selectAreaCenterStyle = options.selectAreaCenterStyle || 'select-area-center';
		this.optionsVisibleStyle = options.optionsVisibleStyle || 'select-options-visible';
		this.optionsInvisibleStyle = options.optionsInvisibleStyle || 'select-options-invisible';
		this.optionSelectedStyle = options.optionSelectedStyle || 'select-option-selected';
		this.optionHoveredStyle = options.optionHoveredStyle || 'select-option-hovered';
		// initialize other options
		this.emptyText = options.emptyText || '-- Select --';
		this.optionsSeparator = options.optionsSeparator || ',';
		this.optionsOverlap = options.optionsOverlap || 1;
		this.width = options.width || getDimensions(this.select).width;
		this.height = options.selectHeight || 20;
		this.optionHeight = parseInt(options.optionHeight) || 15;
		this.opened = false;
		this.hoveredIndex = -1;
		this.dropDownSize = parseInt(options.dropDownSize) || 0;
	},
	
	/**
	 * @description Initializes select event handlers.
	 * @method _initializeEventHandlers
	 * @return {void}
	 * @private
	 */
	_initializeEventHandlers: function() {
		var self = this;
		var body = document.getElementsByTagName('body')[0];
		
		var selectKeyDownHandler = function(e) {
			var e = e || window.event;
			self._handleKeyDownEvent(e);
		}
		
		var bodyClickHandler = function() {
			self.close();
			if (self.addedKeyDownHandler) {
				removeEventHandler(document, 'keydown', selectKeyDownHandler);
				self.addedKeyDownHandler = false;
			}
		}
		
		var selectAreaClickHandler = function() {
			self.toggle();
			if (self.opened) {
				if (!self.addedKeyDownHandler) {
					addEventHandler(document, 'keydown', selectKeyDownHandler);
					self.addedKeyDownHandler = true;
				}
			}
			else {
				if (self.addedKeyDownHandler) {
					removeEventHandler(document, 'keydown', selectKeyDownHandler);
					self.addedKeyDownHandler = false;
				}
			}
		}
		
		var selectMouseOutHandler = function() {
			if (!self.addedbodyClickHandler) {
				addEventHandler(body, 'click', bodyClickHandler);
				self.addedbodyClickHandler = true;
			}
		}
		
		var selectMouseOverHandler = function() {
			if (self.addedbodyClickHandler) {
				removeEventHandler(body, 'click', bodyClickHandler);
				self.addedbodyClickHandler = false;
			}
		}
		
		addEventHandler(this.selectArea, 'click', selectAreaClickHandler);
		addEventHandler(this.selectArea, 'mouseover', selectMouseOverHandler);
		addEventHandler(this.selectArea, 'mouseout', selectMouseOutHandler);
		addEventHandler(this.optionsArea, 'mouseover', selectMouseOverHandler);
		addEventHandler(this.optionsArea, 'mouseout', selectMouseOutHandler);
	},
	
	/**
	 * @description Handles select key down events.
	 * @method _handleKeyDownEvent
	 * @param {Event}	e	The event to be handled from.
	 * @return {void}
	 * @private
	 */
	_handleKeyDownEvent: function(e) {
		var keyCode = e.keyCode;
		switch (keyCode) {
			case 40: // down
				this.unhoverOption(this.hoveredIndex);
				this.hoveredIndex++;
				if (this.hoveredIndex >= this.options.length) 
					this.hoveredIndex = 0;
				this.hoverOption(this.hoveredIndex);
				break;
			case 38: // up
				this.unhoverOption(this.hoveredIndex);
				this.hoveredIndex--;
				if (this.hoveredIndex < 0) 
					this.hoveredIndex = this.options.length - 1;
				this.hoverOption(this.hoveredIndex);
				break;
			case 27: // escape
				this.close();
				break;
			case 32: // space
				this.selectOption(this.hoveredIndex);
				break;
			case 13: // enter
				if (!this.options[this.hoveredIndex].selected)
					this.selectOption(this.hoveredIndex);
				this.close();
				break;
			default:
				break;
		}
	},
	
	/**
	 * @description Opens select.
	 * @method open
	 * @return {void}
	 */
	open: function() {
		if (hasClass(this.optionsArea, this.optionsInvisibleStyle))
			replaceClass(this.optionsArea, this.optionsInvisibleStyle, this.optionsVisibleStyle);
		addClass(this.selectArea, this.selectAreaOpenedStyle);
		if (this.optionsIFrame) {
			var dimensions = getDimensions(this.optionsArea);
			this.optionsIFrame.style.width = dimensions.width + 'px';
			this.optionsIFrame.style.height = dimensions.height + 'px';
		}
		this.opened = true;
	},
	
	/**
	 * @description Closes select.
	 * @method close
	 * @return {void}
	 */
	close: function() {
		if (hasClass(this.optionsArea, this.optionsVisibleStyle))
			replaceClass(this.optionsArea, this.optionsVisibleStyle, this.optionsInvisibleStyle);
		removeClass(this.selectArea, this.selectAreaOpenedStyle);
		this.opened = false;
	},
	
	/**
	 * @description Toggle select.
	 * @method toggle
	 * @return {void}
	 */
	toggle: function() {
		this.opened ? this.close() : this.open();
	},

	/**
	 * @description Selects specified option.
	 * @method selectOption
	 * @param {int}	selectedIndex	The option index to be selected.
	 * @return {void}
	 */
	selectOption: function(selectedIndex) {
		//feed selected option to the actual select field
		if (this.select.multiple) {
			var option = document.getElementById(this.select.id + 'Option' + selectedIndex);
			if (option) {
				this.options[selectedIndex].selected = !this.options[selectedIndex].selected;
				this.options[selectedIndex].selected ? addClass(option, this.optionSelectedStyle) : removeClass(option, this.optionSelectedStyle);
			}
			// modify selected option
			var text = '';
			for (var k = 0; k < this.options.length; k++) {
				if (this.options[k].selected)
					text += this.options[k].text + this.optionsSeparator;
			}
			if (text.length > this.optionsSeparator.length)
				text = text.substring(0, text.length - this.optionsSeparator.length);
			else if (text.length == 0)
				text = this.emptyText;
			var newText = document.createTextNode(text);
			jQuery(this.textContainer).html(newText);
		}
		else {
			for (var k = 0; k < this.options.length; k++) {
				if (k == selectedIndex) {
					this.options[k].selected = true;
					var option = document.getElementById(this.select.id + 'Option' + k);
					if (option)
						addClass(option, this.optionSelectedStyle);
				}
				else {
					this.options[k].selected = false;
					var option = document.getElementById(this.select.id + 'Option' + k);
					if (option)
						removeClass(option, this.optionSelectedStyle);
				}
				//show selected option
				var newText = document.createTextNode(this.options[selectedIndex].text);
				jQuery(this.textContainer).html(newText);
			}
		}
		if($(this.select).change)
		{
			$(this.select).change();
		}
	},
	
	/**
	 * @description Hovers specified option.
	 * @method hoverOption
	 * @param {int}	hoveredIndex	The option index to be hovered.
	 * @return {void}
	 */
	hoverOption: function(hoveredIndex) {
		if (hoveredIndex >= 0 && hoveredIndex < this.options.length) {
			var hoveredOption = document.getElementById(this.select.id + 'Option' + hoveredIndex);
			addClass(hoveredOption, this.optionHoveredStyle);
		}
	},
	
	/**
	 * @description Unhovers specified option.
	 * @method unhoverOption
	 * @param {int}	hoveredIndex	The option index to be unhovered.
	 * @return {void}
	 */
	unhoverOption: function(hoveredIndex) {
		if (hoveredIndex >= 0 && hoveredIndex < this.options.length) {
			var hoveredOption = document.getElementById(this.select.id + 'Option' + hoveredIndex);
			removeClass(hoveredOption, this.optionHoveredStyle);
		}
	}
}

//Useful functions

/**
 * @description Returns element dimensions.
 * @method getDimensions
 * @param {HTMLElement}	el	The DOM elementement to get dimensions of.
 * @return {Array} HTMLElement offset.
 */
function getDimensions(el) {
	if (el.style.display != 'none' && el.style.display != null) // Safari bug
		return {width: el.offsetWidth, height: el.offsetHeight};
	// All *Width and *Height properties give 0 on els with display none,
	// so enable the el temporarily
	var els = el.style;
	var originalVisibility = els.visibility;
	var originalPosition = els.position;
	var originalDisplay = els.display;
	els.visibility = 'hidden';
	els.position = 'absolute';
	els.display = 'block';
	var originalWidth = el.clientWidth;
	var originalHeight = el.clientHeight;
	els.display = originalDisplay;
	els.position = originalPosition;
	els.visibility = originalVisibility;
	return {width: originalWidth, height: originalHeight};    
}

/**
 * @description Returns an HTMLElement offset.
 * @method getOffset
 * @param {HTMLElement}	el	The DOM element to get offset of.
 * @return {Array} HTMLElement offset.
 */
function getOffset(el) {
	var valueT = 0, valueL = 0;
    do {
      valueT += el.offsetTop  || 0;
	  valueL += el.offsetLeft  || 0;
      el = el.offsetParent;
      if (el) {
        if (el.tagName.toLowerCase() == 'body')
			break;
        var pos = el.style.position;
        if (pos == 'relative' || pos == 'absolute')
			break;
      }
    } while (el);
	return {left: valueL, top: valueT};
}

/**
 * @description Determines whether an HTMLElement has the given className.
 * @method hasClass
 * @param {HTMLElement}	el		The DOM element to test.
 * @param {String}		className	The class name to search for.
 * @return {Boolean | Array} A boolean value or array of boolean values.
 */
function hasClass(el, className) {
	var elClassName = el.className;
	return (elClassName.length > 0 && (elClassName == className || new RegExp("(^|\\s)" + className + "(\\s|$)").test(elClassName)));
}

/**
 * @description Adds a class name to a given el.
 * @method addClass         
 * @param {HTMLElement}	el		The DOM element to add the class to.
 * @param {String}		className	The class name to add to the class attribute.
 * @return {void}
 */
function addClass(el, className) {
	if (!hasClass(el, className))
		el.className += (el.className ? ' ' : '') + className;
}

/**
 * @description Removes a class name from a given el.
 * @method removeClass         
 * @param {HTMLElement}	el		The DOM element or to remove the class from.
 * @param {String}		className	The class name to remove from the class attribute.
 * @return {void}
 */
function removeClass(el, className) {
	el.className = el.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ').replace(/^\s+/, '').replace(/\s+$/, '');
}

/**
 * @description Replaces a class name fom a given el.
 * @method removeClass         
 * @param {HTMLElement}	el			The DOM elementement to remove the class from.
 * @param {String}		oldClassName	The class name to remove from the class attribute.
 * @param {String}		newClassName	The class name to add to the class attribute.
 * @return {void}
 */
function replaceClass(el, oldClassName, newClassName) {
	removeClass(el, oldClassName);
	addClass(el, newClassName);
}

/**
 * @description Adds a DOM event directly without the caching, cleanup, scope adj, etc.
 * @method addEventHandler
 * @param {HTMLElement}	el		The DOM element to bind the handler to.
 * @param {String}		name		The name of event handler.
 * @param {function} 		handler	The callback to invoke.
 * @return {void}
 */
function addEventHandler(el, name, handler) {
	el.addEventListener ? el.addEventListener(name, handler, false) : el.attachEvent('on' + name, handler);
}

/**
 * @description Removes a DOM event.
 * @method removeEventHandler
 * @param {HTMLElement}	el		The DOM element to bind the handler to.
 * @param {String}		name		The name of event handler.
 * @param {function} 		handler	The callback to invoke.
 * @return {void}
 */
function removeEventHandler(el, name, handler) {
	el.removeEventListener ? el.removeEventListener(name, handler, false) : el.detachEvent('on' + name, handler);
}

$(function(){
	var cusSelN = 1;
	$('.customSelect-w244').each(function(){
		var wSel = $(this).css('width');
		wSel = wSel.replace(/px/,'')*1;
		var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
		$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
		new Select(this, {dropDownSize: 15, width: 244, selectHeight: 20, optionHeight:18});
		cusSelN += 1;
	});
	$('.customSelect-w117').each(function(){
		var wSel = $(this).css('width');
		wSel = wSel.replace(/px/,'')*1;
		var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
		$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
		new Select(this, {dropDownSize: 15, width: 117, selectHeight: 20, optionHeight:18});
		cusSelN += 1;
	});
	
	$('.customSelect-w174').each(function(){
		var wSel = $(this).css('width');
		wSel = wSel.replace(/px/,'')*1;
		var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
		$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
		new Select(this, {dropDownSize: 15, width: 174, selectHeight: 27, optionHeight:18});
		cusSelN += 1;
	});
	$('.customSelect-w189').each(function(){
		var wSel = $(this).css('width');
		wSel = wSel.replace(/px/,'')*1;
		var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
		$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
		new Select(this, {dropDownSize: 15, width: 189, selectHeight: 20, optionHeight:18});
		cusSelN += 1;
	});
	
	$('.customSelect-w262').each(function(){
		var wSel = $(this).css('width');
		wSel = wSel.replace(/px/,'')*1;
		var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
		$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
		new Select(this, {dropDownSize: 15, width: 262, selectHeight: 27, optionHeight:18});
		cusSelN += 1;
	});
	
	$('.customSelect-w180').each(function(){
		var wSel = $(this).css('width');
		wSel = wSel.replace(/px/,'')*1;
		var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
		$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
		new Select(this, {dropDownSize: 15, width: 180, selectHeight: 20, optionHeight:18});
		cusSelN += 1;
	});

	$('.customSelect-w312').each(function(){
		var wSel = $(this).css('width');
		wSel = wSel.replace(/px/,'')*1;
		var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
		$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
		new Select(this, {dropDownSize: 15, width: 312, selectHeight: 26, optionHeight:24});
		cusSelN += 1;
	});
	
	$('.customSelect-w350').each(function(){
		var wSel = $(this).css('width');
		wSel = wSel.replace(/px/,'')*1;
		var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
		$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
		new Select(this, {dropDownSize: 15, width: 350, selectHeight: 26, optionHeight:24});
		cusSelN += 1;
	});
	$('.customSelect-w78').each(function(){
		var wSel = $(this).css('width');
		wSel = wSel.replace(/px/,'')*1;
		var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
		$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
		new Select(this, {dropDownSize: 15, width:78, selectHeight: 26, optionHeight:24});
		cusSelN += 1;
	});
	$('.customSelect-w140').each(function(){
		var wSel = $(this).css('width');
		wSel = wSel.replace(/px/,'')*1;
		var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
		$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
		new Select(this, {dropDownSize: 15, width:140, selectHeight: 26, optionHeight:24});
		cusSelN += 1;
	});
	$('.customSelect-w85').each(function(){
		var wSel = $(this).css('width');
		wSel = wSel.replace(/px/,'')*1;
		var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
		$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
		new Select(this, {dropDownSize: 15, width:85, selectHeight: 26, optionHeight:24});
		cusSelN += 1;
	});
	$('.customSelect-w94').each(function(){
		var wSel = $(this).css('width');
		wSel = wSel.replace(/px/,'')*1;
		var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
		$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
		new Select(this, {dropDownSize: 15, width: 174, selectHeight: 26, optionHeight:18});
		cusSelN += 1;
	});
	
	$('.customSelect-w75').each(function(){
		var wSel = $(this).css('width');
		wSel = wSel.replace(/px/,'')*1;
		var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
		$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
		new Select(this, {dropDownSize: 15, width: 75, selectHeight: 19, optionHeight:18});
		cusSelN += 1;
	});
    
    $('.customSelect-w243').each(function(){
		var wSel = $(this).css('width');
		wSel = wSel.replace(/px/,'')*1;
		var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
		$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
		new Select(this, {dropDownSize: 15, width: 243, selectHeight: 26, optionHeight:24});
		cusSelN += 1;
	});
    
    $('.customSelect-w331').each(function(){
    	var wSel = $(this).css('width');
    	wSel = wSel.replace(/px/,'')*1;
    	var wSelT = 'width:'+wSel+'px; $width:'+(wSel+20)+'px; _width:'+wSel+'px;'; // fix for IE7
    	$(this).attr('style',wSelT);
//		$(this).attr('id', 'cusSelect'+cusSelN);
    	new Select(this, {dropDownSize: 15, width: 331, selectHeight: 26, optionHeight:24});
    	cusSelN += 1;
    });


});