var contract1 = ['', '', '', ''];
var contract2 = ['', '', '', ''];
var Carousel = new Class({
  container: null,
  ti: 0,
  i: null,
  fx: null,
  ci: 0,
  li: null,
  
  options: {
    opacity: 0.5,
    width: 100,
    spacing: 6,
    duration: 200,
    transition: Fx.Transitions.linear
  },

  Implements: [Options],

  initialize: function (container, options) {
    this.setOptions(options);
    //this.container = document.id(container);
    this.container = container;
    // 100px + padding (2+2 = 4px) + margin-right (2px)
    this.i = this.options.width + this.options.spacing;
    this.fx = new Fx.Tween(this.container, {
      property: 'margin-left',
      duration: this.options.duration,
      transition: this.options.transition,
      wait: true
    });
  },
  
  setup1: function () {
    var list = $(this.container + 'd').getElements('li');
    list.each(function(item, index) {
      item.addEvent('click', function(e) {
        e.stop();
        if (index != this.ci) {
          var ci = $(this.container + '_' + this.ci);
          var li = $(this.container + '_' + this.li);
          var ni = $(this.container + '_' + index);       
          item.addClass('current');
          list[this.ci].removeClass('current');
          if (li) {li.inject(ci, 'after');}
          ni.inject(ci, 'after');
          this.fx.set('margin-left', 0);
          this.fx.start(-1*this.i);
          this.li = this.ci;
          this.ci = index;
        }
      }.bindWithEvent(this));
    }, this);
  },
  
  setup2: function () {
    var list = $(this.container).getElements('li');
    list.each(function(item, index) {
      if (index == 1) {
      //#fffbc5 #f8f2c3 #c4e4ef
        item.morph({'background-color': '#d3e88c'});
      } else {
        //item.fade(this.options.opacity);
      }
      //mouseenter/mouseleave
      item.addEvent('mouseenter', function(e) {
          var k = 1-(this.ti/this.i);
          if (k != index) {
            item.highlight('#d3e88c');
            //item.set('opacity', 1);
            //item.fade(1);
            item.addClass('hand');
            //item.set('background-color', '#d3e88c');
          }
      }.bindWithEvent(this));
      item.addEvent('mouseleave', function(e) {
          var k = 1-(this.ti/this.i);
          if (k != index) {
            //item.fade(this.options.opacity);
            item.highlight('#f6f6f6');
            //item.set('opacity', this.options.opacity);
            //item.set('background-color', '#f6f6f6');
          }
          item.removeClass('hand');
      }.bindWithEvent(this));
      
      item.addEvent('click', function(e) {
        var k = 1-(this.ti/this.i);
        this.ti = (1-index)*this.i;
        this.fx.start(this.ti);
        item.morph({'background-color': '#d3e88c'});
        item.fade('in');
        if (k != index) {
          //list[k].fade(this.options.opacity);
          list[k].morph({'background-color': '#f6f6f6'});
          var d = $(this.container + 'd'),
          list2 = d.getElements('li'),
          list3 = d.getElement('li.open');
          list2[index].set('class', 'open');
          list3.set('class', 'closed');
          if (['myList1', 'myList2', 'myList3', 'myList4'].contains(this.container)) {
            var j = this.container.substr(-1);
            var f = $('hp_carepack_form1');
            contract1[j.toInt()-1] = list2[index].get('text');
            f.contract.value = contract1.join(' ### ');
          } else if (['myList5', 'myList6', 'myList7', 'myList8'].contains(this.container)) {
            var j = this.container.substr(-1);
            var f = $('hp_carepack_form2');
            contract2[j.toInt()-5] = list2[index].get('text');
            f.contract.value = contract2.join(' ### ');
          }
        }
      }.bindWithEvent(this));
    }, this);
  }
});

window.addEvent('keydown', function(e) {if (e.key == "enter") {return false;}});

window.addEvent("domready", function() {
  var c = new Carousel("mainList", {width: 700, duration: 300, spacing: 0});
	c.setup1();
	var c1 = new Carousel("myList1", {width: 100});
	c1.setup2();
	var c2 = new Carousel("myList2", {width: 100});
	c2.setup2();
	var c3 = new Carousel("myList3", {width: 100});
	c3.setup2();
	var c4 = new Carousel("myList4", {width: 100});
	c4.setup2();
	
  var c5 = new Carousel("myList5", {width: 100});
	c5.setup2();
	var c6 = new Carousel("myList6", {width: 100});
	c6.setup2();
	var c7 = new Carousel("myList7", {width: 100});
	c7.setup2();
	var c8 = new Carousel("myList8", {width: 100});
	c8.setup2();
	
	$('m1').addEvents({
	'mouseenter': function(e) {this.toggleClass('hll');},
	'mouseleave': function(e) {this.toggleClass('hll');}
  });
  $('m2').addEvents({
    'mouseenter': function(e) {this.toggleClass('hll');},
    'mouseleave': function(e) {this.toggleClass('hll');}
  });
  $('m3').addEvents({
    'mouseenter': function(e) {this.toggleClass('hll');},
    'mouseleave': function(e) {this.toggleClass('hll');}
  });
  $('m4').addEvents({
    'mouseenter': function(e) {this.toggleClass('hll');},
    'mouseleave': function(e) {this.toggleClass('hll');}
  });
  var mfx1 = new Fx.Tween("matrix1", {
      property: 'margin-left',
      duration: 200,
      transition: Fx.Transitions.linear,
      wait: true
  });
  var mfx2 = new Fx.Tween("matrix2", {
      property: 'margin-left',
      duration: 200,
      transition: Fx.Transitions.linear,
      wait: true
  });
  $('but1').addEvent('click', function(e) {
    e.stop();
    $('hp_tab2').removeClass('closed');
    $('hp_tab1').set('class', 'closed');
    mfx1.start(-326);
  });
  $('but2').addEvent('click', function(e) {
    e.stop();
    $('hp_tab1').removeClass('closed');
    $('hp_tab2').set('class', 'closed');
    mfx1.start(0);
  });
  $('but3').addEvent('click', function(e) {
    e.stop();
    $('hp_tab4').removeClass('closed');
    $('hp_tab3').set('class', 'closed');
    mfx2.start(-326);
  });
  $('but4').addEvent('click', function(e) {
    e.stop();
    $('hp_tab3').removeClass('closed');
    $('hp_tab4').set('class', 'closed');
    mfx2.start(0);
  });

  var cp = $('contract_picker').getElements('li');
  cp.each(function(item, index) {
    item.addEvent('click', function(e) {
      e.stop();
      var cp_curr = $('contract_picker').getElement('li.hll2');
      cp_curr.removeClass('hll2');
      item.addClass('hll2');
      var f = $('hp_carepack_form3'),
      d = $("myList9d"),
      dlist = d.getElements('li'),
      dlist2 = d.getElement('li.open');
      dlist2.set('class', 'closed');
      dlist[index].set('class', 'open');
      f.contract.value = dlist[index].get('text');
    });
  });
});