/*
*/

var horizontalScroller = Class.create();
horizontalScroller.prototype = {
  initialize: function()
  {
    //!- initialize parameters
    this.currentMousePos = {x:0, y:0};
    this.bw = $('wr').getWidth();
    var _ow = 0;
    $('scrollmenu').getElementsBySelector('li').each(
      function(el){_ow += el.getWidth();}
    );
    _ow = $('scrollmenu').getWidth();
    this.ow = _ow;
    this.wd = this.getWindowSize();

    this.offset = ($('shadeL') == null) ? ((this.wd.w - this.bw) / 2) : $('shadeL').getWidth();

    this.leftEdge = ((_ow - parseFloat($('scrolltarget').getElementsBySelector('li')[0].getStyle('padding-right')) * 2) * -1) + this.bw;
    this.rightEdge = parseFloat($('scrollmenu').getStyle('left'));

    this.dir = -1;
    this.easeStep = 0;
    this.easingCount = 60;
    this.gainBase = 30;

    if(window.console){
      console.log([this.bw, this.ow, this.wd, this.offset, this.leftEdge, this.rightEdge]);
    }
  },

  onTickHandler: function(e){
    e.stop();

    var curPos = parseFloat($('scrollmenu').getStyle('left'));
    var dist = 1;

    if(this.dir < 0){ //!- case move to left
      if(curPos < 0){
        var _dist = Math.abs(this.leftEdge - curPos);
        if(_dist < 200){
          var dig = (_dist / 200) * 90;
          dist = Math.sin(Math.PI * dig / 180);
        }
      }
    }else if(this.dir > 0){ //!- case move to right
      var _dist = Math.abs(this.rightEdge - curPos);
      if(_dist < 200){
        var dig = (_dist / 200) * 90;
        dist = Math.sin(Math.PI * dig / 180);
      }
    }

    //!- easeing in stopping
    if(this.easeStep != -1){
      this.easeStep -= 1;
      var dig = (this.easeStep / this.easingCount) * 90;
      dist = Math.abs(Math.pow(Math.sin(Math.PI * dig / 180), 4));
      if(this.easeStep == 0){
        this.easeStep = -1;
        this.dir = 0;
        document.fire('sc:stop');
      }
    }

    curPos += (this.dir * dist);
    if(curPos >= this.leftEdge && curPos <= this.rightEdge){
      $('scrollmenu').setStyle({left: curPos + 'px'});
    }else{
      if(curPos < this.leftEdge){
        $('scrollmenu').setStyle({left: this.leftEdge + 'px'});
      }
      if(curPos > this.rightEdge){
        $('scrollmenu').setStyle({left: this.rightEdge + 'px'});
      }
    }

  },

  onMouseOverHandler: function(e){
    e.stop();

    var gain = 0;

    this.currentMousePos = e.pointer();
    if(e.target.id == 'shadeL'){
      this.easeStep = -1;
      gain = this.gainBase * (this.offset - e.pointer().x) / this.offset;
      gain = gain < 1 ? 1 : gain; //!- minimum is 1
      this.dir = 1 * gain;
    }
    if(e.target.id == 'shadeR'){
      this.easeStep = -1;
      gain = this.gainBase * ((e.pointer().x - (this.wd.w - this.offset)) / this.offset);
      gain = gain < 1 ? 1 : gain; //!- minimum is 1
      this.dir = -1 * gain;
    }

    //!- fix range
    if(this.rightEdge != 0 && this.dir != 0){
      this.rightEdge = 0;
    }
  },


  onResizeHandler: function(e){
    e.stop();

    this.wd = this.getWindowSize();
    this.offset = (this.wd.w - this.bw) / 2;
    this.offset = this.offset < 80 ? 80 : this.offset;
  },

  getWindowSize: function()
  {
	function getWindowWidth(){
      // Mozilla, Opera, NN4
	  if(window.innerWidth) return window.innerWidth;
       //IE
	  if(document.documentElement && document.documentElement.clientWidth){
		return document.documentElement.clientWidth;
	  }else if(document.body && document.body.clientWidth){
		return document.body.clientWidth;
	  }
	  return 0;
	};
	function getWindowHeight(){
      // Mozilla, Opera, NN4
	  if(window.innerHeight) return window.innerHeight;
      // IE
	  if(document.documentElement && document.documentElement.clientHeight){
		return document.documentElement.clientHeight;
	  }else if(document.body && document.body.clientHeight){
		return document.body.clientHeight;
	  }
	  return 0;
	};
	return {w: getWindowWidth(), h: getWindowHeight()};
  }

};


//!- global vars
var hs, pd = null, dur = 1 / 30;

//!- trigger to start scroll

document.observe('sc:stop',
  function(e)
  {
    if(pd != null){
      pd.stop();
      pd = null;
    }
  }
);

document.observe('sc:start',
  function(e)
  {
    hs = new horizontalScroller();
    Event.observe(window, 'resize', hs.onResizeHandler.bind(hs));
    document.observe('tick:update', hs.onTickHandler.bind(hs));

    //!- dummy initialize
    hs.dir = -1;
    $('shadeL').observe('mousemove', hs.onMouseOverHandler.bind(hs));
    $('shadeR').observe('mousemove', hs.onMouseOverHandler.bind(hs));
    pd = new PeriodicalExecuter(function(e){document.fire('tick:update');}, dur);
    //--

    //!- left
    $('shadeL').observe('mouseover',
      function(e){
        $('shadeL').stopObserving('mousemove'); // !- reset
        $('shadeL').observe('mousemove', hs.onMouseOverHandler.bind(hs));
        if(pd == null){
          pd = new PeriodicalExecuter(function(e){document.fire('tick:update');}, dur);
        }
      }
    );
    $('shadeL').observe('mouseout',
      function(e){
        $('shadeL').stopObserving('mousemove');
        hs.easeStep = hs.dir != 0 ? hs.easingCount : -1;
      }
    );

    //!- right
    $('shadeR').observe('mouseover',
      function(e){
        $('shadeR').stopObserving('mousemove'); // !- reset
        $('shadeR').observe('mousemove', hs.onMouseOverHandler.bind(hs));
        if(pd == null){
          pd = new PeriodicalExecuter(function(e){document.fire('tick:update');}, dur);
        }
      }
    );
    $('shadeR').observe('mouseout',
      function(e){
        $('shadeR').stopObserving('mousemove');
        hs.easeStep = hs.dir != 0 ? hs.easingCount : -1;
      }
    );
    //pd = new PeriodicalExecuter(function(e){document.fire('tick:update');}, 1);
  }
);


//!- setup on DOM tree builded
// document.observe('load',
//   function(e)
//   {
//     hs = new horizontalScroller();
//     Event.observe(window, 'resize', hs.onResizeHandler.bind(hs));
//     wdt = new PeriodicalExecuter(
//       function(e)
//       {
//         if(parseFloat($('scrollmenu').getStyle('left')) < 0){
//           document.fire('sc:start');
//           this.stop();
//         }
//       }, 1 / 10
//     );
//   }
// );