var Ticker = new Class({
  setOptions: function(options) {
    this.options = Object.extend({
      speed: 1000,
      delay: 3000,
      direction: 'vertical',
      onComplete: Class.empty,
      onStart: Class.empty
    }, options || {});
  },
  initialize: function(el,options){
    this.setOptions(options);
    this.el = $(el);
	this.photo = $(document.getElementById("photo"));
    this.items = this.el.getElements('li');
    for( var i=0; i<this.items.length; i++ ){
      var clone = this.items[i].clone().inject(el,'bottom');
    }
    this.items2 = this.el.getElements('li');
    var w = 0;
    var h = 0;
    if(this.options.direction.toLowerCase()=='horizontal') {
      h = this.el.getSize().size.y;
        this.items.each(function(li,index) {
        w += li.getSize().size.x;
      });
    } else {
      w = this.el.getSize().size.x;
      this.items2.each(function(li,index) {
        h += li.getSize().size.y;
      });
    }
    var pos = this.items[0];
    this.el.setStyles({
      position: 'absolute',
      top: -pos.offsetTop,
      left: -pos.offsetLeft,
      width: w,
      height: h
    });
    this.fx = new Fx.Styles(this.el,{duration:this.options.speed,onComplete:function() {
    	var pos = this.items[this.current];
        this.el.setStyles({
         top: -pos.offsetTop,
         left: -pos.offsetLeft
        });
        showimg(this.current+1);
    }.bind(this)});
    this.fx2 = new Fx.Styles(this.el,{duration:this.options.speed*2,onComplete:function() {
    	var pos = this.items[this.current];
        this.el.setStyles({
         top: -pos.offsetTop,
         left: -pos.offsetLeft
        });
      showimg(this.current+1);
    }.bind(this)});
    this.fxout = new Fx.Styles(this.photo,
     {
        duration:this.options.speed,
        onComplete:function() {
          this.photo.setStyles({opacity: 0});
          this.show();
      }.bind(this)}
    );
    this.fxin = new Fx.Styles(this.photo,
     {
        duration:this.options.speed,
        onComplete:function() {
          this.photo.setStyles({opacity: 100});
        }.bind(this)
      }
    );
    this.current = 0;
    mytimer = this.next.bind(this).delay(this.options.delay+this.options.speed);
  },
   
  pause: function() {
      $clear(mytimer);
      mytimer = null;
  },
  resume: function() {
      if (mytimer == null) {
      this.next();
      }
  },
  next: function() {
	this.from = this.current;
    this.current++;
    if (this.current >= this.items.length) this.current = 0;
	var pos = this.current < this.from ? this.items2[this.current+this.items.length] : this.items2[this.current];
    this.fx.start({
      top: -pos.offsetTop,
      left: -pos.offsetLeft
    });
    mytimer = this.next.bind(this).delay(this.options.delay+this.options.speed);
//    this.hide(this.current);
  },
  setPosition: function(i){
    if( i > this.items.length ){
      return;
    }
	this.fx.stop();
    $clear(mytimer);
    mytimer = null;
	this.from = this.current;
    this.current = i-1;
	var pos = this.current < this.from ? this.items2[this.current+this.items.length] : this.items2[this.current];
    this.fx2.start({
      top: -pos.offsetTop,
      left: -pos.offsetLeft
    });
    mytimer = this.next.bind(this).delay(this.options.delay+this.options.speed*2);    
//    this.hide(this.current);
  },
  forceNext: function(){
	this.fx.stop();
    $clear(mytimer);
    mytimer = null;
    this.next();
  },
  forcePrev: function(){
	this.fx.stop();
    $clear(mytimer);
    mytimer = null;
	this.from = this.current;
    this.current--;
    if (this.current < 0 ){
      var pos = this.items2[this.items.length];
      this.el.setStyles({
         top: -pos.offsetTop,
         left: -pos.offsetLeft
      });
      this.current = this.items.length - 1;
	  var pos = this.items2[this.current];
      this.fx.start({
          top: -pos.offsetTop,
          left: -pos.offsetLeft
      });
    }else{
	  var pos = this.items2[this.current];
      this.fx.start({
          top: -pos.offsetTop,
          left: -pos.offsetLeft
       });
    }
    mytimer = this.next.bind(this).delay(this.options.delay+this.options.speed);
//    this.hide(this.current);
  },
  hide: function(i){
    this.fxout.start({opacity: 0});
  },
  show: function(){
    var src;
    switch(this.current){
    case 0:
      src = "imges/home/anim/image01.jpg";
      document.getElementById("anc").href = "service/studentMarke.html";
      break;
  case 1:
    src = "imges/home/anim/image02.jpg";
    document.getElementById("anc").href = "service/internetConsul.html";
    break;
  case 2:
    src = "imges/home/anim/image03.jpg";
    document.getElementById("anc").href = "service/internetMedia.html";
    break;
  case 3:
    src = "imges/home/anim/image04.jpg";
    document.getElementById("anc").href = "service/socialMedia.html";
    break;
  case 4: 
    src = "imges/home/anim/image05.jpg";
    document.getElementById("anc").href = "http://givery.co.jp/recruit/index.html";
    break;
      default:  
    }
	this.photo.src = src;
    this.fxin.start({opacity: 100});
  }
});
 
var mytimer = null;
 

window.addEvent('domready', function() {
  var hor = new Ticker('navi', {
    speed : 500, delay : 4000, direction : 'vertical'
  });
//  $('stop_scroll').addEvent('click', function() {
//    $('play_scroll_cont').style.display='block';
//    $('stop_scroll_cont').style.display='none';
//    hor.pause();
//  });
//  $('play_scroll').addEvent('click', function() {
//    $('stop_scroll_cont').style.display='block';
//    $('play_scroll_cont').style.display='none';
//    hor.resume();
//  });
  window.ticker = hor;
});