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

  item_width: 180,
  effect_duration: 0.3,
  move_n_items: 1,
  max_n_display: 3,

  initialize: function(element, title, json) {
    this.json = json;
    this.element = $(element);
    this.element.addClassName('carousel-widget');
    this.title = title;
    this.x_offset = 0;

    this.create_html();
  },

  create_html: function() {
    this.left_button = $(Builder.node('a', {className: 'left-button'} ));
    Event.observe( this.left_button, 'click', this.click_left.bindAsEventListener(this) );
    Event.observe( this.left_button, 'mouseover', function () { 
      this.left_button.addClassName('left-button-over');
    }.bind(this) );
    Event.observe( this.left_button, 'mouseout', function () { 
      this.left_button.removeClassName('left-button-over');
    }.bind(this) );

    this.container = $(Builder.node('div', {className: 'carousel-content'}));
    this.item_container = $(Builder.node('div', {className: 'carousel-item-container'}));

    this.right_button = $(Builder.node('a', {className: 'right-button'} ));
    Event.observe( this.right_button, 'click', this.click_right.bindAsEventListener(this) );
    Event.observe( this.right_button, 'mouseover', function () { 
      this.right_button.addClassName('right-button-over');
    }.bind(this) );
    Event.observe( this.right_button, 'mouseout', function () { 
      this.right_button.removeClassName('right-button-over');
    }.bind(this) );

    this.element.appendChild( this.left_button );
    this.container.appendChild( this.item_container );
    this.element.appendChild( this.container );
    this.element.appendChild( this.right_button );
	
	Element.setOpacity(this.left_button,0.5);

    this.item_container_width = this.item_width*this.json.size();
	
    this.item_container.setStyle({
      width: this.item_container_width+'px'
      });

    this.json.each(function(item){
      this.item_container.appendChild( this.create_carousel_item(item) );
    }.bind(this));
  },

  create_carousel_item: function(item) {
  	var div = Builder.node('div', {className: 'carousel-item'});
	graft(div, ['p', ['a', {'href':item.url,'class': "carousel-thumbnail"}, ['img', {'border':0, 'src': item.thumbnail,'alt': item.title} ] ] ]);
	graft(div, ['span', { 'class':"carousel-item-from" }, ['em', "From "]  ]);
	graft(div, ['span', {'class':"carousel-item-blue"}, ['a',{'class':"carousel-item-blue", 'href':item.url2, 'alt':item.title }, item.title ] ]);
	graft(div, ['p', {'class': "carousel-item-title"},	['a',{'class': "carousel-item-title", 'href':item.url, 'alt':item.subtitle}, item.subtitle ] ]);
	graft(div, ['p', {'class': "carousel-item-text"}, item.text]);
			
	

	return $(div);
  	
  },

  click_left: function(e) {
    Event.stop(e);
    if (this.x_offset==0) return;

    this.x_offset += this.item_width*this.move_n_items;
	
	if (this.x_offset==0) Element.setOpacity(this.left_button,0.5), Element.setOpacity(this.right_button,1);
	else Element.setOpacity(this.left_button,1),Element.setOpacity(this.right_button,1);
	
    new Effect.Move( this.item_container, {x:this.x_offset,y:0,mode:'absolute',duration:this.effect_duration} );
  },

  click_right: function(e) {
    Event.stop(e);
	
	var testLength = this.item_container_width - (this.max_n_display*this.item_width);
   	if (this.x_offset <= testLength*-1) return;

    this.x_offset -= this.item_width*this.move_n_items;
	
	if ((this.x_offset) <= (testLength*-1)) Element.setOpacity(this.right_button,0.5),Element.setOpacity(this.left_button,1);
    else Element.setOpacity(this.right_button,1),Element.setOpacity(this.left_button,1);
	
	
	
	new Effect.Move( this.item_container, {x:this.x_offset,y:0,mode:'absolute',duration:this.effect_duration} );
  }

};