var HeadlineRotator = Class.create({
	
	paused: false,
  index: 0,
  
  initialize: function(ele,opts) {
 
 		// grab container	
    this.container = $(ele);
    
    // setup options
    this.options = {
      speed: 5
    }
    Object.extend(this.options, opts || { });
    
    // build navigation container
    this.rotatorContainer = Builder.node('div', { 'class': 'rotatorContainer' } ); 
    this.navContainer = Builder.node('div', { 'class': 'navContainer' } );
    Element.extend(this.rotatorContainer);
    Element.extend(this.navContainer);
    
    // get rotators and initialize
    this.rotators = this.container.childElements();
    this.rotators.each( function(it) {
    	this.initializeElement(it);
    }.bindAsEventListener(this));
		
		
    // append sub containers
    this.container.insert( this.rotatorContainer );
    this.container.insert( this.navContainer );
    
    // position elements
    var containerPosition = this.container.viewportOffset();
    
    //var dim = this.rotatorContainer.
    this.rotators.each( function(it) {
    	it.setStyle( { 'position': 'absolute' } );
    	it.makePositioned(); 
    });
    
    // setup control
    this.control = Builder.node('li', { 'class': 'control' }, '||');
    Event.observe( this.control, 'click', function() {
    	this.paused ? this.play() : this.pause();
    }.bindAsEventListener(this));
    this.navContainer.insert( this.control );
    this.navContainer.insert( Builder.node('div', { 'style': 'clear: both' } ) );
    
    // setup events
    this.scheduler = new PeriodicalExecuter(this.rotate.bindAsEventListener(this), this.options.speed ); 
    
    // determine rotator height (high as the tallest element)
    var rotatorHeight = 0;
    this.rotators.each( function(it) {
    	if( rotatorHeight < it.getHeight() ) {
    		rotatorHeight = it.getHeight();
    	}
    });
    this.rotatorContainer.setStyle( { 'height': rotatorHeight+'px' } );
		
    this.rotators[0].setStyle({opacity: 1});
		this.rotators[0].nav.addClassName('nav-showing');
  },
  
  initializeElement: function(ele) {

    // move element
    ele.remove();
    this.rotatorContainer.insert(ele);
    
    // hide element
    ele.setStyle({
      'opacity': 0
    });
    
    // create navigation html
    var i = 0;
    var found = false;
  	this.rotators.each( function(it) { if( it == ele || found ) { found = true; } else { i++ } } );
    var nav = Builder.node('li', { 'class': 'nav' }, i + 1 );
    this.navContainer.insert( nav );
    ele.nav = nav;
    
    var index = 0;
    var found = false;
    this.rotators.each( function(it) {
    	if( it == ele || found ) {
    		found = true;
    	} else {
    		index++;
    	}
    	
    });

    // setup event listener for nav change
    Event.observe(nav,'click', function() {
    	this.paused = false;
    	this.show(index);
    	this.pause();
    }.bindAsEventListener(this));

  },
  
  rotate: function() {
  	
    if( this.index >= this.rotators.size() - 1 ) {
      this.show(0);
    } else {
      this.show(this.index+1); 
    }
    
  },
  
  pause: function() {
    this.paused = true;
    this.control.innerHTML = '>';
  },
  
  play: function() {
    this.paused = false;
    this.control.innerHTML = '||';
  },
  
  setSpeed: function( speed ) {
  	this.options.speed = speed;
  	this.scheduler.stop();
  	this.scheduler = new PeriodicalExecuter(this.rotate.bindAsEventListener(this), this.options.speed ); 
  },
  
  show: function(index) {
    
    if( !this.paused ) {
      
      // hide last
      new Effect.Opacity(this.rotators[this.index], { from: 1, to: 0 });
    	this.rotators[this.index].displaying = false;
			this.rotators[this.index].nav.removeClassName('nav-showing');
			
      // show current
      this.index = index;
      
      // insure only one is showing
      this.rotators.each( function(it) {
      	if( it.displaying ) {
      		new Effect.Opacity(it, { from: 1, to: 0 });
      		it.displaying = false;
      		it.nav.removeClassName('nav-showing');
      	}
      });
      
      this.rotators[this.index].show();
      new Effect.Opacity(this.rotators[this.index], { from: 0, to: 1 });
      this.rotators[this.index].displaying = true;
      this.rotators[this.index].nav.addClassName('nav-showing');
    	
    }
  }
 
});