var myMenu = new UvumiDropdown('menu');
   
var Accents = new Class({
  Implements: [Options, Events],
  options: {
    thumbsPerPage : 6,
    exp           : 20
  },
  initialize:function(a,b){
    this.div = a;
    this.setOptions(b);
    window.addEvent('domready',this.domReady.bind(this))  
  },
  domReady:function(){
    this.div = $(this.div);
    this.div.setStyle('position', 'relative');
    this.tGalleries = this.div.getChildren('div');
    this.coord = this.div.getCoordinates();
    this.heights = [];
    this.galleries = [];
    this.galleries[0] = this.tGalleries[0];
    if (this.galleries[0].id == "section_0") {
      this.on = 0;
      this.heights[0] = 350; //this.galleries[0].getSize().y + 10;
      this.galleries[0].setStyles({
        'overflow':'hidden',
        'position':'relative',
        'top':'0px',
        'left':'0px',
        'width':'800px'
      });
      this.galleries[0].loaded = true;
    }
    this.tGalleries.each(function(gallery, k) {
      if (k!=0) { 
        gallery.setStyles({
          width: this.coord.width,
          display: 'none',
          // visibility: 'hidden',
          overflow:'hidden',
          // opacity: 0,
          position: 'relative'
          // height: 0
        });
        gallery.loaded = false;
        gallery.more = false;
        gallery.titleElem = gallery.getFirst('h3'); //.get('text');
        // this.galleries[k].getFirst('h3').dispose();
        gallery.links = [];
        gallery.thumbs = [];
        gallery.alt = [];
        var anchors = this.tGalleries[k].getChildren('a').dispose();
        gallery.nImages = anchors.length;
        anchors.each(function(anchor, i) {
          this.links[i] = anchor.getProperty('href');
          // var im = anchor.getFirst('img');
          // this.thumbs[i] = im.get('src');
          // this.alt[i] = im.get('alt');
          var link = anchor.getProperty('href');
          var temp = link.split('/');
          var newLink = "";
          for (var j=0; j<temp.length; j++) {
            if (!temp[j].match('jpg') && !temp[j].match('JPG') && !temp[j].match('Jpg')) {
              newLink = newLink + temp[j] + "/";
            } else {
              newLink = newLink + "thumb_" + temp[j];
              var valt = anchor.get('text')
            }
          }
          this.alt[i] = valt;
          this.thumbs[i] = newLink;
        }, gallery);
        var id = gallery.id;
        var t = id.split("_");
        var i = t[1];
        this.galleries[i] = gallery;
      }
    }, this);
  },
  toggle:function(a){
    this.newDivNum = a;
    if (a == this.on) {
      if (this.galleries[a].more) {
        this.load(a);
      } else {
        return;
      }
    }
    if (!this.galleries[a].loaded) {
      this.load(a);
    } else {
      this.animate(a);
    }
  },
  animate:function(){ 
    var a = this.newDivNum;
    // if (this.progresserBox) this.progresserBox.destroy();
    this.galleries[a].loaded = true;
    this.curDiv = $("section_"+this.on);
    var numSection = "section_" + a;
    var newDiv = $(numSection);
    //var divArray = $$([this.curDiv, newDiv]);
    var anim = new Fx.Elements($$([this.curDiv, newDiv]), {duration: 800, transition: Fx.Transitions.Quad.easeInOut, link:'chain'});
    newDiv.setStyles({
      display:'block',
      visibility:'visible',
      height:0,
      opacity:1
    });
    anim.start({
      '0' : {'height': 0}
    });
    anim.start({
      '1' : {'height':this.heights[a]}
    }); 
    anim.start({
      '0':{'display':'none'} //,
    });
    this.on = a;
  },
  load:function(a){
    if (this.galleries[a].thumbs.length != 0) {
      this.galleries[a].setStyles({
        display:'block',
        visibility:'hidden' //,
        // height:0
      });
      this.galleries[a].titleElem.setStyles({
        position: 'absolute',
        marginLeft: '0px',
        top: 0,
        left: 0,
        width: this.coord.width,
        margin: '0px auto'
      }); 
      this.galleries[a].titleHeight = this.galleries[a].titleElem.getSize().y; 
/*  This part was used for the progressor box so you knew how the loading was going
      this.progresserBox = new Element('div', {
        'class': 'progress-bar',
        'styles': {
          'position':'absolute',
          'width':this.coord.width/2,
          'left':this.coord.width/4,
          'top':this.galleries[a].titleHeight,
          'height':'40px'
        }
      }).inject(this.div);
      this.progresser = new Element('div',{
        'styles':{
          'height':'38px',
          'position':'absolute',
          'top':0,
          'left':0,
          'width':0,
          'margin':'1px',
          'background-color':this.progresserBox.getStyle('border-top-color')
        },
        'tween':{
          'link':'cancel',
          'duration':'short'
        }
      }).inject(this.progresserBox);
 */
      this.cellSize = ((this.coord.width - 120)/3).toInt();
      this.rTop = this.galleries[a].titleHeight + 20;
      // the if line alone was used when all pictures were loaded, now just load 6.
      if (this.galleries[a].nImages <= this.options.thumbsPerPage) this.heights[a] = this.rTop + Math.ceil(this.galleries[a].nImages/3)*(this.cellSize+40);
      else this.heights[a] = this.rTop + Math.ceil(this.options.thumbsPerPage/3)*(this.cellSize+40);
      this.galleries[a].subGallery = Array();
      this.galleries[a].loadThumbs = new Asset.images(this.galleries[a].thumbs, {
        onProgress:this.placeThumb.bind(this),
        onComplete:this.finishThumb.bind(this),
        onError:this.displayError.bind(this)
      });
    }
   // maybe put in height stuff here.
  },
  finishThumb:function() {
    var a = this.newDivNum;
    // if we have more than the allowable thumbs per page (currently 6) we need a link to get the
    // extra ones
    if (this.galleries[a].nImages > this.options.thumbsPerPage) {
      this.galleries[a].curPage = 0;
      this.galleries[a].pages = Math.ceil(this.galleries[a].nImages/this.options.thumbsPerPage);
      this.galleries[a].extraThumbs = new Element('div', {
        'class':'nav-bar',
        'styles':{
          'display':'block',
          position:'absolute',
          top: this.rTop + 2*(this.cellSize+40) - 30,
          left: 0,
          width:'100%'
        }
      }).inject(this.galleries[a]);
      var pageTitle = new Element('span', {
        'class': 'page-bar',
        'id': 'page'
      }).inject(this.galleries[a].extraThumbs).set('text', 'Pages');
      var linkClass = 'page-link';
      for (var i=0; i<this.galleries[a].pages; i++) {
        if (i==0) var s = new Element('span', { 'class':'page-active', 'id':a+'_page_'+i }).inject(this.galleries[a].extraThumbs).set('text', i+1);
        else var s = new Element('span', { 'class': linkClass, 'id': a+'_page_'+i, 'events': { 'click':this.jumpToPage.bindWithEvent(this) } }).inject(this.galleries[a].extraThumbs).set('text', i+1);
      }
      var prevPage = new Element('span', { 'class': 'page-prev', 'id':a+'_page-prev', 'events': { 'click':this.prePage.bindWithEvent(this) } }).inject(pageTitle, 'after').set('text','<');
      //this.galleries[a].extraThumbs.prevWidth = prevPage.getSize().x;
      prevPage.setStyle('visibility', 'hidden');
      var nextPage = new Element('span', { 'class': 'page-next', 'id':a+'_page-next', 'events': { 'click':this.nextPage.bindWithEvent(this) } }).inject(this.galleries[a].extraThumbs).set('text','>');
    }    
    //this.animate(a);
  },
  prePage:function(){
    var a = this.on;
    var curPage = this.galleries[a].curPage.toInt();
    if (curPage != 0) this.changePage(curPage - 1);
  },
  nextPage:function(){
    var a = this.on;
    var curPage = this.galleries[a].curPage.toInt();
    if ((curPage + 1) != this.galleries[a].pages) this.changePage(curPage + 1); 
  },
  jumpToPage:function(e){
    var targetId = $(e.target).id;
    var temp = targetId.split('_');
    var page = temp[2];
    this.changePage(page);
  },
  changePage:function(page) {
    var a = this.on;
    page = page.toInt();
    if (this.galleries[a].curPage!=page) {
      var oldPage = this.galleries[a].subGallery[this.galleries[a].curPage.toInt()];
      var newPage = this.galleries[a].subGallery[page.toInt()];
      var imSwap = new Fx.Elements($$([oldPage, newPage]), { duration: 800, transition: Fx.Transitions.linear, link:'chain'});
      imSwap.start({ '0' : {'opacity': '0'} });
      imSwap.start({ '1' : {'opacity': '1'} });

      // now we need to adjust the nav bar
      var curPageSpan = $(a+'_page_'+this.galleries[a].curPage);
      var newPageSpan = $(a+'_page_'+page);
      curPageSpan.toggleClass('page-active');
      curPageSpan.addClass('page-link');
      newPageSpan.toggleClass('page-link');
      newPageSpan.addClass('page-active');
      newPageSpan.removeEvent('click',this.jumpToPage);
      curPageSpan.addEvent('click',this.jumpToPage.bindWithEvent(this));
      if (this.galleries[a].curPage == 0) {
        var prevSpan = $(a+'_page-prev');
        prevSpan.setStyle('visibility','visible');
      } else if (page == 0) {
        prevSpan = $(a+'_page-prev');
        prevSpan.setStyle('visibility','hidden');
      }
      if ((page+1) == this.galleries[a].pages) {
        var nextSpan = $(a+'_page-next');
        nextSpan.setStyle('visibility','hidden');
      } else if (this.galleries[a].curPage + 1 == this.galleries[a].pages) {
        nextSpan = $(a+'_page-next');
        nextSpan.setStyle('visibility','visible');
      }

      // still need to add the link for the now page-link
      this.galleries[a].curPage = page;
      //
      //
      // then display pictures from new page
      //
      // then change the navigation bar at the bottom
    }
  },
  placeThumb:function(counter,index) {
    // currently I plan to locate all images but turn off ones that are greater than thumbsPerPage
    var a = this.newDivNum;
   // this.progresser.tween('width',((this.coord.width*counter)/(2*this.galleries[a].nImages)).toInt()+'px');
/*
    var linkToImage = new Element('a', {
      'href':this.galleries[a].links[index],
      'target':'_blank'
    }).inject(this.galleries[a]);
*/
    var image = this.galleries[a].loadThumbs[index];
    var page = Math.floor(index/6);
    if (index >= this.options.thumbsPerPage) var vis = '0';
    else vis = '1';
    if (!this.galleries[a].subGallery[page]) 
      this.galleries[a].subGallery[page] = new Element('div', {
        'id': 'div'+a+'_page_'+page,
        position:'relative',
        'opacity':vis
      }).inject(this.galleries[a]);
 
    //this.galleries[a].subGallery[page].push(image);
    var third = index%3;
    image.inject(this.galleries[a].subGallery[page]);
    var ar = image.getSize().x/image.getSize().y;
    if (ar > 1) {
      var iWidth = this.cellSize;
      var iHeight = (this.cellSize*(image.getSize().y/image.getSize().x)).toInt();
      var iTop = Math.floor((index%6)/3)*(this.cellSize + 40) + this.rTop + ((this.cellSize - iHeight)/2).toInt();
      var iLeft = 20 + third*(this.cellSize+40);
    } else {
      iHeight = this.cellSize;
      iWidth = (this.cellSize*(image.getSize().x/image.getSize().y)).toInt();
      iTop = this.rTop + Math.floor((index%6)/3)*(this.cellSize+40);
      iLeft = 20 + third*(this.cellSize + 40) + ((this.cellSize - iWidth)/2).toInt();
    }
    image.setStyles({
      //'visibility':'hidden',
      position: 'absolute',
      top: iTop,
      left: iLeft,
      width:iWidth,
      height:iHeight,
      'cursor':'pointer'
    });
    image.addEvents({
      'mouseenter':this.zoom.bindWithEvent(this),
      'mouseleave':this.unZoom.bindWithEvent(this),
      'click':this.expand.bindWithEvent(this)
    });
    image.set('alt', this.galleries[a].alt[index]);
    image.set('title', this.galleries[a].alt[index]);
    image.store('link',this.galleries[a].links[index]);
    image.store('top',iTop);
    image.store('left',iLeft);
    image.store('width',iWidth);
    image.store('height',iHeight);
    image.store('ar',ar);
    // image.store('absCoord',image.getCoordinates());
/*
    if (index >= this.options.thumbsPerPage) image.setStyle('opacity','0');
    else image.setStyle('opacity','1');
 */
    if (this.galleries[a].nImages > 6) {
      if (index ==  5) this.animate(a);
    } else {
      if ((index +1) == this.galleries[a].thumbs.length) this.animate(a);
    }
  },
  zoom:function(e){
    if (!this.doNotZoom) {
      var im = $(e.target);
      var ar = im.retrieve('ar');
      // this.exp = 20; // how many pixels to expand it.
      if (ar > 1) {
        im.morph({
          'width': im.retrieve('width')+this.options.exp,
          'height': ((im.retrieve('width')+this.options.exp)/ar).toInt(),
          'top': (im.retrieve('top') - (this.options.exp/2/2)).toInt(),
          'left': (im.retrieve('left') - (this.options.exp/2/2)).toInt()
        });
      } else {
        im.morph({
          'width': ((im.retrieve('height')+this.options.exp)*ar).toInt(),
          'height': (im.retrieve('height')+this.options.exp).toInt(),
          'top': (im.retrieve('top') - (this.options.exp/2/2)).toInt(),
          'left': (im.retrieve('left') - (this.options.exp/2/2)).toInt()
        });
      }
    }
  },
  unZoom:function(e){
    if (!this.doNotUnZoom) {
      var im = $(e.target);
      im.morph({
        'width':im.retrieve('width'),
        'height':im.retrieve('height'),
        'top':im.retrieve('top'),
        'left':im.retrieve('left')
      });
    }
  },
  expand:function(e){
    this.doNotUnZoom = this.doNotZoom = 1;
    this.smallPic = $(e.target);
    var coord = this.smallPic.getCoordinates();
    var link = this.smallPic.retrieve('link');
    this.smallPic.store('parent',this.smallPic.getParent());

    this.windowSize = $$('body')[0].getSize();
    var ar = this.smallPic.retrieve('ar');
    this.smallPic.inject(document.body);
    this.smallPic.setStyles({left:coord.left, top:coord.top});
    if (!Browser.Engine.trident) 
      $('all').tween('opacity','0.2');
    this.imageContainer = new Element('div', {
      'id':'imageContainer',
      'styles':{
        'display':'block',
        'position':'absolute',
        'top':0,
        'left':0,
        'width':this.windowSize.x,
        'height':this.windowSize.y,
        zIndex:101        
      }
    }).inject(document.body);
    this.ajaxLoader = new Asset.image('/images/ajax_loading.gif').injectInside(this.imageContainer).setStyles({'position':'absolute','margin':'auto','top':this.windowSize.y/2});
    this.bigPic = new Asset.image(link, { 
      onload     : this.morphBigPic.bind(this) 
    }).setStyles({
      'position': 'absolute',
      'display' : 'none',
      'height'  : coord.height,
      'width'   : coord.width,
      'top'     : coord.top,
      'left'    : coord.left
    }).injectInside(this.imageContainer);
  },
  morphBigPic:function(){
    this.ajaxLoader.destroy();
    this.bigPic.setStyle('display','block');
    var ar = this.smallPic.retrieve('ar');
    if (ar > 1) {
      var w = 800;
      var h = (800/ar).toInt();
    } else {
      h = 600;
      w = 600*ar;
    }
    var t = (this.windowSize.y - h)/2;
    var l = (this.windowSize.x - w)/2;
    var title = new Element('div', {
      'id':'imageTitle',
      'styles':{
        //'padding':'5px',
        'position':'absolute',
        'background':'white',
        'opacity':0,
        //'top':t,
        'bottom':t+h,
        'left':l,
        'width':w,
        //'z-index':0,
        overflow:'hidden',
        'text-align':'left'
      }
/*      'events':{
        'mouseenter':function(e){
          var el = $(e.target);
          el.tween('opacity','1');
        },
        'mouseleave':function(e){
          var el = $(e.target);
          el.tween('opacity','0.5');
        }
      } */
    }).inject(this.bigPic.getParent());
    var a = new Element('a', {
      'href':this.smallPic.retrieve('link'),
      'target':'_blank',
      'text':this.smallPic.get('alt'),
      'styles':{
        'position':'relative',
        'left':'0px',
        'text-decoration':'none',
        'text-align':'left',
        'color':'black'
      }
    }).inject(title);
    var close = new Element('div', {
      'id':'closeBox',
      'styles':{
        //'padding':'5px',
        'position':'absolute',
        'background':'black',
        'color':'white',
        'opacity':0,
        'top':t,
        'right':l,
        //'z-index': 0,
        overflow:'hidden',
        cursor:'pointer',
        'text-align':'right'
      },
      'events': {
        'click':this.closeImage.bindWithEvent(this)/*,
        'mouseenter':function(e){
          var el = $(e.target);
          el.tween('opacity','1');
        },
        'mouseleave':function(e){
          var el = $(e.target);
          el.tween('opacity','0.5');
        }*/
      }
    }).inject(this.bigPic.getParent()).set('text','Close');
//    var tWid = title.getSize().x;
//    if (tWid > (w/2)) { 
//      title.setStyle('width', (w/2).toInt());
    var cHeight = close.getSize().y;
    var tHeight = title.getSize().y;
//    } else tHeight = cHeight = title.getSize().y;
    title.setStyles({
      'opacity':1,
      'height' :0
    });
    close.setStyles({
      'opacity':1,
      'height' :0
    });
    var anim = new Fx.Elements($$([this.bigPic,title,close]),{link:'chain'});
    anim.start({
      '0':{
        'width'  : w,
        'height' : h,
        'top'    : t,
        'left'   : l
      }
    });
    anim.start({
      '1':{ 'height':tHeight },
      '2':{ 'height':cHeight }
    });
  },
  closeImage:function(){
    this.imageContainer.fade();
    this.imageContainer.destroy();
    this.smallPic.inject(this.smallPic.retrieve('parent'));
    this.smallPic.setStyles({
    });
    this.smallPic.setStyles({
      width  : this.smallPic.retrieve('width'),
      height : this.smallPic.retrieve('height'),
      top    : this.smallPic.retrieve('top'),
      left   : this.smallPic.retrieve('left')
    });
    $('all').tween('opacity',1);
    this.doNotUnZoom = this.doNotZoom = 0;
  },
  displayError:function(counter, i) {
    var a = this.newDivNum;
    var errorText = "image"+counter+"could not load";
    var errorBox = new Element('div').set('text', errorText);
    errorBox.setStyles({
      position: 'absolute',
      top: this.iTop,
      left: this.iLeft,
      zIndex: 99,
      opacity: 0.5
    }).inject(this.galleries[a]);

  },
  getCoords:function(obj) {
    var curleft = curtop = curWidth = curHeight = 0;
    curWidth = obj.offsetWidth;
    curHeight = obj.offsetHeight;
    if (obj.offsetParent) {
      do {
        curleft += obj.offsetLeft;
        curtop += obj.offsetTop;
      } while (obj = obj.offsetParent);
      return {'left':curleft,'top':curtop,'width':offsetWidth,'height':offsetWidth};
    }
  }
})

var myAccents = new Accents('center');