var Playlist = Class.create();
Playlist.prototype = {
	id: '',
	topics: null,
  currentTopic: '',
	
	initialize: function( s_id, a_topics ){
		this.id = s_id;
		if( a_topics ){
			for( var i=0; i<a_topics.length; i++ ){
				this.addTopic( a_topics[i] );
			}
		}
	},
		
	show: function() {
    if( this.topics ){
  	  // build the nav
  	  this.buildNavigation();
  		// run the default topic
      topic = this.topics[0];
      if( topic ){
         this.showTopic( topic );
      }
    }
	},
	
	addTopic: function( o_topic ){
    if( !this.topics ){
      this.topics = new Array();
    }
		this.topics.push( o_topic );
	},
	
	getTopic: function( id ){
    if( this.topics ){
  		return this.topics.find( function(topic){
  			return( topic.id == id );
  		});
    }
	},
  
  getNextTopic: function( ){
    id = this.currentTopic.id;
    idx = this.getTopicIndex( id );
    idx = idx + 1;
    if( this.topics && (idx < this.topics.length) ){
      return this.topics[idx];
    }
    else {
      return null;
    }
  },
	
  getPreviousTopic: function( ){
    id = this.currentTopic.id;
    idx = this.getTopicIndex( id );
    idx = idx - 1;
    if( idx > -1 ){
      return this.topics[idx];
    }
    else {
      return null;
    }    
  },
  
  showNextTopic: function( ){
    topic = this.getNextTopic();
    if( topic ){
      this.showTopic( topic );
      return true;
    }
    else {
      return false;
    }
  },
  
  showPreviousTopic: function( ){
    topic = this.getPreviousTopic();
    if( topic ){
      this.showTopic( topic );
      return true;
    }
    else {
      return false;
    }
  },
  
  showTopic: function( topic ){
    if( topic ){
      this.currentTopic = topic;
      this.changePlayPauseTo( 'pause' );
      this.currentTopic.show();
    }
  },
  
  getTopicIndex: function( id ){
    rv = null;
    if( this.topics ){
      for( var i=0; i<this.topics.length; i++ ){
        topic = this.topics[i];
        if( topic.id == id ){
          rv = i;
          break;
        }
      }
    } 
    return rv;  
  },
  
  buildNavigation: function( ){
    var ul = $('playlist');
    // clear children
    hcom.presentation.clearPlaylistNav();
    // append new children
    for( var i=0; i<this.topics.length; i++ ){
      var topic = this.topics[i];
      var li = document.createElement( 'li' );
      Element.extend( li );
      li.setAttribute( 'id', 'tnav_' + topic.id );
      li.addClassName( 'topicLi' );
      if( i == 0 ){
        li.addClassName( 'first' );
      }
      if( i == (this.topics.length - 1) ){
        li.addClassName( 'last' );
      }
      /* TODO: is there a better way to handle? */
      if (topic.name.replace("&amp;", "&").length > 23) {
        li.addClassName( 'twoLines' );
      }
      if( topic.viewed == true ){
        li.addClassName( 'viewed' );
				li.style.backgroundImage = 'url("topics/' + topic.id + '/button_viewed.jpg")';
      }
			else {
				li.style.backgroundImage = 'url("topics/' + topic.id + '/button.jpg")';
			}
      var a = document.createElement( 'a' );
      Element.extend( a );
      a.setAttribute( 'href', '#' );
	    a.addClassName( 'buttonText' );
      a.innerHTML = topic.name;
			// var divB = document.createElement( 'span' );
			// Element.extend( divB );
			// divB.addClassName( 'buttonText' );
			// divB.appendChild( a );
			var divT = document.createElement( 'span' );
      Element.extend( divT );
      divT.addClassName( 'howLong' );
			divT.innerHTML = topic.duration;
		  li.appendChild(a);
      li.appendChild( divT ); 
      ul.appendChild( li );
      Element.hide( li.id );
      new Effect.Appear( li.id, {delay: (i*.5)} );
    }
  },
  
  handleSecondaryNavClick: function( e ){
    li = Event.findElement( e, 'li' );
    if( li ){
      id = li.id;
      idx = id.indexOf('tnav_');
      if( idx > -1 ){
        id = id.substring( idx + 5 );
        topic = this.getTopic( id );
        if( topic ){
          this.showTopic( topic );
        }
      }
    }
  },
  
  changePlayPauseTo: function( action ){
    var li = $('pause');
    if( !li ){
      li = $('play'); 
    }
    if( li ){
      Element.extend( li );
      liChildren = li.immediateDescendants();
      if( liChildren ){
        var a = liChildren[0];
        if( a ){
          Element.extend( a );
          var img = document.createElement( 'img' );
          Element.extend( img );
          img.setAttribute( 'id', 'playPause' );
          img.setAttribute( 'src', ('assets/images/ui/' + action + '.gif') );
          // img.setAttribute( 'width', '26' );
          // img.setAttribute( 'height', '25' );
          img.setAttribute( 'alt', action ); 
          Element.remove( a.immediateDescendants()[0] );
          a.appendChild( img );
        }
      }
      li.id = action;     
    }
  }
	
}; // end Playlist