/*

Script: Showcase.js
  Showcase - A mootools based image gallery

Version: 0.4

License:
  Creative Commons Attribution 3.0 License. 
  To view a copy of this license, visit http://creativecommons.org/licenses/by/3.0/us/

Showcase Copyright:
  copyright (c) 2008 Corey Wilson, <http://2catdesigns.com>
  
*/

var Showcase = new Class({

  pane_current : 0,

  initialize: function() {

    //this.pane_count = $$('ul.menu-sportsmenu li').length - 1;
    //this.pane_width = $$('ul.menu-sportsmenu li')[0].getStyle('width').toInt();
		if(BrowserDetect.browser == 'Explorer' && BrowserDetect.version == 7){
    	this.pane_width = 400;
		} else {
			this.pane_width = 408;
		}
				
		// either way the button on the left should be disabled to start
		// set the width of the container to be appropriate to the number of panels
		if($$('ul.menu-imagelinks li').length < 4){
			this.pane_count = 1;
		} else {
		  //this.pane_count = $$('ul.menu-sportsmenu li').length / 4;
			this.pane_count = $$('ul.menu-imagelinks li').length / 4;
			if((this.pane_count % 4) > 0){
				this.pane_count = Math.floor(this.pane_count) + 1;
			}
		}
		// do we have the expected number of panes?
		//console.log('this.pane_count is: ' + this.pane_count);
		
		$E('ul.menu-imagelinks').setStyles({'width' : this.pane_width * this.pane_count});
		
    ['image_links_prev', 'image_links_next'].each(function(button) {
      this.init_button(button);
    },this);

    $('image_links_prev').addEvent('click', this.move.pass(-1, this));
    $('image_links_next').addEvent('click', this.move.pass(1, this));
    
    //$('image_links_prev').hide();
		
    //this.slide = new Fx.Tween('image_links_window', {
    this.slide = new Fx.Tween($E('ul.menu-imagelinks'), {
      duration:800, 
      link:'ignore', 
      transition: Fx.Transitions.Cubic.easeOut
    });
		
    this.fade = new Fx.Tween
  },

  move: function(direction) {
		//console.log('moving: this.pane_current: ' + this.pane_current + ', direction: ' + direction);
    this.move_to(this.pane_current + direction);
  },

  move_to: function(pane_index) {
		//console.log('pane_index: ' + pane_index);
		//console.log('pane_width: ' + this.pane_width);
		//console.log('value: ' + pane_index * this.pane_width * -1);
		
    this.slide.start('left', pane_index * this.pane_width * -1);

    this.pane_current = pane_index;

    if (pane_index == 0) { 
      $('image_links_prev').hide();
			//alert('page index is 0');
      $('image_links_next').show();
    } else if (pane_index == (this.pane_count-1)) {
			//console.log('page index and count are the same...');
      $('image_links_prev').show();
      $('image_links_next').hide();
    } else {
      $('image_links_prev').show();
      $('image_links_next').show();
    }
  },

  init_button: function(button) {
    $(button).setOpacity(0.4);
    $(button).onmouseover = this.toggle_button.pass([button, 0.9], this);
    $(button).onmouseout = this.toggle_button.pass([button, 0.4], this);
		// we're at the start and can't go back, so hide the previous button
		$('image_links_prev').hide();
  },

  toggle_button: function(id, value) {
    this.fade = new Fx.Tween($(id), { duration: 250, link: 'ignore' }).start('opacity', value);
  }

});

Element.implement({
  hide: function(){
    this.setStyle("display", "none");
  },
  show: function(){
    this.setStyle("display", "block");
  }
});