// global state variables
window.colorSelected = null;
window.sizeSelected = null;

window.step1 = false;
window.step2 = false;

window.onload = function() {
   /* colorOpt events */
   var aColor = $('colorOpt').getElementsByClassName('color', 'IMG');
   for( var i=0; i < aColor.length; i++ ) {
      $(aColor[i]).addEvent('mouseover', colorMouseover);
      $(aColor[i]).addEvent('mouseout', colorMouseout);
      $(aColor[i]).addEvent('click', colorClick);
   }
   $('colorOpt').addEvent('mouseout', colorReselect);

   // sizeOpt events
   var aSize = $('sizeOpt').getElementsByClassName('size');
   for( i=0; i < aSize.length; i++ ) {
      $(aSize[i]).addEvent('mouseover', sizeMouseover);
      $(aSize[i]).addEvent('mouseout', sizeMouseout);
      $(aSize[i]).addEvent('click', sizeClick);
   }

   // sample thumb events
   var aThumb = $('sampleContainer').getElementsByClassName('sampleThumb');
   for( i=0; i < aThumb.length; i++ ) {
      $(aThumb[i]).addEvent('mouseover', function( e ) {
         $('sampleImg').src = '/graphics/imgresize.175/samples/'+this.id+'.jpg';
      } );
   }

   // cart submit event
   $('cartadd').addEvent('submit', cartSubmit);
   
   updateState();   
};

// event handler functions
function colorMouseover( e ) {
   if( this.style.borderColor != '#0000ff' && this.style.borderTopColor != 'blue' ) {
      this.style.borderColor = 'black';
   }
   var srcImg = this.src;
   var test = srcImg.replace('_thumb', '');
   test = test.replace('imgresize.50', 'image');
   $('BigImg').src = test;
}
function colorMouseout( e ) {
   if( this.style.borderColor != '#0000ff' && this.style.borderTopColor != 'blue' ) {
      this.style.borderColor = 'white';
   }
}
function colorClick( e ) {
   var colors = $('colorOpt');
   // set all borders to unselected
   for (var i = 0; i < colors.childNodes.length; i++) {
      if( colors.childNodes[i].nodeName == 'IMG' ) {
         colors.childNodes[i].style.borderColor = 'white';
      }
   }
   window.colorSelected = this.id;
   $('cartadd').color.value = this.id;
   this.style.borderColor = 'blue';
   $('colorError').style.display = 'none';
   $('colorFill').value = this.name;
   window.step1 = true;
   
   updateState();
}
function colorReselect( e ) {
   if( window.colorSelected !== null ) {
      var test = $(window.colorSelected).src.replace('_thumb', '');
      test = test.replace('imgresize.50', 'image');
      $('BigImg').src = test;
   }
}
function sizeMouseover( e ) {
   if( this.style.borderColor != '#0000ff' && this.style.borderTopColor != 'blue' ) {
      this.style.borderColor = 'black';
   }
}
function sizeMouseout( e ) {
   if( this.style.borderColor != '#0000ff' && this.style.borderTopColor != 'blue' ) {
      this.style.borderColor = 'white';
   }
}
function sizeClick( e ) {
   var colors = $('sizeOpt');
   for (var i = 0; i < colors.childNodes.length; i++) {
      if( colors.childNodes[i].nodeName == 'DIV' ) {
         colors.childNodes[i].style.borderColor = 'white';
      }
   }
   window.sizeSelected = this.id;
   this.style.borderColor = 'blue';
   $('sizeError').style.display = 'none';
   $('sizeFill').value = this.id;
   for( i = 0; i < this.childNodes.length; i++ ) {
      if( this.childNodes[i].nodeName == 'DIV' ) {
         $('cartadd').size.value = this.childNodes[i].id;
         break;
      }
   }
   for( i = 0; i < this.childNodes.length; i++ ) {
      if( this.childNodes[i].nodeName == 'SPAN' && this.childNodes[i].className == 'sale' ) {
         $('priceFill').value = this.childNodes[i].innerHTML;
         break;
      }
   }
   window.step2 = true;
   
   updateState();
}
function cartSubmit( e ) {
   if( window.step1 == false || window.step2 == false ) {
      if( window.step1 == false ) {
         // select color error
         $('colorError').style.display = 'block';
         DOMAss.preventDefault(e);
      }
      if( window.step2 == false ) {
         // select size error
         $('sizeError').style.display = 'block';
         DOMAss.preventDefault(e);
      }
   } else {
      $('cartadd').submit();
   }
}

function updateState() {
   if( window.step1 == true ) {
      // grey step1
      $('step1').src = 'img/step1-grey.jpg';
   } else { $('step1').src = 'img/step1.jpg'; }
   if( window.step2 == true ) {
      // grey step2
      $('step2').src = 'img/step2-grey.jpg';
   } else { $('step2').src = 'img/step2.jpg'; }
   if( window.step1 == true && window.step2 == true ) {
      // set step3
      $('step3').src = 'img/step3.jpg';
      //enable addButton
      $('addToCart').src = 'img/add-green.png';
   }
}

function soloColor() {
   // step1 complete
   window.step1 = true;
   // set form color variable
   var col = $('colorOpt').getElementsByClassName('color');
   $('cartadd').color.value = col[0].id;
   
   updateState();
}

function soloSize() {
   window.step2 = true;
   updateState();
}