var DropDown = Class.create({  
  initialize: function(skus, indexes, useMulti, singleIndex) {
	this.skus = skus;
	this.indexes = indexes;
	if(skus != null) {
	  var skuIndex = new Array();
	  var sizeSpans = new Array();
	  var sizeLinks = new Array();

	  for(var x = 0; x < skus.length; x++) {
		if((singleIndex == -1) || (singleIndex == x)) {
			this.previousColor = '';
			this.skusObj = skus[x];
			if (this.skusObj == null) return;  
			var colors = new Array();
			var sizes = new Array();
			
			var setColorSwatchFunc = this.setColor.bind(this);
			var setSizeImageLinkFunc = this.setSize.bind(this);
		
		    if(useMulti) {
	    	  if(indexes == null) {
	    	    skuIndex[x] = (x + 1);
	    	  }
	    	  else {
	    	    skuIndex[x] = indexes[x];	
	    	  }
		    } else {
			  skuIndex[x] = '';
		    }
		    var scpSwatch = this.onTagName('scp.swatch');
		    var swatchDivObj = jq('#' + scpSwatch + skuIndex[x]).get(0);
		    var swatchDivCol = 0;
		    var swatchDivColCount = 3;
			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;
			  var sizeImage = this.skusObj[i].sizeImage;
			  var inStock = this.skusObj[i].inStock;
			  
			  if (size != '' && this.itemInArray(sizes, size) == false) {
			    sizes[sizes.length] = size;
			  	var imageLink = document.createElement('a');
			    imageLink.setAttribute('id', size.replace(/\s/g, '').replace('/', ''));
			    imageLink.setAttribute('rel', skuIndex[x]);
			        
			    // className is for IE and class is for Firefox
			    if(skuIndex[x] != '') {
			      imageLink.setAttribute('className', 'sizeLink sizeInStock sizeLink' + skuIndex[x]);
			      imageLink.setAttribute('class', 'sizeLink sizeInStock sizeLink' + skuIndex[x]);
			    } else {
			      imageLink.setAttribute('className', 'sizeLink sizeInStock');
			      imageLink.setAttribute('class', 'sizeLink sizeInStock');
			    }
			      
			    imageLink.onclick = function() {
			      setSizeImageLinkFunc(this.id, this.rel);  
			    }
			    imageLink.appendChild(document.createTextNode(size));
			    sizeLinks[sizeLinks.length] = imageLink;
			  }
			      
			  if (color != '' && this.itemInArray(colors, color) == false) {
			    colors[colors.length] = color;
			
			    if (swatchDivObj != null) {
			      swatchDivColCount++;
			      if(swatchDivColCount == 4) {
			    	swatchDivColCount = 0;
			    	swatchDivCol++;
			    	var swatchCol = document.createElement('div');
			    	swatchCol.className = 'swatchRow';
			    	swatchCol.setAttribute('id', 'swatchRow' + swatchDivCol);
			    	swatchDivObj = jq('#' + scpSwatch + skuIndex[x]).get(0);
			    	jq(swatchCol).appendTo(swatchDivObj);
			    	swatchDivObj = jq('#' + scpSwatch + skuIndex[x] + ' > #swatchRow' + swatchDivCol).get(0);
			      }
		    	  
			      var swatchLink = document.createElement('a');
			      swatchLink.setAttribute('id', color.replace(/\s/g, '').replace('/', ''));
			      swatchLink.className = 'colorLink' + skuIndex[x];
			      swatchLink.setAttribute('rel', skuIndex[x]);
			      swatchLink.onclick = function() {
			        setColorSwatchFunc(this.color, this.rel);
			      }
			      swatchDivObj.appendChild(swatchLink);
			      var img = document.createElement('img');
			      img.setAttribute('src', swatch);
			      img.className = skuIndex[x];
			      img.setAttribute('id', 'img'+color.replace(/\s/g, '').replace('/', ''));
			      img.setAttribute('border', '0');
			      img.setAttribute('title', color);
			      img.onclick = function() {  	
			    	if(jq('.size_selected').length == 0) {
		    	      if(this.className.length > 3) { // then it's not a number therefore we are not on CQO or outfit page
		    	    	  setupBubble('selectedSize', 'Please select a size first.', false);
		    		  }
		    	      else {
		    	    	  setupBubble('selectedSize' + this.className, 'Please select a size first.', false);	
		    	      }
			    	}
			      }
			      swatchLink.appendChild(img);
			    }
		      }
	        }
			
		    // If there is only 1 sku.  Then select that.
		    if (skus[0].length == 1) {
		      this.setSize(this.skusObj[0].size, skuIndex[x]);
		      this.setColor(this.skusObj[0].color, skuIndex[x]);	      
		    } else {
		      // If there is only 1 color, then show that color
		      if (colors.length == 1) {
		        this.setColor(colors[0], skuIndex[x]);
		      } 
		      // If there is only 1 size, then show that
		      if (sizes.length == 1) {
		        this.setSize(sizes[0], skuIndex[x]);
		      }
		    }
		}
	  }
	  
	  for(var s = 0; s < sizeSpans.length; s++) {
		var nextElement = sizeSpans[s];
		var sizeImageLinksDivObj = jq('#' + this.onTagName('scp.size.image') + nextElement.lang).get(0);
		sizeImageLinksDivObj.appendChild(nextElement);
	  }
	  
	  for(var s = 0; s < sizeLinks.length; s++) {
		var nextElement = sizeLinks[s];
		var sizeImageLinksDivObj = jq('#' + this.onTagName('scp.size.image') + nextElement.rel).get(0);
		sizeImageLinksDivObj.appendChild(nextElement);
	  }
	} 
	
  },
  changeDetailImages: function(skuObj) {
    var pzs = jq('#pzs_large').get(0);
    jq('.MagicZoomPup').remove();

    if (pzs != null) {
      try {
        MagicZoom_stopZooms();
      } catch (err) {/* If it fails here try anyway*/}  
      try {
	    pzs.href = skuObj.largeImage;
	    var pszDetail = jq('#pzs_large img').get(0);
	    if (pszDetail != null) {
	      pszDetail.src = skuObj.detailImage;
	    }
	    MagicZoom_findZooms();
      } catch (err) {}  
    }
      
    var showZoomAnchor = jq('#showZoomAnchor').get(0);
    if(showZoomAnchor != null) {
      showZoomAnchor.href = skuObj.popupImage;
    }
    var obj = jq('#' + this.onTagName('scp.qv.detail.image')).get(0);
    if (obj != null) {
      obj.src = skuObj.detailImage.replace('detail', 'thumb'); // since the detail image is too large, switch to the thumbnail image
    }    
  },
  setSize: function(size, sizeIndex) {
	var color = '';
	var skuList;
	size = size.replace(/\s/g, '').replace('/', '');
	if(sizeIndex == '' || this.indexes != null) {
	  skuList = this.skus[0];
	}
	else {
	  skuList = this.skus[sizeIndex - 1];
	}
	
	jq.each(jq('#' + this.onTagName('scp.swatch') + sizeIndex + ' .color_selected'), function () {
		jq('#' + this.id).removeClass('color_selected');
	});
	jq('#outfitItemSelect' + sizeIndex + ' > input').attr('checked', false);
	jq('#' + this.onTagName('scp.color.name') + sizeIndex).html('No Color Selected');

    var firstPass = true;
    var colorsFound = new Array();
    var skuIdx = 0;
    var swatchContainerDiv = this.onTagName('scp.swatch');
    jq.each(jq('#selectedSize' + sizeIndex + ' a'), function(i) {
	  jq('#selectedSize' + sizeIndex + ' #' + this.id).removeClass('sizeInStockSelected');
	  jq('#selectedSize' + sizeIndex + ' #' + this.id).removeClass('size_selected');
	  jq('#selectedSize' + sizeIndex + ' #' + this.id).addClass('sizeInStock');
	  if(jq('#productDetailModify').css('display') == 'block') {
		  jq('#productDetailModify').css('display', 'none');
		  jq('#productDetailModifyImg').css('display', 'block');
	  }
	  
	  if(jq('#productDetailAddBag').css('display') == 'block') {
		  jq('#productDetailAddBag').css('display', 'none');
		  jq('#productDetailAddBagImg').css('display', 'block');
	  }
	  jq('#productDetailAddToWishlistImg').css('display', 'block');
	  jq('#productDetailAddToWishlist').css('display', 'none');
    });
    for (var i=0;i<skuList.length;i++) {
	  var sku = skuList[i];
      if (size == sku.size.replace(/\s/g, '').replace('/', '') || size == '') {
        if (firstPass) {
          firstPass = false;
          var itemDivId = this.onTagName('scp.size.image');
          jq.each(jq('#' + itemDivId + sizeIndex + ' > a'), function(i) { 
        	if(this.id == sku.size.replace(/\s/g, '').replace('/', '')) {
        	  jq('#' + itemDivId + sizeIndex + ' > #' + this.id).removeClass('sizeInStock');
        	  jq('#' + itemDivId + sizeIndex + ' > #' + this.id).addClass('size_selected sizeInStockSelected'); 
        	}
          });
        }
        var elem = jq('#selectedColor' + sizeIndex + ' #' + sku.color.replace(/\s/g, '').replace('/', '')).get(0);
        var setColorSwatchFunc = this.setColor.bind(this);
        elem.onclick = function() { 
          var colorName = this.id;
          jq.each(colorsFound, function(i) {
            if (colorsFound[i].replace(/\s/g, '').replace('/', '') == colorName) {
              colorName = colorsFound[i];
              return false;
            }
          });
  	      setColorSwatchFunc(colorName, this.rel);
		}
        jq('#' + swatchContainerDiv + sizeIndex + ' #' + elem.id).removeClass('colorLink'); // so that there will only be one of this class
        elem.className = elem.className + ' colorLink';
        elem = document.getElementById('img'+sku.color.replace(/\s/g, '').replace('/', ''));  
        if (this.itemInArray(colorsFound, sku.color) == false) {
          colorsFound[colorsFound.length] = sku.color;
        }  
      } 
    }
	// Disable colors not found.
    var scpSwatch = this.onTagName('scp.swatch');
	jq.each(jq('#'+scpSwatch + sizeIndex + ' a'), function(i, obj) {
	  var found = false;
	  jq.each(colorsFound, function(x, arrObj) {
		if (obj.id == arrObj.replace(/\s/g, '').replace('/', '')) {
		  found = true;
		  return false;
		}
	  });
	  if (found == false) {
	    jq('#'+scpSwatch + sizeIndex + ' #'+obj.id).addClass('color_disabled');
	  } else {
	    jq('#'+scpSwatch + sizeIndex + ' #'+obj.id).removeClass('color_disabled');
	  }
	});
    try {
      color = jq('#'+this.onTagName('scp.swatch') + sizeIndex + ' .color_selected .colorLink' + sizeIndex).get(0).id;
    }
    catch(err){/* no color is selected at this time */}
    
    this.onColorSizeChanged(this.getSku(color, size), color, size, sizeIndex); 
    this.adjustSwatches(sizeIndex);
    this.padSwatches(sizeIndex);
  },
  setColor: function(color, colorIndex) {
	if(colorIndex == undefined) {
	  colorIndex = '';  
	}
	var skuList;
	if(colorIndex == '') {
	  skuList = this.skus[0];
	}
	else {
	  skuList = this.skus[colorIndex - 1];
	}
	var sizeObj = this.sizeObj;
    if(jq('.size_selected').length > 0) {
	  var firstPass = true;
	  
	  for (var i=0;i<skuList.length;i++) {
	    if (color == skuList[i].color) {
		  var curSwatch = skuList[i].swatchImage;
		  if (firstPass) {
		    firstPass = false;
		    // Set our zoomImageUrl if applicable
		    this.changeDetailImages(skuList[i]);
		    // Set our selected swatch
		    if (jq('#' + this.onTagName('scp.swatch') + colorIndex).get(0) != null) {
		      var swatchSelectedClass = this.onTagName('scp.swatch.selected');
		      var colorNameDivID = this.onTagName('scp.color.name');
		      var swatchDivID = this.onTagName('scp.swatch');
		      jq.each(jq('#' + swatchDivID + colorIndex + ' img'), function() {
		    	if(this.src.indexOf(curSwatch) > 0) {
		          jq('#' + swatchDivID + colorIndex + ' #' + this.id).addClass(swatchSelectedClass);
		    	  jq('#' + colorNameDivID + colorIndex).html(color);
		    	} else {
		    	  jq('#' + swatchDivID + colorIndex + ' #' + this.id).removeClass(swatchSelectedClass);	
		    	}
		      });
		    }
		  }
	    }
	  }
	  
	  var size = '';
	  jq.each(jq('.sizeLink' + colorIndex), function () {
		if(this.className.indexOf("sizeInStockSelected") > -1) {
		  size = this.id;
		}
      });
	  
	  this.onColorSizeChanged(this.getSku(color, size), color, size, colorIndex);
	  checkSkuNoDropDowns(colorIndex);
    }
    this.padSwatches(colorIndex);
  },
  adjustSwatches: function(swatchIndex) {
	var scpSwatch = this.onTagName('scp.swatch');

	jq.each(jq('#' + scpSwatch + swatchIndex + ' > .swatchRow'), function(c, row) {
      var NUM_SWATCHES_PER_ROW = 4;
	  var numDisabledColors = 0;
	  var numSwatchesInRow = 0;
	  var rowID = row.id;
	  var swatchDivCount = jq('#' + scpSwatch + swatchIndex + ' > #' + rowID + ' > a').length;

	  // determine how many swatches are disabled in this row and how many there are total
	  jq.each(jq('#' + scpSwatch + swatchIndex + ' > #' + rowID + ' > a'), function(s, swatch) {
	    if(jq('#' + scpSwatch + swatchIndex + ' > #' + rowID+ ' > #' +  swatch.id).hasClass('color_disabled')) {
	      numDisabledColors++;
	    }
	    numSwatchesInRow++;
	  });	    

      // if we have more swatches than we should for this row, then give one to the next row
	  for(var i = jq('#' + scpSwatch + swatchIndex + ' > #swatchRow' + (c + 1) + ' > a').length; i > NUM_SWATCHES_PER_ROW; + i--) {
	    if(jq('#' + scpSwatch + swatchIndex + ' > #swatchRow' + (c + 1) + ' > a:last').hasClass('color_disabled')) {
	      numDisabledColors--;
	    }
	    jq('#' + scpSwatch + swatchIndex + ' > #swatchRow' + (c + 1) + ' > a:last').remove().appendTo(jq('#' + scpSwatch + swatchIndex + ' > #swatchRow' + (c + 2)));
	    numSwatchesInRow--;
	  }
	    
	  // if we don't have enough swatches in the row that are not disabled then take a swatch from the next row
	  var numSwatchesNeeded = (NUM_SWATCHES_PER_ROW - (numSwatchesInRow - numDisabledColors));
	  var numSwatchesInNextRow = jq('#' + scpSwatch + swatchIndex + ' > #swatchRow' + (c + 2) + ' > a').length;
	  var numFound = 0;
	  var pullIndex = 2;
	  if(numSwatchesNeeded > 0) {
		  for(var i = 0; i < numSwatchesInNextRow; i++) {
			if((jq('#' + scpSwatch + swatchIndex + ' > #swatchRow' + (c + pullIndex) + ' > a:first').get(0) != null) && 
		       (jq('#' + scpSwatch + swatchIndex + ' > #swatchRow' + (c + pullIndex) + ' > a:first').hasClass('color_disabled') == false)) {
		      jq('#' + scpSwatch + swatchIndex + ' > #swatchRow' + (c + pullIndex) + ' > a:first').remove().appendTo(jq('#' + scpSwatch + swatchIndex + ' > #swatchRow' + (c + 1)));
		      numFound++;
			} else {
			  jq('#' + scpSwatch + swatchIndex + ' > #swatchRow' + (c + pullIndex) + ' > a:first').remove().appendTo(jq('#' + scpSwatch + swatchIndex + ' > #swatchRow' + (c + pullIndex)));	
			}
			
			if(numFound == numSwatchesNeeded) {
			  break;
		    } else if ((numFound != numSwatchesNeeded) && ((i + 1) == numSwatchesInNextRow)) {
			  pullIndex++;
			  numSwatchesInNextRow = jq('#' + scpSwatch + swatchIndex + ' > #swatchRow' + (c + pullIndex) + ' > a').length;
			  i = -1;
		    }
		  }
	  }
	  
	  
	});
  },
  // This function pads the selected color swatch for UI purposes
  padSwatches: function(swatchIndex) {
    var swatchSelected = this.onTagName('scp.swatch.selected');
    jq.each(jq('.colorLink' + swatchIndex + ' > img'), function() {
	  if(!jq('.colorLink' + swatchIndex + ' #' + this.id).hasClass(swatchSelected)) { // not selected
	    jq('.colorLink' + swatchIndex + ' #' + this.id).css('paddingBottom', '4px');
	  }
	  else {
		jq('.colorLink' + swatchIndex + ' #' + this.id).css('paddingBottom', '0px');  
	  }
	});
  },
  sortSizes: function(useMulti) {
    var sizeDivs = jq('.' + this.onTagName('scp.size.image'));
    
    var sizeOrder = this.getSizeOrder().split(',');
    jq.each(sizeDivs, function(i) {
      var sizeLink = this;
      
      jq.each(sizeOrder, function(idx, orderSize) {
	    var sortIndex = "";
	    if(useMulti) {
	      sortIndex = (i + 1);	
	    }
	    jq.each(jq('#' + sizeLink.id + ' > .sizeLink' + sortIndex), function() {
		      var sizeId = orderSize.replace(/\s/g, '').replace('/', '');
			  if(sizeId == this.id) {
			    jq('#' + sizeLink.id + ' > #' + sizeId).insertAfter(jq('#' + sizeLink.id + ' > .sizeLink' + sortIndex + ':last'));
			    return false;
		      }
	        });
      });
    });
  },
  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 x = 0; x < this.skus.length; x++) {
      for (var i=0;i<this.skus[x].length;i++) {
        if((this.skus[x][i].color == color) && (size == this.skus[x][i].size.replace(/\s/g, '').replace('/', ''))) { 
          foundSku = this.skus[x][i];
        }
      }
    }
    return foundSku;    
  },
  onTagName: function(nm) { /* abstract */},  
  getSizeOrder: function() { /* abstract */ },
  onColorSizeChanged: function(selectedSku, selectedColor, selectedSize, selectedIndex) { /* abstract */ }
});