/*function changeImage3(img) {
 var imageName;
 var imageNum;
 for (i = 1; i <= 5; i++) {
  imageName = "image" + i;
  if (document.getElementById(imageName)) {
   document.getElementById(imageName).style.display='none';
  }
 }
 for (i = 1; i <= 5; i++) {
  imageName = "colorImage" + i;
  if(img == imageName) imageNum = i; 
  if (document.getElementById(imageName)) {
   document.getElementById(imageName).style.display='none';
  }
 }
 document.getElementById(img).style.display='block';
 changeOptions(imageNum);
}*/

function changeOption(num){
   var spans = document.getElementsByTagName('span');
   for(var i = 0; i<spans.length; i++){
      if(spans[i].className.indexOf('mss-color-option')!=-1){
         //alert(spans[i].innerHTML);
         spans[i].getElementsByTagName('select')[0].selectedIndex=num;
      }
   }
   
}

function changeBorder(num) {
  var imgName = 'miniSwatch'+num;
  var imgs = document.getElementsByTagName('img');
  for (var i=0; i<imgs.length; i++) {
    if (imgs[i].className.indexOf('miniSwatch')!=-1) {
      //alert(imgName+' vs '+imgs[i].name);
      if (imgs[i].id==imgName) imgs[i].style.border='2px solid #444444';
      else imgs[i].style.border='2px solid #ffffff';
    }
  }
}

function clickSwatch(num) {
  changeBorder(num);
  changeOption(num + 1);  
}

function clickOption(opt) {
  var num = opt.selectedIndex;
  if (num>0) changeBorder(num-1);
  else changeBorder();
}

var pendingFade=false;

function overSwatch(num) {
  var obj = document.getElementById('mssSwatch'+num);
  if (!obj) return;
  hideOldSwatch();
  obj.style.display='block';
  pendingFade=false;
}

function outSwatch(num) {
  pendingFade=num;
  setTimeout(hideOldSwatch, 1000);
}

function hideOldSwatch() {
  if (pendingFade!==false) {
    var old = document.getElementById('mssSwatch'+pendingFade);
    old.style.display='none';
    pendingFade=false;
  }     
}