var DropDown = Class.create({
	initialize: function(skus, colorObj, sizeObj) {
		this.previousColor = '';
		this.skusObj = skus;
		this.colorObj = colorObj;
		this.sizeObj = sizeObj;

		if (this.skusObj == null) return;	
		
		var colors = new Array();
		var sizes = new Array();
		
		this.clearSelect(this.sizeObj);
		this.clearSelect(this.colorObj);
		
		var swatchDivObj = document.getElementById(this.onTagName('scp.swatch'));
		var setColorSwatchFunc = this.setColor.bind(this);
		
		// Fill our drop-downs and swatches
		for (var i=0;i<this.skusObj.length;i++) {
			var color = this.skusObj[i].color;
			var size = this.skusObj[i].size;
			var swatch = this.skusObj[i].swatchImage;
			
			if (color != '' && this.itemInArray(colors, color) == false) {
				colors[colors.length] = color;
				this.colorObj.options[this.colorObj.options.length] = new Option(color, color);
				// Create our swatch if applicable
				if (swatchDivObj != null) {
					var swatchLink = document.createElement('a');
					swatchLink.setAttribute('href','#');
					swatchLink.setAttribute('id', color);
					swatchLink.onclick = function() {
						setColorSwatchFunc(this.id);
					}
					swatchDivObj.appendChild(swatchLink);
					var img = document.createElement('img');
					img.setAttribute('src', swatch);
					img.setAttribute('border', '0');
					swatchLink.appendChild(img);
					var colorDiv = document.createElement('div');
					colorDiv.setAttribute('class', 'colorNameDiv');
					colorDiv.innerHTML = color.replace(new RegExp(/\//g), "/<br>");
					swatchLink.appendChild(colorDiv);
				}
			}
		}	
		this.sortSizes();
		
		var setColorFunc = this.setColor.bind(this);
		// setup event handlers.
		if (this.colorObj != null) {
			this.colorObj.onclick = function() {
				setColorFunc(this.options[this.selectedIndex].value);
			}
	        this.colorObj.onchange = function() {
                setColorFunc(this.options[this.selectedIndex].value);
            }
            this.previousColor = this.colorObj.options[this.colorObj.selectedIndex].value;
		}
		var setSizeFunc = this.setSize.bind(this);
		if (this.sizeObj != null) {
			this.sizeObj.onchange = function() {
				setSizeFunc(this.options[this.selectedIndex].value);
			}
		}
	},
	clearSelect: function(selectObj) {
		emptySelectObj(selectObj);
	},
	selectOption: function(selectObj, value) {
		if (selectObj == null) return;
		
		for (var i=0;i<selectObj.options.length;i++) {
			var objValue = selectObj.options[i].value;
			if(selectObj.id == 'selectedSize') {
				objValue = objValue.split(" ($")[0];
			}
			if (objValue == value) {
				selectObj.selectedIndex = i;
				// Try and find our super spiffy home-made select (if applicable)
				var selectedSelect = document.getElementById('select' + selectObj.id);
				if (selectedSelect != null) {
					selectedSelect.childNodes[0].nodeValue = selectObj.options[i].childNodes[0].nodeValue;
				}
				break;
			}
		}		
	},
	setSize: function(size) {
		var color = '';
		if (this.colorObj != null) {
			color = this.colorObj.options[this.colorObj.selectedIndex].value;
			this.selectOption(this.sizeObj, size);
		}	
		this.onColorSizeChanged(this.getSku(color, size), color, size);		
	},
	changeDetailImages: function(skuObj) {
		try {
			var pzs = document.getElementById('pzs');
			if (pzs != null) {
			  document.getElementById('pzs').setProperty(this.onTagName('scp.pan.zoom'), skuObj.largeImage);
			}
		} catch (err) { }	
		var obj = document.getElementById(this.onTagName('scp.qv.detail.image'));
		if (obj != null) {
			obj.src = skuObj.detailImage;
		}		
	},
	setColor: function(color) {
		this.clearSelect(this.sizeObj);
		this.selectOption(this.sizeObj, '-1');
		var firstPass = true;
		for (var i=0;i<this.skusObj.length;i++) {
			if (color == this.skusObj[i].color) {
				var curSwatch = this.skusObj[i].swatchImage;
				if (firstPass) {
					firstPass = false;
					this.selectOption(this.colorObj, color);
					// Set our zoomImageUrl if applicable
					this.changeDetailImages(this.skusObj[i]);
					// Set our selected swatch
					var swatchDivObj = document.getElementById(this.onTagName('scp.swatch'));
					if (swatchDivObj != null) {
						for (var y=0;y<swatchDivObj.childNodes.length;y++) {
							if (swatchDivObj.childNodes[y].nodeType == 1) {
								var imgDiv = swatchDivObj.childNodes[y].firstChild;
								if (imgDiv.src.indexOf(curSwatch) > 0) {
									imgDiv.className = this.onTagName('scp.swatch.selected');
								} else {
									imgDiv.className = '';
								}
							}
						}
					}
				}
				// Add our size to the size dropdown.
				if (this.sizeObj != null) {
					this.sizeObj.options[this.sizeObj.options.length] = new Option(this.skusObj[i].size, this.skusObj[i].size);
				}
			}
		}
		this.sortSizes();
		
		var size = '';
		if (this.sizeObj != null && this.sizeObj.selectedIndex > -1) {
			size = this.sizeObj.options[this.sizeObj.selectedIndex].value;
		}
		if(this.previousColor != color) {
		  this.onColorSizeChanged(this.getSku(color, size), color, size);
		}
		this.previousColor = color;	
	},
	sortSizes: function() {
		if(this.sizeObj != null) {
			sortSelectObj(this.sizeObj, this.getSizeOrder());
		}
	},
	itemInArray: function(arrayObj, item) {
	  if (arrayObj == null || item == null) return;
	  
	  for(var i = 0; i < arrayObj.length; i++) {
		if(item == arrayObj[i]) {
		  return true;
		}
	  }
	  return false;		
	},
	getSku: function(color, size) {
		var foundSku = null;
		for (var i=0;i<this.skusObj.length;i++) {
	        if((this.skusObj[i].color == color) && (size == this.skusObj[i].size)) { 
	            foundSku = this.skusObj[i];
	        }
	    }
	    return foundSku;		
	},
	onTagName: function(nm) { /* abstract */},	
	getSizeOrder: function() { /* abstract */ },
	onColorSizeChanged: function(selectedSku, selectedColor, selectedSize) { /* abstract */ }
		
});