var m = a = null;
var aThumb = null;

var imgCounts = {
  'beauty' : {
    'body'      : 22,
    'closeups'  : 18,
    'covers'    : 6,
  },
  'fashion' : {
    'moderne'  : 39,
    'vintage'   : 35
  },
  'portrait' : {
    'celebrity' : 20,
    'autre'     : 17,
  },
  'advertisement' : {
    'conventional'  : 24,
    'bridal'        : 12
  }
};

var myrules = {
  "#mainNav li.nav" : function(el) {
    el.subnavs = el.getElementsByTagName('UL').item(0);

    el.onclick = function(e) {
      if(m && m == this) return;

      noBubble(e);

      Element.addClassName(this, 'hilite');
      this.subnavs.style.display = 'block';

      if(m) {
        Element.removeClassName(m, 'hilite');
        m.subnavs.style.display = 'none';
      }

      m = el;
    };
  },
  "#mainNav li.subnav" : function(el) {
    el.parentnav = el.parentNode.parentNode;

    el.onclick = function(e) {
      noBubble(e);

      $('browseNav').style.display = 'block';

      m.subnav = this;
      a = this.parentnav;

      $('thumbs').innerHTML = '';

      f.toggle();
      f.options.onComplete = function() {
        var imgPath = 'images/' + [el.parentnav.title] + '/' + [el.title] + '/';
        var imgPrefix = [el.parentnav.title] + '_' + [el.title] + '_';
        var imgExt = '.jpg';

        var thumbs = $('thumbs');
        var l = null;
        var s = '';
        var img = null;


        // load the default picture of the section
        $('pageTitle').innerHTML = '<a href="index.html">home</a> ' + el.parentnav.title + ' &gt; ' + el.title;

        for(var i = 0; i < Number(imgCounts[el.parentnav.title][el.title]); i++) {
          img = new Image();
          img.src = imgPath + imgPrefix + ((i < 10) ? ('0' + (i+1)) : (i+1)) + imgExt;

          l = document.createElement('span');
          //l.href = 'javascript:void(0);';
          l.innerHTML = i;
          l.index = i;
          l.onmouseover = function() {
            //showThumb(this, t[i]);
            Element.addClassName(this, 'hover');
          }
          l.onmouseout = function() {
            //showThumb(this, t[i]);
            if(aThumb != this) {
              Element.removeClassName(this, 'hover');
            }
          }
          l.onclick = function() {
            if(aThumb == this) return;

            var self = this;
            if(aThumb) {
              Element.removeClassName(aThumb, 'active');
              Element.removeClassName(aThumb, 'hover');
            }
            aThumb = self;
            Element.addClassName(self, 'active');

            f.toggle();
            f.options.onComplete = function() {
              $('img').src = imgPath + imgPrefix + ((self.index < 10) ? ('0' + (self.index)) : (self.index)) + imgExt;
            }
          }

          if(i == 0) {
            $('img').src = imgPath + imgPrefix + '00' + imgExt;
            l.innerHTML = 'start';
            Element.addClassName(l, 'start');
            Element.addClassName(l, 'active');
            aThumb = l;
          }

          thumbs.appendChild(l);
        }
      }
    };
  },
  "#browseNav span" : function(el) {
    el.onmouseover = function() {
      Element.addClassName(el, 'hover');
    }
    el.onmouseout = function() {
      Element.removeClassName(el, 'hover');
    }
    el.onclick = function(e) {
      if(el.id == 'bPrev') {
        if(aThumb.index > 0) {
          $('thumbs').getElementsByTagName('SPAN').item(aThumb.index - 1).onclick();
          return;
        }
      } else {
        if(aThumb.index < Number(imgCounts[a.title][a.subnav.title]) - 1) {
          $('thumbs').getElementsByTagName('SPAN').item(aThumb.index + 1).onclick();
          return;
        }
      }
    }
  }
};

Behaviour.register(myrules);

function showThumb(link, imgPath) {
}

function noBubble(e) {
  if (!e) var e = window.event;
  e.cancelBubble = true;
  if (e.stopPropagation) e.stopPropagation();
}