YAHOO.namespace("srisupa.util.imageLoader");

YAHOO.srisupa.util.imageLoader = new function()
{
  //list food photo urls
  this.foodList         = new Array('/media/photos/food/food01.jpg',
                                    '/media/photos/food/food02.jpg',
                                    '/media/photos/food/food03.jpg',
                                    '/media/photos/food/food04.jpg',
                                    '/media/photos/food/food05.jpg');
  
  //list food photo urls
  this.productsList     = new Array('/media/photos/product/product01.jpg',
                                    '/media/photos/product/product02.jpg',
                                    '/media/photos/product/product03.jpg',
                                    '/media/photos/product/product04.jpg',
                                    '/media/photos/product/product05.jpg',
                                    '/media/photos/product/product06.jpg',
                                    '/media/photos/product/product07.jpg',
                                    '/media/photos/product/product08.jpg',
                                    '/media/photos/product/product09.jpg',
                                    '/media/photos/product/product10.jpg');

  //list flower photo urls
  this.flowersList      = new Array('/media/photos/flowers/flower01.jpg',
                                    '/media/photos/flowers/flower02.jpg',
                                    '/media/photos/flowers/flower03.jpg',
                                    '/media/photos/flowers/flower04.jpg',
                                    '/media/photos/flowers/flower05.jpg',
                                    '/media/photos/flowers/flower06.jpg');
  
  //list landscape photo urls
  this.landscapeList   = new Array('/media/photos/landscape/bw01.jpg',
                                   '/media/photos/landscape/bw02.jpg',
                                   '/media/photos/landscape/bw03.jpg',
                                   '/media/photos/landscape/bw04.jpg',
                                   '/media/photos/landscape/bw05.jpg',
                                   '/media/photos/landscape/bw06.jpg',
                                   '/media/photos/landscape/bw07.jpg',
                                   '/media/photos/landscape/bw08.jpg',
                                   '/media/photos/landscape/color01.jpg',
                                   '/media/photos/landscape/color02.jpg',
                                   '/media/photos/landscape/color03.jpg',
                                   '/media/photos/landscape/color04.jpg',
                                   '/media/photos/landscape/color05.jpg',
                                   '/media/photos/landscape/color06.jpg',
                                   '/media/photos/landscape/color07.jpg',
                                   '/media/photos/landscape/color08.jpg',
                                   '/media/photos/landscape/color09.jpg',
                                   '/media/photos/landscape/color10.jpg');

  this.catArray = '';
  this.catName  = '';
  this.itemIdx  = '';
  
  this.clickEvent = function(ev)
  {
    YAHOO.util.Event.preventDefault(ev);

    var oSelf = YAHOO.srisupa.util.imageLoader;

    oSelf.getHashVals(this.href.substr(this.href.indexOf('#') + 1));

    oSelf.setImage();
    oSelf.setThumbs();
  };

  this.doSwap = function()
  {
    var oSelf = YAHOO.srisupa.util.imageLoader;
    var mainImage = document.getElementById('mainImage');
    mainImage.src = oSelf.catArray[oSelf.itemIdx];
    mainImage.style.opacity = 0;
  };

  this.setImage = function()
  {
    var mainImage = document.getElementById('mainImage');
    
    var inAttr = { opacity: { to: 1.0 }};
    
                   //width:   { to: 400 } };
    var fadeIn = new YAHOO.util.Anim(mainImage, inAttr, 1.2, YAHOO.util.Easing.EaseOutStrong);
    fadeIn.onStart.subscribe(this.doSwap);
    
    var outAttr = { opacity: { to: 0 }};   
    var fadeOut = new YAHOO.util.Anim(mainImage, outAttr, .3, YAHOO.util.Easing.EaseOutStrong);
    fadeOut.onComplete.subscribe(
      function() {
        fadeIn.animate();
      }
    );
    
    fadeOut.animate();
  };
  
  this.setThumbs = function()
  {    
    var catLength = this.catArray.length - 1;
    
    var prevIdx = this.itemIdx - 1;
    var nextIdx = this.itemIdx + 1;
    
    if ( prevIdx < 0 )
    {
      prevIdx = catLength;
    }
    
    if ( nextIdx > catLength )
    {
      nextIdx = 0;
    }
    
    var prevLink  = document.getElementById('prevLink');
    var nextLink  = document.getElementById('nextLink');
    
    var prevThumb = document.getElementById('prevThumb');
    var nextThumb = document.getElementById('nextThumb');
    
    prevLink.href = '#' + this.catName + '_' + prevIdx;
    nextLink.href = '#' + this.catName + '_' + nextIdx;

    prevThumb.src = this.catArray[prevIdx];
    nextThumb.src = this.catArray[nextIdx];
  };
  
  this.getHashVals = function(hash)
  {
    // try to see if hash is in url.
    if ( ! hash )
    {
      hash = document.location.hash.substr(1);
    }
    
    // still no hash?  Just give some defaults
    if ( ! hash )
    {
      this.catName  = 'food';
      this.catArray = this.foodList;
      this.itemIdx  = 0;
      this.setHash();
      return;
    }
     
    var hashBits = hash.split('_', 2);
    
    if ( hashBits[0].length > 1 )
    {
      this.catName  = hashBits[0]; 
      this.catArray = eval('this.' + this.catName + 'List');

      // if the array requested don't exist, just set defaults
      if ( ! this.catArray ) 
      {
        this.catName  = 'food';
        this.catArray = this.foodList;
        this.itemIdx  = 0;
        this.setHash();
        return;
      }
    }
    else
    {
      this.catName  = 'food';
      this.catArray = this.foodList;
      this.itemIdx  = 0;
      this.setHash();
      return;
    }
    
    if ( ( ! hashBits[1] ) || ( ! parseInt(hashBits[1]) ) )
    {
      this.itemIdx = 0;
    }
    else
    {
      this.itemIdx = parseInt(hashBits[1]);
    }
    
    this.setHash();
  };
  
  this.setHash = function()
  {
    var hrefBits = document.location.href.split('#', 2);
    document.location.href = hrefBits[0] + '#' + this.catName + '_' + this.itemIdx;
  };
    
  this.init = function()
  {
    YAHOO.util.Event.addListener(
      YAHOO.util.Dom.getElementsByClassName('photoLink'),
      'click',
      this.clickEvent
    );
    
    this.getHashVals();
    this.setImage();
    this.setThumbs();
  };

};

function swapImage(e)
{
  var hash;
  
  if ( window.event )
  {
    hash = window.event.srcElement.hash.substring(1);
  }
  else
  {
    hash = e.target.hash.substring(1);
  }
  
  if ( ! hash ) { return; }
  
  var file = '/images/' + hash.substring(0, hash.indexOf('_')) + '/' + hash.substring(hash.indexOf('_') + 3) + '.png';
  document.getElementById('design_img').src = file;
};

function initialImage()
{
  var hash = document.location.hash.substring(1);

  if ( ! hash )
  { 
    YAHOO.srisupa.util.accordion.init('dependent', 'first', 0.8);
    YAHOO.util.Event.addListener(YAHOO.util.Dom.getElementsByClassName('img_link', 'a'), 'click', swapImage);
    return;
  }

  var section       = hash.substr(hash.indexOf('_') + 1, 1);
  var imageSelector = hash.substring(hash.indexOf('_') + 3);

  var file = '/images/' + hash.substring(0, hash.indexOf('_')) + '/' + imageSelector + '.png';
  document.getElementById('design_img').src = file;  

  YAHOO.srisupa.util.accordion.init('dependent', 'none', 0.8);
  var hd = YAHOO.util.Dom.getElementsByClassName('accordion_toggle', 'h4')[section];
  var bd = YAHOO.util.Dom.getElementsByClassName('accordion_content', 'ul')[section];

  YAHOO.srisupa.util.accordion.openSection(hd, bd, 0.1);
  YAHOO.util.Event.addListener(YAHOO.util.Dom.getElementsByClassName('img_link', 'a'), 'click', swapImage);
};

YAHOO.namespace("srisupa.util.accordion");

/*
 * Sectional accordion animation
 */
YAHOO.srisupa.util.accordion = new function()
{
  this.hdClass       = "";
  this.hdClassActive = "";
  this.bdClass       = "";
  this.duration      = "";
    
  this.clickEventDependent = function(e)
  {
    var oSelf = YAHOO.srisupa.util.accordion;
    var elOldHd = YAHOO.util.Dom.getElementsByClassName(oSelf.hdClassActive)[0];
    
    if(elOldHd)
    {
      var elOldBd = oSelf.findContent(elOldHd);
      oSelf.closeSection(elOldHd, elOldBd);
    }
    
    var elNewBd = oSelf.findContent(this);
    
    oSelf.openSection(this, elNewBd);
  };
    
  this.clickEventIndependent = function(e)
  {
    var oSelf = YAHOO.srisupa.util.accordion;
    var elNewBd = oSelf.findContent(this);
    
    if ( YAHOO.util.Dom.hasClass(this, oSelf.hdClassActive) )
    {
      oSelf.closeSection(this, elNewBd);
    }
    else
    {
      oSelf.openSection(this, elNewBd);
    }
  };
    
  this.findContent = function(el)
  {
    if(!el)
    {
      return null;
    }

    var el = el.nextSibling;
    
    while(el.className != this.bdClass)
    {
      el = el.nextSibling;
    }
        
    return el;
  };
    
  this.closeSection = function(elHd, elBd, duration)
  {
    var attributes = {
      height: { to: 0}
    };

    if ( (duration == undefined) || (isNaN(duration)) )
    {
      duration = this.duration;
    }
    
    var closeAnim = new YAHOO.util.Anim(elBd, attributes, duration);
    closeAnim.animate();
    YAHOO.util.Dom.removeClass(elHd, this.hdClassActive);
  };
  
  this.closeAll = function(duration)
  {
    var hds = YAHOO.util.Dom.getElementsByClassName(this.hdClass);

    if ( (duration == undefined) || (isNaN(duration)) )
    {
      duration = this.duration;
    }
    
    var hdsLength = hds.length;
    
    for ( var i = 0; i < hdsLength; i++ )
    {
      if ( ! YAHOO.util.Dom.getElementsByClassName(this.bdClass)[i] )
        {
          return null;
        }

      var hd = YAHOO.util.Dom.getElementsByClassName(this.hdClass)[i];
      var bd = YAHOO.util.Dom.getElementsByClassName(this.bdClass)[i];
      this.closeSection(hd, bd, duration);
    }
  };
  
  this.closeAllFast = function()
  {
    this.closeAll(0.0);  
  };
    
  this.openSection = function(elHd, elBd, duration)
  {
    var attributes = {
      height: { to: elBd.scrollHeight }
    };
    
    if ( (duration == undefined) || (isNaN(duration)) )
    {
      duration = this.duration;
    }
    
    var openAnim = new YAHOO.util.Anim(elBd, attributes, duration);
    openAnim.onComplete.subscribe(function(){
      var el = this.getEl();
      el.style.height="auto";
    });

    openAnim.animate();
    YAHOO.util.Dom.addClass(elHd, this.hdClassActive);
  };
  
  this.openAll = function(duration)
  {
    var hds = YAHOO.util.Dom.getElementsByClassName(this.hdClass);
    
    if ( (duration == undefined) || (isNaN(duration)) )
    {
      duration = this.duration;
    }

    var hdsLength = hds.length;
    
    for ( var i = 0; i < hdsLength; i++ )
    {
      if ( ! YAHOO.util.Dom.getElementsByClassName(this.bdClass)[i] )
        {
          return null;
        }
      
      var hd = YAHOO.util.Dom.getElementsByClassName(this.hdClass)[i];
      var bd = YAHOO.util.Dom.getElementsByClassName(this.bdClass)[i];
      this.openSection(hd, bd, duration);
    }
  };
  
  this.openAllFast = function()
  {
    this.openAll(0.0);
  };

  this.openFirst = function(duration)
  {
    if ( (duration == undefined) || (isNaN(duration)) )
    {
      duration = this.duration;
    }
    
    var hd = YAHOO.util.Dom.getElementsByClassName(this.hdClass)[0];
    var bd = YAHOO.util.Dom.getElementsByClassName(this.bdClass)[0];
    this.openSection(hd, bd, duration);
  };
  
  this.openFirstFast = function()
  {
    this.openFirst(0.0);
  };
    
  this.openNumber = function(integer)
  {
    var hd = YAHOO.util.Dom.getElementsByClassName(this.hdClass)[integer];
    var bd = YAHOO.util.Dom.getElementsByClassName(this.bdClass)[integer];
    this.openSection(hd, bd);
  };
    
  this.init = function(behavior,
                       initial,
                       duration,
                       event,
                       hdClass, 
                       hdClassActive,
                       bdClass)
  {
    // behavior should be one of 'independent' (default) or 'dependent'. 
    // Here, dependent indicates that opening one accordion will close all 
    // others.
    behavior = ((behavior) ? behavior : 'independent');

    // initial should be one of 'all', 'none', or 'first'.
    initial = ((initial) ? initial : 'all');
    
    // animation duration setting in seconds.
    this.duration = (
      ((duration == undefined) || isNaN(duration)) ? 0.2 : duration
    );
    
    // event type;
    event = ((event) ? event : 'click');

    // these are the class identifiers for the elements to operate over.
    this.hdClass       = ((hdClass) ? hdClass : 'accordion_toggle');
    this.bdClass       = ((bdClass) ? bdClass : 'accordion_content');
    this.hdClassActive = ((hdClassActive) ? hdClassActive : 'accordion_toggle_active');

    (initial == 'all')  ? this.openAllFast() : this.closeAllFast();
    (initial == 'first') ? this.openFirstFast() : null;

    eHandler = ((behavior == 'independent') ? 
      this.clickEventIndependent : this.clickEventDependent);

    YAHOO.util.Event.addListener(
      YAHOO.util.Dom.getElementsByClassName(this.hdClass),
      event,
      eHandler
    );
  };
};