/* customize */

Ext.onReady(function(){
    var oCustomizeWrapper, oHeaderTabsDL, oTarget, oHeaderTabs, oHeaderTabDT, oHeaderTabDD, sHash, oHeaderPhotosTab, oHeaderProductsTab, oHeaderProductsTabLIs, oHeaderProductsTabLI, oLargePhotos, oLargePhotosControls, oLargePhotosClose, oLargePhotosPrevious, oLargePhotosNext, oZoom;
    var sCurrentTab = 'performance';

    function init(){
        oCustomizeWrapper = Ext.get('customize-wrapper');
        if(oCustomizeWrapper){
            oCustomizeWrapper.setVisibilityMode(Ext.Element.DISPLAY);
        }
    
        oHeaderTabsDL = Ext.get('header-tabs');
        if(oHeaderTabsDL){
            oHeaderTabsDL.addClass('setup');
            oHeaderTabsDL.on('click', doTabClick, null, {
                delegate: 'dt.tabs-tab'
            });
            
            if(location.hash){
                sHash = location.hash.substring(1);
                if(sHash != sCurrentTab){
                    doTabClick(null, Ext.get(sHash + '-tab'), null);
                }
            }
        }
        
        oHeaderPhotosTab = Ext.get('photos-content');
        if(oHeaderPhotosTab){
            oHeaderPhotosTab.addClass('clickable');
            oHeaderPhotosTab.on('click', function(evt, el, o){
                oActiveIMG = oLargePhotos.select('img.active');
                if(oActiveIMG && oActiveIMG.elements.length){
                    oActiveIMG = Ext.get(oActiveIMG.elements[0]);
                    oActiveIMG.hide();
                    oActiveIMG.removeClass('active');
                }
                oHeaderThumbnail = Ext.get(el);
                if(oHeaderThumbnail){
                    oLargePhoto = Ext.get('photo-' + oHeaderThumbnail.id.split('-')[1]);
                    if(oLargePhoto){
                        oLargePhoto.show();
                        oLargePhoto.addClass('active');
                    }
                    
                }
                oCustomizeWrapper.hide({
                    callback: function(){
                        oLargePhotos.show(true);
                        oActiveIMG = oLargePhotos.select('img.active');
                        if(oActiveIMG && oActiveIMG.elements.length){
                            oActiveIMG = Ext.get(oActiveIMG.elements[0]);
                            adjustPhotoNav(oActiveIMG, false);
                        }
                    }
                });
            }, null, {
                delegate: '.thumbnail'
            });
        }
        
        oLargePhotos = Ext.get('large-photos');
        if(oLargePhotos){
            oLargePhotos.setVisibilityMode(Ext.Element.DISPLAY);
            oLargePhotosClose = Ext.get('close-photos');
            if(oLargePhotosClose){
                oLargePhotosClose.on('click', function(evt, el, o){
                    oLargePhotos.hide({
                        callback: function(){
                            oCustomizeWrapper.show(true);
                        }
                    });
                });
            }

            oLargePhotosIMGs = oLargePhotos.select('img');
            for(var i = 0; i < oLargePhotosIMGs.elements.length; i++){
                Ext.get(oLargePhotosIMGs.elements[i]).setVisibilityMode(Ext.Element.DISPLAY);
                if(i == 0){
                    Ext.get(oLargePhotosIMGs.elements[i]).show();
                }else{
                    Ext.get(oLargePhotosIMGs.elements[i]).hide();
                }
            }
            
            oLargePhotosControls = Ext.get('large-photos-controls');
            
            oLargePhotosPrevious = Ext.get('previous-photo');
            if(oLargePhotosPrevious){
                oLargePhotosPrevious.on('click', doPreviousPhoto);
                oLargePhotosPrevious.on('mouseover', function(evt, el, o){
                    this.addClass('hover');
                });
                oLargePhotosPrevious.on('mouseout', function(evt, el, o){
                    this.removeClass('hover');
                });
            }
            oLargePhotosNext = Ext.get('next-photo');
            if(oLargePhotosNext){
                oLargePhotosNext.on('click', doNextPhoto);
                oLargePhotosNext.on('mouseover', function(evt, el, o){
                    this.addClass('hover');
                });
                oLargePhotosNext.on('mouseout', function(evt, el, o){
                    this.removeClass('hover');
                });
            }
        }
        
        oZoom = Ext.get('zoom-photo');
        if(oZoom){
            oZoom.on('click', function(evt, el, o){
                oActiveIMG = oLargePhotos.select('img.active');
                if(oActiveIMG && oActiveIMG.elements.length){
                    oActiveIMG = Ext.get(oActiveIMG.elements[0]);
                    oActiveIMG.hide();
                    oActiveIMG.removeClass('active');
                }
                oLargePhoto = Ext.get('photo-1');
                if(oLargePhoto){
                    oLargePhoto.show();
                    oLargePhoto.addClass('active');
                }
                oCustomizeWrapper.hide({
                    callback: function(){
                        oLargePhotos.show(true);
                        oActiveIMG = oLargePhotos.select('img.active');
                        if(oActiveIMG && oActiveIMG.elements.length){
                            oActiveIMG = Ext.get(oActiveIMG.elements[0]);
                            adjustPhotoNav(oActiveIMG, false);
                        }
                    }
                });
            }, null, {
                preventDefault: true
              , stopPropagation: true
              , stopEvent: true
            });
        }
        
        oHeaderProductsTab = Ext.get('products-content');
        if(oHeaderProductsTab){
            oHeaderProductsTabLIs = oHeaderProductsTab.select('ul.items li.item', true);
            for(var i = 0; i < oHeaderProductsTabLIs.elements.length; i++){
              oHeaderProductsTabLI = Ext.get(oHeaderProductsTabLIs.elements[i]);
              if(oHeaderProductsTabLI){
                  oHeaderProductsTabLI.on('mouseover', function(){
                      this.addClass('hover');
                  });
                  oHeaderProductsTabLI.on('mouseout', function(){
                      this.removeClass('hover');
                  });
              }
            }
        }
    }
    
    function adjustPhotoNav(oActiveIMG){
        var animate = true;
        if(arguments.length > 1){
            animate = arguments[1];
        }
        if(oLargePhotosPrevious && oLargePhotosNext && oActiveIMG){
            nActiveIMGHeight = oActiveIMG.getHeight();
            oLargePhotosControls.setHeight(nActiveIMGHeight, animate);
            oLargePhotosPrevious.setHeight(nActiveIMGHeight - 2, animate);
            oLargePhotosNext.setHeight(nActiveIMGHeight - 2, animate);
        }
    }
    
    function doPreviousPhoto(){
        oActiveIMG = oLargePhotos.select('img.active');
        if(oActiveIMG && oActiveIMG.elements.length){
            oActiveIMG = Ext.get(oActiveIMG.elements[0]);
            oActiveIMG.hide({
                callback: function(){
                    this.removeClass('active');
                    oActiveIMGPrev = oActiveIMG.prev();
                    if(!oActiveIMGPrev){
                        oActiveIMGPrev = oActiveIMG.parent().select('img');
                        oActiveIMGPrev = Ext.get(oActiveIMGPrev.elements[oActiveIMGPrev.elements.length - 1]);
                    }
                    oActiveIMGPrev.show({
                        callback: function(){
                            this.addClass('active');
                        }
                    });
                    adjustPhotoNav(oActiveIMGPrev);
                }
            });
        }
    }
    
    function doNextPhoto(){
        oActiveIMG = oLargePhotos.select('img.active');
        if(oActiveIMG && oActiveIMG.elements.length){
            oActiveIMG = Ext.get(oActiveIMG.elements[0]);
            oActiveIMG.hide({
                callback: function(){
                    this.removeClass('active');
                    oActiveIMGNext = oActiveIMG.next()
                    if(!oActiveIMGNext || oActiveIMGNext.dom.tagName.toLowerCase() != 'img'){
                        oActiveIMGNext = oActiveIMG.parent().select('img');
                        oActiveIMGNext = Ext.get(oActiveIMGNext.elements[0]);
                    }
                    oActiveIMGNext.show({
                        callback: function(){
                            this.addClass('active');
                        }
                    });
                    adjustPhotoNav(oActiveIMGNext);
                }
            });
        }
    }
    
    function doTabClick(evt, el, o){
        oTarget = Ext.get(el);
        sTab = el.id.split('-')[0];
        oHeaderTabDT = oTarget;
        oHeaderTabDD = Ext.get(sTab + '-content');
        if(oHeaderTabDT && oHeaderTabDD){
            oHeaderTabsDL.removeClass(sCurrentTab);
            sCurrentTab = sTab;
            oHeaderTabsDL.addClass(sCurrentTab);
        }
    }

    init();
});


function setOptionTitle(value)
{
  window.status = value;
  return true;
}

function setOption(option_id)
{
  if(!document.getElementById)
    return true;
  else
  {
    oOption_link_side = document.getElementById('option_tr_side_' + current_option);
    if(oOption_link_side)
      oOption_link_side.className = '';
    oOption = document.getElementById('option_' + current_option);
    if(oOption)
      oOption.style.display = 'none';

    oOption_link_side = document.getElementById('option_tr_side_' + option_id);
    if(oOption_link_side)
      oOption_link_side.className = 'selectedLinkSide';
    oOption = document.getElementById('option_' + option_id);
    if(oOption)
      oOption.style.display = 'block';

    current_option = option_id;

    return false;
  }
}

function setOptionValue(option_id, value_id, description, animate)
{
  var returnValue = false;
  var animate = false;
  var IsRestricted = false;
  var i = 0;
  if(arguments.length == 4)
    animate = arguments[3];
  if(!overlayLoaded || !oForm)
    setTimeout('setOptionValue(\'' + option_id + '\', \'' + value_id + '\', \'' + description + '\', ' + animate + ')', 500);
  else
  {
    if(value_id)
    {
      for(i = 0; i < options[option_id].restrictions.length; i++)
      {
        if(isChecked(oForm.elements['option_' + options[option_id].restrictions[i]]))
        {
          IsRestricted = true;
          alert(options[option_id].restriction_message);
          options[option_id].checked = false;
          break;
        }
      }
    }
    if(!IsRestricted)
    {
      options[option_id].checked = (!oForm.elements['option_' + option_id].length) ? oForm.elements['option_' + option_id].checked : true;
      oImage = (window.frames['overlay']) ? window.frames['overlay'].document.getElementById('option_image_' + option_id) : document.getElementById('option_image_' + option_id);
      oImage.src = (value_id) ? options[option_id].values[value_id].overlay.src : blank.src;
      if(!value_id && oImage.runtimeStyle && oImage.runtimeStyle.filter && oImage.runtimeStyle.filter != '')
        oImage.runtimeStyle.filter = '';
      oImage.onerror = function()
      {
        oImage.src = '/images/t.gif';
      }
      oOptionDD = document.getElementById('product-option-' + option_id);
      oOptionsPriceTotal = document.getElementById('options-price-total');
      oProductPriceTotal = document.getElementById('product_price_total');
      if(oOptionDD)
      {
        if(options[option_id].checked)
        {
          if(oOptionDD.style.display != 'block') oOptionDD.style.display = 'block';
          document.getElementById('option_value_' + option_id).innerHTML = (description && description.length > 0) ? '(' + description + ')' : '';
          if(animate)
            new Effect.Highlight(oOptionDD, { startcolor: '#cccc01', endcolor: '#ffffff', duration: 0.5 });
        }
         else
          oOptionDD.style.display = 'none';
//          new Effect.BlindUp(oOptionDD);
      }
      if(oOptionsPriceTotal)
      {
        oOptionsPriceTotal.innerHTML = dollarFormat('' + getOptionsPrice());
        if(animate)
          new Effect.Highlight(oOptionsPriceTotal, { startcolor: '#cccc01', endcolor: '#ffffff', duration: 0.5 });
      }
      if(oProductPriceTotal)
      {
        oProductPriceTotal.innerHTML = dollarFormat(regular_price + getOptionsPrice());
        if(animate)
          new Effect.Highlight(oProductPriceTotal.parentElement, { startcolor: '#cccc01', endcolor: '#ffffff', duration: 0.5 });
      }
      returnValue = true;
    }
    return returnValue;
  }
}

function getCheckedValue(oElement)
{
  var returnValue = null;
  if(oElement)
  {
    if(!oElement.length)
    {
      if(oElement.checked)
        returnValue = oElement.value;
    }
    else
    {
      for(var i = 0; i < oElement.length; i++)
      {
        if(oElement[i].checked)
        {
          returnValue = oElement[i].value;
          break; 
        }
      }
    }
  }
  return returnValue;
}

function isChecked(oElement)
{
  var returnValue = false;
  if(oElement)
  {
    if(!oElement.length)
    {
      if(oElement.checked)
        returnValue = true;
    }
    else
    {
      for(var i = 0; i < oElement.length; i++)
      {
        if(oElement[i].checked)
        {
          returnValue = true;
          break; 
        }
      }
    }
  }
  return returnValue;
}

function getOptionsPrice()
{
  var returnValue = 0;
  for(option in options)
  {
    if(options[option].checked)
      returnValue += options[option].price_added;
  }
  return returnValue;
}

function dollarFormat(valuein)
{ 
  var returnValue = '$0.00';
  valuein = '' + valuein;
//  return '$' + valuein;
  if(valuein)
  {
    var Outdollars = '';
    var decipos = valuein.indexOf('.');
    if (decipos == -1)
      decipos = valuein.length;
    var dollars = valuein.substring(0, decipos);
    var dollen = dollars.length;
    if(dollen > 3)
    {
      while(dollen > 0)
      {
        tDollars = dollars.substring(dollen -3, dollen)
        if(tDollars.length == 3)
        {
          Outdollars = ',' + tDollars + Outdollars;
          dollen = dollen - 3;
        }
        else
        {
          Outdollars = tDollars + Outdollars;
          dollen = 0;
        }
      }
      if(Outdollars.substring(0, 1) == ',')
        dollars = Outdollars.substring(1, Outdollars.length);
      else
        dollars = Outdollars;
    }
    
    var cents = valuein.substring(decipos + 1, decipos + 3);
    if(cents == '')
      cents = '00';
    if (cents.length == 1)
      cents = cents + '0';
  }
  else
  {
    dollars = '0';
    cents = '00';
  }
  returnValue = '$' + dollars + '.' + cents;
  return returnValue;
} 

function newWindow(href, target, width, height)
{
  var returnValue = false;
  var features = (arguments.length == 4) ? 'scrollbars,status,width=' + width + ',height=' + height : ((arguments[5]) ? arguments[5] + ',width=' + width + ',height=' + height : 'width=' + width + ',height=' + height);
  if(window.screen)
  {
    var pxLeft = ((screen.availWidth - width - 10) * .5);
    var pxTop = ((screen.availHeight - height - 30) * .5);
    features += ',left=' + pxLeft + ',top=' + pxTop + ',x=' + pxLeft + ',y=' + pxTop;
  }
  if(!window.open)
    returnValue = true;
  else
  {
    if(self[target + 'Win'] && !self[target + 'Win'].closed)
      self[target + 'Win'].close();
    self[target + 'Win'] = window.open(href, target, features);
    if(self[target + 'Win'].focus)
      self[target + 'Win'].focus();
  }
  return returnValue;
}

function toggleStep(step)
{
  var oHeader = null;
  var oStep = null;
  var animate = false;
  if(current_step)
  {
    oHeader = $(current_step + '-header');
    if(oHeader)
    {
      if(oHeader.className.indexOf('error') == -1)
      {
        Element.removeClassName(oHeader, 'selected');
        oStep = $(current_step);
        if(animate)
          new Effect.BlindUp(oStep);
        else
          oStep.style.display = 'none';
      }
      else
        oHeader.className = 'step error';
    }
  }
  if(current_step == step)
  {
    current_step = null;
    return;
  }
  oHeader = $(step + '-header');
  if(oHeader)
  {
    Element.addClassName(oHeader, 'selected');
    if(oHeader.className.indexOf('error') == -1)
    {
      oStep = $(step);
      if(animate)
        new Effect.BlindDown(oStep);
      else
        oStep.style.display = 'block';
    }
    current_step = step;
  }
}

var current_description_timer = null;

function toggleDescription(prefix, descriptionID)
{
  var animate = false;
  if(current_description_timer != null)
  {
    clearTimeout(current_description_timer);
    current_description_timer = null;
  }
  if(!document.getElementById)
    return;
  if(current_description == prefix + '-notes-' + descriptionID)
    return;
  if(current_description)
  {
    oDescription = $(current_description);
    if(oDescription)
    {
      if(animate)
        new Effect.BlindUp(oDescription);
      else
        oDescription.style.display = 'none';
    }
  }
  oDescription = document.getElementById(prefix + '-notes-' + descriptionID);
  if(oDescription)
  {
    if(animate)
      new Effect.BlindDown(oDescription);
    else
      oDescription.style.display = 'block';
  }
  current_description = prefix + '-notes-' + descriptionID;
  return true;
}

function toggleSynopsis(synopsisID, bDisplay)
{
  oSynopsis = document.getElementById('synopsis_option_' + synopsisID);
  oSynopsisMoreLink = document.getElementById('more_synopsis_link_' + synopsisID);
  oSynopsisMoreLink.style.display = (bDisplay) ? 'none' : '';
  oSynopsis.style.display = (bDisplay) ? 'block' : 'none';
}

function toggleCatalogDetails(oHeader, oElement)
{
  if(oElement.checked)
  {
    Element.addClassName(oHeader, 'required');
    new Effect.BlindDown($('customize-catalog-info'));
  }
  else
  {
    Element.removeClassName(oHeader, 'required');
    new Effect.BlindUp($('customize-catalog-info'));
  }
}