var Topic = Class.create();
Topic.prototype = {
	id: '',
	name: '',
	image: '',
	viewed: false,
	duration: '',
	
	initialize: function( s_id, s_name, s_duration ){
		this.id = s_id;
		this.name = s_name;
		this.image = 'topics/' + this.id + '/playlist.jpg';
		this.duration = s_duration;
	},
		
	show: function() {
		// update cover image
		$( 'playlistPhoto' ).style.backgroundImage = "url( '" + this.image + "' )"
		// update now viewing
    $( 'playlistTop' ).getElementsBySelector( '.nowViewing h4' )[0].innerHTML = this.name;
    // turn off other nav
    currentlyOn = $( 'playlist' ).getElementsByClassName( 'active' );
    if( currentlyOn && currentlyOn[0] ){
			var li = currentlyOn[0];
			Element.extend( li );
      li.removeClassName( 'active' );
      if( li.classNames().include('viewed') ){
        li.style.backgroundImage = 'url("topics/' + li.id.substring(5,li.id.length) + '/button_viewed.jpg")';
      }
      else {
        li.style.backgroundImage = 'url("topics/' + li.id.substring(5,li.id.length) + '/button.jpg")';
      }
    }
    // mark this topic as viewed
    this.markViewed();    
    // add 'active' style to current
    currentTopic = $( 'tnav_' + this.id );
    currentTopic.addClassName( 'active' );
		currentTopic.style.backgroundImage = 'url("topics/' + currentTopic.id.substring(5,currentTopic.id.length) + '/button_on.jpg")';
    // load this topic into the stage
    hcom.presentation.loadStageWith( 'topics/' + this.id + '/1.htm' );
	},
  
  markViewed: function( ){
    this.viewed = true;
    li = $( 'tnav_' + this.id );
    Element.extend( li );
    li.addClassName( 'viewed' );
		li.style.backgroundImage = 'url("topics/' + li.id.substring(5,li.id.length) + '/button_viewed.jpg")';
  }
	
}; // end Topic