var CarouselPanelWidget = Class.create();
CarouselPanelWidget.prototype = {
 	item_width: 105,
  	effect_duration: 0.5,
  	move_n_items: 5,
 	initialize: function(element, title, data) {
		this.data = data;
    	this.element = $(element);
    	this.element.addClassName('carouselPanel-widget');
    	this.title = title;
    	this.x_offset = 0;
		this.count = 1;
	

    	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'}));//, [
      		//Builder.node('h3', {className: 'carousel-title'}, this.title ) ] ));
    		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.data.size();
    		this.item_container.setStyle({
      		width: this.item_container_width+'px'
      		});
			
    		this.data.each(function(item){
      			this.item_container.appendChild( this.create_carousel_item(item) );
    		}.bind(this));
  		},

  		create_carousel_item: function(item) {
			
			var cNameNum = this.count%4+1;
			var cName = 'carousel-image'+cNameNum;
			var div = Builder.node('div', {className: 'carousel-item'});
			var bg = Builder.node('div', {className: cName});
			var jpg = Builder.node('img', {className: 'carousel-thumbnail', src: item.thumbnail, alt: item.title}); 
			div.appendChild(bg);
			
			
			
			if (this.count > 0) {
				var link = Builder.node('a',{href:item.url});
				var textNode = Builder.node('p', {className: 'carousel-item-title'}, item.title);
				link.appendChild(jpg);
				div.appendChild(link);
				var link2 = Builder.node('a',{href:item.url});
				link2.appendChild(textNode);
				div.appendChild(link2);
			// Removed because first link was not working.  Future enhancement is to make this smart enough to know what page its on - Tim Payne 05-16-08	
			//} else {
				//var textNode = Builder.node('p', {className: 'carousel-item-title-selected'}, item.title);
				//div.appendChild(jpg);
				//div.appendChild(textNode);
			}
			
			
			
			
			
			var info_panel = Builder.node('div',{className: 'carousel-item-panel-container', id:'info_panel'});
			var info_panel_top = Builder.node('div', {className: 'carousel-item-panel-top'});
			var info_panel_content =  Builder.node('div', {className: 'carousel-item-panel'});
			
			
			var ageAndHeight = Builder.node('p', {className: 'carousel-panel-text'});
			graft( ageAndHeight, [ "", ['strong',
                  { 'class':"carousel-panel-text" },"Age:"], " " +item.age, ['strong',
				  { 'class':"carousel-panel-text"}, "   Height:"], " " + item.height]);
				  
			info_panel_content.appendChild(ageAndHeight);
			var initWeight = Builder.node('p', {className: 'carousel-panel-text'});
			graft( initWeight, [ "", ['strong',
                  { 'class':"carousel-panel-text" },"Initial Weight:"], " " + item.InitialWeight] );
			
			info_panel_content.appendChild(initWeight);
			var goal = Builder.node('p', {className: 'carousel-panel-text'});
			
			graft( goal, [ "", ['strong',
                  { 'class':"carousel-panel-text" },"Goal:"], ['em',
				   {'class':"carousel-panel-text"}, " " + item.Goal]] );
			info_panel_content.appendChild(goal);
			
			var info_panel_bottom = Builder.node('div', {className: 'carousel-item-panel-bottom'});
			info_panel.appendChild(info_panel_top);
			info_panel.appendChild(info_panel_content);
			info_panel.appendChild(info_panel_bottom);
    		
			
			
			this.element.appendChild(info_panel);
			var my_tooltip = new Tooltip(jpg, info_panel, this.item_container);
		
			
			
			this.count++;

			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);
		    if ((this.x_offset - this.item_width*this.move_n_items) <= (this.item_container_width*-1)) return;
		
		    this.x_offset -= this.item_width*this.move_n_items;
			if ((this.x_offset - this.item_width*this.move_n_items) <= (this.item_container_width*-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} );
		  }
		
	};