// tinygallery.js v0.1
//
// Copyright (c) 2010 YUM GmbH
// Author: Martin Pradella | http://www.yum.de
// 
//

/*-----------------------------------------------------------------------------------------------*/

if (typeof Effect == 'undefined') 
  throw("tinygallery.js requires including script.aculo.us' effects.js library!");

var tinygallery = Class.create();
tinygallery.prototype = {

  duration : null,
  wrapper_class : null,
  gallery_class : null,
  lslider_class : null,
  rslider_class : null,
  islider_class : null,
  
  interactive: false,
  //  
  //  Initialize the tinygallery
  //
  initialize: function(container, options) {
    if (!$(container)) {
      throw(container+" doesn't exist!");
      return false;
    }
    
    // enhance prototype.js browser recognition - distinguish IE versions
    Object.extend(Prototype.Browser, {
        IE6: Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 6,
        IE7: Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 7,
        IE8: Prototype.Browser.IE && !Prototype.Browser.IE6 && !Prototype.Browser.IE7
    });
    
    this.options = Object.extend({
      slideSpeed : 0.2,
      list_element: 'li',
      classNames : {
        wrapper :           'gallery_wrapper',
        album :             'gallery_album',
        left_slider :       'left_slider',
        right_slider :      'right_slider',
        inactive_slider :   'inactive'
      }
    }, options || {});
    
    this.duration       = this.options.slideSpeed;
    this.wrapper_class  = this.options.classNames.wrapper;
    this.album_class    = this.options.classNames.album;
    this.lslider_class  = this.options.classNames.left_slider;
    this.rslider_class  = this.options.classNames.right_slider;
    this.islider_class  = this.options.classNames.inactive_slider;

    var galleries = $$('#'+container+' .'+this.options.classNames.wrapper);
    
    galleries.each(function(element) {
      element.cleanWhitespace();
      element.innerWidth = 0;
      
      element.getElementsBySelector('.' + this.album_class).first().setStyle('white-space: nowrap;');

      var first_li = element.getElementsBySelector(this.options.list_element).first();
      element.stepWidth = first_li.getWidth() + parseInt(first_li.getStyle('margin-right')) + parseInt(first_li.getStyle('margin-left'));
      
      element.getElementsBySelector(this.options.list_element).each(function(childelement) {
        this.innerWidth += childelement.getWidth();
        this.innerWidth += parseInt(childelement.getStyle('margin-right'));
        this.innerWidth += parseInt(childelement.getStyle('margin-left'));
      }.bind(element));
  
      if (Prototype.Browser.IE6 || Prototype.Browser.IE7) {
        element.getElementsBySelector('.' + this.album_class).first().setStyle('padding-left:' + parseInt(first_li.getStyle('margin-left')) + 'px;');
        element.innerWidth = element.innerWidth - parseInt(first_li.getStyle('margin-left'));
      }
      
      if (element.getWidth() < element.innerWidth) {
        $(element.parentNode).setStyle('position:relative;');
        element.setStyle('position:relative;overflow:hidden;');
        
        this.eventSlideLeft   = this.slideleft.bindAsEventListener(this); 
        var leftslider = new Element('a', {href: '#', title:'Nach links scrollen'}).addClassName('left_slider');
        element.insert({before: leftslider.observe("click", this.eventSlideLeft)});
        
        this.eventSlideRight  = this.slideright.bindAsEventListener(this);
        var rightslider = new Element('a', {href: '#', title:'Nach rechts scrollen'}).addClassName('right_slider');
        element.insert({before: rightslider.observe("click", this.eventSlideRight)});
        
        this.switchSliderState($(element.parentNode).getElementsBySelector('.' + this.lslider_class).first(), this.islider_class);
        
      }
    }.bind(this));
    
    this.interactive = true; 
  },
  
  //
  //  slide the gallery to left
  //
  slideleft: function(event) {
    if (this.interactive) {
      var wrapper = $(event.findElement().parentNode).getElementsBySelector('.' + this.wrapper_class).first();
      var list = wrapper.getElementsBySelector('.' + this.album_class).first();
      var current_pos = list.positionedOffset();
    
      if (current_pos[0] + wrapper.stepWidth < 0) {
        this.interactive = false;
        new Effect.Move(list, { x: current_pos[0] + wrapper.stepWidth, y: 0, mode: 'absolute', duration: this.duration,
          afterFinish : function() {
            this.interactive = true;
          }.bind(this)});
        this.switchSliderState($(wrapper.parentNode).getElementsBySelector('.' + this.rslider_class).first(), 'active');
      } else if (current_pos[0] + wrapper.stepWidth == 0) {
        this.interactive = false;
        new Effect.Move(list, { x: current_pos[0] + wrapper.stepWidth, y: 0, mode: 'absolute', duration: this.duration,
          afterFinish : function() {
            this.interactive = true;
          }.bind(this)});
        this.switchSliderState($(wrapper.parentNode).getElementsBySelector('.' + this.lslider_class).first(), 'inactive');
        this.switchSliderState($(wrapper.parentNode).getElementsBySelector('.' + this.rslider_class).first(), 'active');
      }
    }
    event.stop();
  },
  //
  //  slide the gallery to right
  //
  slideright: function(event) {
    if (this.interactive) {
      var wrapper = $(event.findElement().parentNode).getElementsBySelector('.' + this.wrapper_class).first();
      var list = wrapper.getElementsBySelector('.' + this.album_class).first();
      var current_pos = list.positionedOffset();
      var min_left = wrapper.getWidth() - wrapper.innerWidth;

      if (current_pos[0] - wrapper.stepWidth > min_left) {
        this.interactive = false;
        new Effect.Move(list, { x: current_pos[0] - wrapper.stepWidth, y: 0, mode: 'absolute', duration: this.duration,
          afterFinish : function() {
            this.interactive = true;
          }.bind(this)});
        this.switchSliderState($(wrapper.parentNode).getElementsBySelector('.' + this.lslider_class).first(), 'active');
      } else if (current_pos[0] - wrapper.stepWidth == min_left) {
        this.interactive = false;
        new Effect.Move(list, { x: current_pos[0] - wrapper.stepWidth, y: 0, mode: 'absolute', duration: this.duration,
          afterFinish : function() {
            this.interactive = true;
          }.bind(this)});
        this.switchSliderState($(wrapper.parentNode).getElementsBySelector('.' + this.lslider_class).first(), 'active');
        this.switchSliderState($(wrapper.parentNode).getElementsBySelector('.' + this.rslider_class).first(), 'inactive');
      }
    }
    event.stop();
  },
  
  switchSliderState : function(element, state) {
    switch (state) {
      case 'active':
        element.removeClassName(this.islider_class);
      break;
      case 'inactive':
        element.addClassName(this.islider_class);
      break;
    }
  }
}