/*


Dynamic Application of Functions to DOM
*/
var _debugMode = true;


document.observe('dom:loaded', init);


function init () {
  
  /* add alternating to CategoryRows */
  $$('#wide .CategoryRow').each(alternate);
  
  /* project */
    /* tweak margin's of project photo thumbs */
    var previewTransitioning = false; /* used to make the thumbnail fade bulletproof when clicked */
    $$('#ProjectPhotosThumbs .ImagePreview').each(function(preview, i){
      if (i%3 == 2) {
        preview
          .setStyle({
            'marginRight': '0px'
          })
          .insert({
            after: '<div class="clear"></div>'
          });
      }
      /* show the normal or large view when the thumbnail is clicked */
      preview.observe('click', function(e){
        var id = this.id.split('_').last();
        var normalViewDivs = $$('.normalView');
        var hideme = normalViewDivs.find(function(div){
          return div.visible();
        });
        var showme = normalViewDivs.find(function(div){
          return div.id.endsWith(id)
        });
        /* if we're not transitioning and
             we aren't trying to toggle the same image that is already shown... */
        if ((!previewTransitioning) && (showme != hideme)){
          previewTransitioning = true;
          hideme.fade();
          showme.appear({
            afterFinish: function(){ previewTransitioning = false; }
          });
        }
        e.stop();
      });
    });
    t(function(){
      $$('.normalView').invoke('hide').first().show();
    });
    
  /* end project */

  $$('.ProductCompany').each(alternate).invoke('toggleClassHover', 'hover');
  

  /*

  Specify which elements to apply png hack to
  */
  // $$('#shell2', '#head h1 img', '#feature', '.RequestButton',
  // '.CategoryRow.alt', '.ProductCompany.alt', '#project', '.productsCategoryList', '#map-us', '#CocoDesign').invoke('pngHack');
  $$('.RequestButton', '#map-us', '#CocoDesign').invoke('pngHack');
  
  // sort gallery index alphabetically
  var categories = $$('.gallery-category');
  if (categories.length > 0 && $('galleries')) {
    var galleries = $('galleries');
    var sortedCategories = categories.sortBy(function(cat){
      return cat.down('h3').innerHTML;
    });
    if (Prototype.Browser.IE) {
      var galleryTemplate = new Template('<div class="gallery-category">#{gallery}</div>');
      var sortedCategoriesMarkup = sortedCategories.map(function(sortedCat){
        return galleryTemplate.evaluate({ gallery: sortedCat.innerHTML });
      }).join('');
      galleries.update(sortedCategoriesMarkup);
    } else {
      galleries.update('');
      sortedCategories.each(Element.insert.curry(galleries));
    }
  }
  
}



function alternate (row, i){
  if (i%2 == 0) row.addClassName('alt');
}

Element.addMethods({
  toggleClassHover: function(el, _class){
    var el = $(el);
    el.observe(
      'mouseover', function(){
        el.addClassName(_class);
      }).observe(
      'mouseout', function(){
        el.removeClassName(_class);
      }
    );
    return el;
  }
});