/* TimelineFrame Constructor */
function TimelineFrame (id) {
  this.frameId       = id; 
  this.selectedImage = null;
}

/* TimelineFrame Instance methods */

/* 
  Initialize frame: event handlers + widgets
  
  The timeline object is passed in as a parameter as attributes and
  methods of that object are needed to initialize the frame.
  
  Specifically:
    1. timeline delete frame method
    2. timeline update frame dates handler (for the date chooser popup).
    3. the timeline builder counter method - for the frame title and
       and caption event handlers.  Although, counter is implemented as
       a class method, and the timeline instance is not needed
*/
TimelineFrame.prototype.initialize = function (timeline) {

  // Update selected image 
  this.selectedImage = $F(this.frameId + '_selectedimage_field');

  // init char counters
  $(this.frameId+'_frametitle').observe('change', TimelineBuilder.counter);
  $(this.frameId+'_frametitle').observe( 'keyup', TimelineBuilder.counter);
  $(this.frameId+'_framecaption').observe('change', TimelineBuilder.counter);
  $(this.frameId+'_framecaption').observe( 'keyup', TimelineBuilder.counter);
  TimelineBuilder.counter(this.frameId+'_frametitle');
  TimelineBuilder.counter(this.frameId+'_framecaption');
  
  // Initialize date chooser
  $(this.frameId+'_timeframe_datebox').DateChooser = new DateChooser();

	$(this.frameId+'_timeframe_datebox').DateChooser.setCloseTime(200);
	$(this.frameId+'_timeframe_datebox').DateChooser.setXOffset(10);
	$(this.frameId+'_timeframe_datebox').DateChooser.setYOffset(-10);
	$(this.frameId+'_timeframe_datebox').DateChooser.setUpdateFunction(
    function (objDate) { 
      this.updateDate(objDate); 
    }.bind(this)
   );
	
	document.getElementById(this.frameId+'_timeframedate_a').onclick = 
    function (e) {
      $(this.frameId+'_timeframe_datebox').DateChooser.display(e);
    }.bindAsEventListener(this);
    
  //Init add next frame button
  $(this.frameId+'_addnextframe').observe('click', function (e) {
      timeline.addFrame();
      Event.stop(e);
    }.bindAsEventListener(this)
  );
  
  // Delete frame button
  $(this.frameId+'_deleteframe').observe('click', function (e) {
      timeline.deleteFrame();
      Event.stop(e);
    }.bindAsEventListener(this)
  );
    
  // update navigation on change to title or time
  $(this.frameId+'_frametitle').observe( 'change', function(e) {
      this.updateFrameNavigationCell();
    }.bind(this) 
  );
  $(this.frameId+'_timeframetime_h').observe( 'change', function(e) {
      this.updateFrameNavigationCell();
    }.bind(this) 
  );    
  $(this.frameId+'_timeframetime_m').observe( 'change', function(e) {
      this.updateFrameNavigationCell();
    }.bind(this) 
  );
  $(this.frameId+'_timeframetime_ampm').observe( 'change', function(e) {
      this.updateFrameNavigationCell();
    }.bind(this) 
  );  
}


/* updateTimeFrameSelection
   Show or hide timeframe selector Year/Month/Day or Day/Hour/Minute
   according to Select Timeline Type (Reqirement 2.7)
*/
TimelineFrame.prototype.updateTimeFrameSelection = function () {

  var datebox_id = this.frameId + '_timeframe_datebox';
  var timebox_id = this.frameId + '_timeframe_timebox';
  
  if ( $F('timeframetype') == 'ymd' ) {
    $(datebox_id).show();
    $(timebox_id).hide(); 
  }
  else {
    $(datebox_id).show();
    $(timebox_id).show();  
  }
}

/*  
  update the frame's date field
  This accepts either a string or a Date object as a parameter
*/
TimelineFrame.prototype.updateDate = function (date) { 
  var date_str;
  
  if ( typeof date == 'string') {
    date_str = date;
  }
  else if ( typeof date == 'object' 
            && date instanceof Date) 
  {
    date_str = (date.getMonth()+1) 
                + '/' + date.getDate() 
                + '/' + date.getFullYear();
  }
  else {
    return false;
  }              
  $(this.frameId+'_timeframedate').value = date_str; 
  this.updateFrameNavigationCell(); 
}

/* Hide and show the frame
*/
TimelineFrame.prototype.hide = function () {
  $(this.frameId).hide();
}
TimelineFrame.prototype.show = function () {
  $(this.frameId).show();
}

TimelineFrame.prototype.toString = function () {
  return 'TimelineFrame: '+this.frameId;
}

/* selectImage
   pass in a url, and this will update the selected image and
   it will update the navigation image.
   
   if called without an argument or with null, this sets the
   selected image to blank
*/
TimelineFrame.prototype.selectImage = function (src) {
  
  if ( src != null ) {
    var filename = src.split('/').pop();
    $(this.frameId+'_selectedimage').src = src;
    $(this.frameId+'_selectedimage').alt = filename;
    $(this.frameId+'_selectedimage').title = filename;
  }
  else {
    $(this.frameId+'_selectedimage').src = Conf.Path.appRoot 
                                           + '/images/spacer.gif';
    $(this.frameId+'_selectedimage').alt = "No Image Selected";
    $(this.frameId+'_selectedimage').title = "No Image Selected";                                           
  }

  $(this.frameId+'_selectedimage_field').value = src;
  this.selectedImage = src; 
  this.updateFrameNavigationCell();
 
};


/* FRAME NAVIGATION - return a snippet of the current frame's 
   info to display on the navigation bar

  should look something like this :                
   <td class="navigationframe">
     <div>
       <img src="images/collection/0.jpg" class="navthumbnail" />
       <br />Recycling Reminder
       <br />2/1/07
     </div>
     <input type="hidden" ... />
   </td>
*/    
// externalIndex is the index that the timelinebuilder has given the frame
// this may not be the same as the frame's internal frameId
TimelineFrame.prototype.frameNavigationCell = function (externalIndex) {
  return '<td  class="navigationframe" id="' 
         + this.frameId + '_navcell"><div>'
         + this.frameNavigationCellGuts() + '</div>'
         + '<input type="hidden" value="' + externalIndex + '" '
         + 'id="' + this.frameId + '_navcell_input" /></td>';              
};

TimelineFrame.prototype.frameNavigationCellGuts = function () {
  var image = this.getSelectedImage() || Conf.Path.appRoot 
                + '/images/nuvola/krec_fileempty.png';
  var title = this.getFrameTitle() || $F(this.frameId+'_hiddenlabel');
  
  return '<img class="navthumbnail" src="'
         + image + '" /><br />'
         + title + '<br />'
         + this.getTimeFrameValue() ;
};

// Update the frame navigation cell
TimelineFrame.prototype.updateFrameNavigationCell = function () {
  $(this.frameId + '_navcell').down('div').innerHTML = this.frameNavigationCellGuts();
};

// getFrameNavigationCell
TimelineFrame.prototype.getFrameNavigationCell = function () {
  return $(this.frameId+'_navcell');
};

/* END FRAME NAVIGATION */


/** Some accessor methods **/

/* get Frame Title 
*/
TimelineFrame.prototype.getFrameTitle = function () {
  return $F(this.frameId+'_frametitle');
}

/* get selected image
*/
TimelineFrame.prototype.getSelectedImage = function () {
  return this.selectedImage;
}

/* set Frame Label
*/
TimelineFrame.prototype.setFrameLabel = function (label) {
  $(this.frameId+'_label').innerHTML = label;
  $(this.frameId+'_hiddenlabel').value = label; 
}

/* get timeframe - either date or time depending on timeline type 
*/
TimelineFrame.prototype.getTimeFrameValue = function () {
  if ( $F('timeframetype') == 'ymd' ) {
    return $F(this.frameId + '_timeframedate');
  }
  else {
    return $F(this.frameId + '_timeframedate') + ' ' 
           + $F(this.frameId + '_timeframetime_h') + ':' 
           + $F(this.frameId + '_timeframetime_m') + ' '
           + $F(this.frameId + '_timeframetime_ampm');  
  }
}

/* get timeframe date - just the date 
*/
TimelineFrame.prototype.getTimeFrameDate = function () {
    return $F(this.frameId + '_timeframedate');
}