function audioPlayer(playerLocation)
  {
  while(playerLocation.childNodes.length != 0)
    {
    playerLocation.removeChild(playerLocation.childNodes[0]);
    }


  this.player = null;
  if (isExplorer())
    {
    playerLocation.innerHTML = '<OBJECT height="0" width="0" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject"><PARAM name="uiMode" value="none"/><param name="windowlessVideo" value="true" /><PARAM NAME="SendPlayStateChangeEvents" VALUE="True" /></OBJECT>';
    this.player = playerLocation.childNodes[0];

    this.setUrl = function(url)
      {
      this.player.URL = url;
      }

    this.play = function()
      {
      this.player.controls.play();
      if (this.state() != 3 && window.app != null)
        {
        if (this.playTimerID != null)
          {
          return;
          }
        this.playTimerID = app.timer.addTimer(new objfn('forcePlay', this), 100);
        }
      }

    this.stop = function()
      {
      this.player.controls.stop();
      }

    this.pause = function()
      {
      this.player.controls.pause();
      }

    this.state = function()
      {
      var conversion = new Array(0,0,4,3,5,5,2,2,0,1,0,1)
      return conversion[this.player.playState];
      }

    this.textState = function()
      {
      var states = new Array('Stopped', 'Contacting', 'Buffering', 'Playing', 'Paused', 'Seeking');
      return states[this.state()];
      }

    this.getPosition = function()
      {
      return this.player.controls.currentPosition*1000;
      }

    this.getClipLength = function()
      {
      try
        {
        return this.player.currentMedia.duration*1000;
        }catch(e)
        {
        return 0;
        }
      }

    this.setPosition = function(pos)
      {
      return this.player.controls.currentPosition = pos/1000;
      }

    }else if (isMozilla())
    {
    playerLocation.innerHTML = '<embed src="test.rpm" type="audio/x-pn-realaudio-plugin" height="0" width="0" controls="HomeCtrl" console="_master" center="true" pluginspage="http://www.real.com/"></embed>';
    this.player = playerLocation.childNodes[0];

    this.setUrl = function(url)
      {
      playerLocation.innerHTML = '<embed src="'+url+'" autostart="true" type="audio/x-pn-realaudio-plugin" height="0" width="0" controls="HomeCtrl" console="_master" center="true" pluginspage="http://www.real.com/"></embed>';
      this.player = playerLocation.childNodes[0];
      /*
      this.requestedURL = url;
      this.player.SetSource(url);
      this.stop();
      this.player.SetSource(url);

      var parent = this;
      var fn = function()
        {
        parent.player.SetSource(url);
        var fn2 = function()
          {
          parent.player.SetSource(url);
          parent.play();
          }
//        setTimeout(fn2, 100);
        }

      setTimeout(fn, 100);
      */
//      this.checkUrlChanged();
      }

    this.checkUrlChanged = function()
      {
      if (this.player.GetSource() == this.oldRealURL)
        {
        this.player.SetSource(this.requestedURL);
        var parent = this;
        var fn = function()
          {
          parent.checkUrlChanged();
          }
        setTimeout(fn, 200);
        }else
        {
        this.oldRealURL = this.player.GetSource();
        this.play();
        }
      }

    this.play = function()
      {
      this.player.DoPlay();
//      if (this.player.GetPlayState() != 3 && window.app != null)
//        {
//        this.playTimerID = app.timer.addTimer(new objfn('forcePlay', this), 100);
//        }
      }

    this.stop = function()
      {
      this.player.DoStop();
      }

    this.pause = function()
      {
      this.player.DoPause();
      }

    this.state = function()
      {
      var result = null;
      try
        {
        result = this.player.GetPlayState();
        }catch(e)
        {
        result = 0;
        }
      return result;
      }

    this.textState = function()
      {
      var states = new Array('Stopped', 'Contacting', 'Buffering', 'Playing', 'Paused', 'Seeking');
      return states[this.player.GetPlayState()];
      }

    this.getPosition = function()
      {
      var result = null;
      try
        {
        result = this.player.GetPosition();
        }catch(e)
        {
        result = 0;
        }
      return result;
      }

    this.getClipLength = function()
      {
      var result = null;
      try
        {
        result = this.player.GetLength();
        }catch(e)
        {
        result = 0;
        }
      return result;
      }

    this.setPosition = function(pos)
      {
      return this.player.SetPosition(pos);
      }


    }


  this.monitorEvents = function()
    {
    if (this.oldClipLength != this.getClipLength())
      {
      this.oldClipLength = this.getClipLength();
      if (this.clipLenMon != null)
        {
        this.clipLenMon.run(this.oldClipLength);
        }
      }

    if (this.oldState != this.state())
      {
      this.oldState = this.state();
      if (this.stateMon != null)
        {
        this.stateMon.run(this.oldState, this.textState());
        }
      }
    }


  this.forcePlay = function()
    {
    if (this.state() != 3)
      {
      this.play();
      return;
      }
    if (this.playTimerID == null)
      {
      return;
      }
    app.timer.removeTimer(this.playTimerID);
    this.playTimerID = null;
    }

  this.oldClipLength = 0;
  this.oldState = -1;
  if (window.app != null)
    {
    this.monEventTimerID = app.timer.addTimer(new objfn('monitorEvents', this), 100);
    }

  }

function createPlayerCaptionDisplay()
  {
  var div = document.createElement('div');

  divToHorizontalSplitContainer(div);

  var infoDisplay = document.createElement('div');
  divToContainer(infoDisplay);
  infoDisplay.appendChild(document.createTextNode('Caption Info'));
  div.addContainer(infoDisplay, 50);

  var captionDisplay = document.createElement('div');
  divToContainer(captionDisplay);
  captionDisplay.className = 'centered';
  captionDisplay.appendChild(document.createTextNode('Caption Container'));
  div.addContainer(captionDisplay);


  var editorCnt = document.createElement('div');
  divToContainer(editorCnt);
//  editorCnt.style['background'] = '#FFEEFF';
  div.addContainer(editorCnt, 25);
  editorCnt.style['position'] = 'relative';


  var precisionSliderCnt = document.createElement('div');
  divToContainer(precisionSliderCnt);
//  precisionSliderCnt.style['background'] = '#FFEEFF';
  div.addContainer(precisionSliderCnt, 60);
  precisionSliderCnt.style['position'] = 'relative';

  var slideHandle = document.createElement('div');
  slideHandle.style['height'] = '20px';
  slideHandle.style['width'] = '20px';
//  slideHandle.style['background'] = '#FFFF00';
  slideHandle.className = 'player_media_slider_button';

  var positionSlider = createHorizontalSlider(100, 0, 20, 400, slideHandle, 20, null);
  positionSlider.style['top'] = '40px';
  positionSlider.style['left'] = '20px';
  positionSlider.style['position'] = 'absolute';
  positionSlider.className = 'player_media_slider_bar';

  var lineSlider = document.createElement('div');
  divToContainer(lineSlider);
//  lineSlider.style['background'] = "#AAAAFF";
  lineSlider.style['position'] = 'absolute';
  lineSlider.style['height'] = '20px';
  lineSlider.style['width'] = '20px';
  lineSlider.style['top'] = '20px';
  lineSlider.style['left'] = '21px';

  var zoomDropDown = document.createElement('div');
  zoomDropDown.style['position'] = 'absolute';
  zoomDropDown.style['height'] = '20px';
  zoomDropDown.style['top'] = '0px';
  zoomDropDown.style['left'] = '20px';
  zoomDropDown.className = 'player_captionInfo';
  zoomDropDown.appendChild(document.createTextNode('Zoom: '));

  var zoomSelect = document.createElement('select');
  zoomSelect.onchange = function()
    {
    app.cach.setVariable('precisionSliderMillisecondsPerPixel', this.value);
    }

  zoomSelect.className = 'player_media_dropdown';
  var zoomOptions = new Array(10, 20, 30, 40, 50, 60, 70, 80, 90, 100);
  var zoomOption;
  for(var i = 0; i < zoomOptions.length; i++)
    {
    zoomOption = document.createElement('option');
    zoomOption.value = zoomOptions[i];
    zoomOption.appendChild(document.createTextNode(zoomOptions[i].toString() + ' milliseconds/pixel'));
    zoomSelect.appendChild(zoomOption);
    }
  zoomDropDown.appendChild(zoomSelect);
  zoomSelect.onchange();

  precisionSliderCnt.sliderToSeconds = function(number)
    {
    var sliderHalf = (this.positionSlider.sliderMax)/2;
    var numberOffset = number - sliderHalf;
    var currPos = app.getFunction('player', 'getPosition').run();
    var finalPos = currPos + (numberOffset*app.cach.get('precisionSliderMillisecondsPerPixel'));
    if (finalPos < 0)
      {
      finalPos = 0;
      }
    var maxPos = app.getFunction('player', 'getClipLength').run();
    if (finalPos > maxPos)
      {
      finalPos = maxPos;
      }
    return finalPos;
    }

  precisionSliderCnt.intToTime = function(number)
    {
    number = this.sliderToSeconds(number);

    if (number < 0) {number = 0;}

    number = number / 1000;
    var minutes = Math.floor(number/60);
    var seconds = number - (minutes * 60);
    seconds = Math.round(seconds*100)/100;
    if (seconds < 10)
      {
      seconds = '0' + seconds.toString();
      }else
      {
      seconds = seconds.toString();
      }
    return minutes.toString() + ':' + seconds;
    }

  precisionSliderCnt.readPosSlideChange = function(pos)
    {
    app.getFunction('player', 'setPosition').run(this.sliderToSeconds(pos));
    this.resizeChildren();
    }

  positionSlider.posToTextFn = new objfn('intToTime', precisionSliderCnt);
  positionSlider.posMonFn = new objfn('readPosSlideChange', precisionSliderCnt);

  precisionSliderCnt.appendChild(zoomDropDown);
  precisionSliderCnt.appendChild(lineSlider);
  precisionSliderCnt.appendChild(positionSlider);

  precisionSliderCnt.lineSlider = lineSlider;

  precisionSliderCnt.positionSlider = positionSlider;
  precisionSliderCnt.resizeChildren = function()
    {
    this.positionSlider.sliderMax = (this.currX-40)-this.positionSlider.sliderWidth;
    this.positionSlider.setPos((this.positionSlider.sliderMax)/2);
    this.positionSlider.setWidth(this.currX-40);
    this.lineSlider.setSize((this.currX-40), 20);
    }

  var capMan = new captionManager(infoDisplay, captionDisplay, precisionSliderCnt, editorCnt);
  app.addComponent('captionManager', capMan);

  return div;
  }

function captionManager(infoDiv, capDiv, precisionSliderCnt, editorCnt)
  {
  this.infoDiv = infoDiv;
  this.capDiv = capDiv;
  this.editorCnt = editorCnt;

  this.lineSlider = new lineSlideMonitor(precisionSliderCnt.lineSlider, precisionSliderCnt.positionSlider, this);

  clearChildNodes(capDiv);
  clearChildNodes(infoDiv);
  clearChildNodes(editorCnt);


  capDiv.className = 'centered';

  this.textContainer = document.createElement('span');

  this.gurmukhiTextSpan = document.createElement('span');
  this.gurmukhiText = document.createTextNode('<>');
  this.gurmukhiTextSpan.appendChild(this.gurmukhiText);
  this.gurmukhiTextSpan.className = 'player_media_gurmukhi_text';

  this.englishTextSpan = document.createElement('span');
  this.englishText = document.createTextNode('Ik On-ankar');
  this.englishTextSpan.appendChild(this.englishText);
  this.englishTextSpan.className = 'player_media_english_text';

  this.translationTextSpan = document.createElement('span');
  this.translationText = document.createTextNode('One God');
  this.translationTextSpan.appendChild(this.translationText);
  this.translationTextSpan.className = 'player_media_english_text';

  this.editButtonCnt = document.createElement('span');

  this.textContainer.appendChild(this.gurmukhiTextSpan);
  this.textContainer.appendChild(document.createElement('br'));
  this.textContainer.appendChild(this.englishTextSpan);
  this.textContainer.appendChild(document.createElement('br'));
  this.textContainer.appendChild(this.translationTextSpan);

  this.editTextContainer = document.createElement('span');
  this.editTextContainer.className = 'player_media_edit_text_container';
  this.editTextContainer.style['visibility'] = 'hidden';
  this.editTextContainer.style['display'] = 'none';

  this.timeInput = document.createElement('input');
  this.timeInput.className = 'player_media_input_box player_media_english_text';
  this.timeInput.style['width'] = '100px';
  makeInputTimeReader(this.timeInput);
  this.timeInput.monitorChange = new objfn('monitorEditingTimeInput', this);
  this.gurmukhiInput = document.createElement('input');
  this.gurmukhiInput.className = 'player_media_input_box player_media_gurmukhi_text';
  this.gurmukhiInput.style['width'] = '390px';
  this.englishInput = document.createElement('input');
  this.englishInput.className = 'player_media_input_box player_media_english_text';
  this.englishInput.style['width'] = '390px';
  this.translationInput = document.createElement('input');
  this.translationInput.className = 'player_media_input_box player_media_english_text';
  this.translationInput.style['width'] = '390px';

  this.editTextContainer.appendChild(this.timeInput);
  this.editTextContainer.appendChild(document.createElement('br'));
  this.editTextContainer.appendChild(this.gurmukhiInput);
  this.editTextContainer.appendChild(document.createElement('br'));
  this.editTextContainer.appendChild(this.englishInput);
  this.editTextContainer.appendChild(document.createElement('br'));
  this.editTextContainer.appendChild(this.translationInput);

  capDiv.appendChild(this.editTextContainer);
  capDiv.appendChild(this.textContainer);
  capDiv.appendChild(document.createElement('br'));
  capDiv.appendChild(this.editButtonCnt);


  infoDiv.className = 'player_captionInfo';

  this.captions = new Array();
  this.editable = false;
  this.editMode = false;
  this.editing = false;
  this.editingLine = -1;

  this.optPrevTimeCheck = -1;
  this.optNextTimeCheck = -1;
  this.previousRenderedCap = -1;

  this.addNewLine = function()
    {
    var line = {};

    var match = new RegExp("^([\\x20-\\xFF]*)$");

    if (!match.test(this.gurmukhiInput.value))
      {
      alert("The following line contains invalid characters:\n"+this.gurmukhiInput.value);
      return;
      }

    if (!match.test(this.englishInput.value))
      {
      alert("The following line contains invalid characters:\n"+this.englishInput.value);
      return;
      }

    if (!match.test(this.translationInput.value))
      {
      alert("The following line contains invalid characters:\n"+this.translationInput.value);
      return;
      }

    line['time'] = this.timeInput.currVal;
    line['gurmukhi'] = this.gurmukhiInput.value;
    line['english'] = this.englishInput.value;
    line['translation'] = this.translationInput.value;
    line['captionid'] = this.currentCaptionID;

    this.captions[this.captions.length] = line;
    this.newlyAddedLineID = this.fixLinePosition(this.captions.length-1);

    clearChildNodes(this.editButtonCnt);

    var rsp = new phpRequest(new objfn('finishedAddlingCaption', this), 'addCaption', 'caption_responder', 'app/jsresponder.php');
    rsp.run(this.captions[this.newlyAddedLineID]);

    }

  this.finishedAddlingCaption = function(newID)
    {
    this.captions[this.newlyAddedLineID]['id'] = newID;
    this.finishedSavingCaption();
    }

  this.monitorEditingTimeInput = function(time)
    {
    if (!this.editing){return;}
    if (this.editingLine == -1) {return;}

    this.updateCaptionLine(time, this.gurmukhiInput.value, this.englishInput.value, this.translationInput.value);
    this.editingLine = this.fixLinePosition(this.editingLine);

    this.optPrevTimeCheck = -1;
    this.optNextTimeCheck = -1;
    this.previousRenderedCap = this.editingLine;

    }

  this.didEditorChangeLineCaptions = function()
    {
    if (!this.editing){return false;}
    if (this.editingLine == -1) {return false;}
    if (this.timeInput.currVal != this.editorOriginalTime ||
        this.gurmukhiInput.value != this.editorOriginalGurmukhi ||
        this.englishInput.value != this.editorOriginalEnglish ||
        this.translationInput.value != this.editorOriginalTranslation)
      {
      return true;
      }
    return false;
    }

  this.updateCaptionLine = function(time, gurmukhi, english, translation)
    {
    if (!this.editing) {return;}
    this.captions[this.editingLine]['time'] = time;
    this.captions[this.editingLine]['gurmukhi'] = gurmukhi;
    this.captions[this.editingLine]['english'] = english;
    this.captions[this.editingLine]['translation'] = translation;
    }

  this.fixLinePosition = function(index)
    {
    if (index != 0)
      {
      if (this.captions[index]['time'] < this.captions[index-1]['time'])
        {
        return this.fixLinePositionBack(index);
        }
      }

    if(index != this.captions.length-1)
      {
      if (this.captions[index]['time'] > this.captions[index+1]['time'])
        {
        return this.fixLinePositionForward(index);
        }
      }
    return index;
    }

  this.fixLinePositionForward = function(index)
    {
    var tmp;
    while(index != this.captions.length-1 && this.captions[index]['time'] > this.captions[index+1]['time'])
      {
      tmp = this.captions[index+1];
      this.captions[index+1] = this.captions[index];
      this.captions[index] = tmp;
      index++;
      }
    this.lineSlider.clearLines();
    return index;
    }


  this.fixLinePositionBack = function(index)
    {
    var tmp;
    while(index != 0 && this.captions[index]['time'] < this.captions[index-1]['time'])
      {
      tmp = this.captions[index-1];
      this.captions[index-1] = this.captions[index];
      this.captions[index] = tmp;
      index--;
      }
    this.lineSlider.clearLines();
    return index;
    }

  this.updateCaptions = function()
    {
    var currPos = app.getFunction('player', 'getPosition').run()/1000;

    this.lineSlider.searchNewLines(currPos);

    if (this.editing)
      {
      return;
      }

    if (currPos >= this.optPrevTimeCheck && currPos < this.optNextTimeCheck)
      {
      return;
      }

    var currCap = this.getCurrentCaption(currPos);
    if (currCap == null)
      {
      this.optPrevTimeCheck = -1;
      this.optNextTimeCheck = -1;
      this.previousRenderedCap = -1;
      this.gurmukhiText.nodeValue = '';
      this.englishText.nodeValue = '';
      this.translationText.nodeValue = '';
      clearChildNodes(this.editButtonCnt);
      this.textContainer.style['visibility'] = 'visible';
      this.textContainer.style['display'] = 'block';
      this.editTextContainer.style['visibility'] = 'hidden';
      this.editTextContainer.style['display'] = 'none';
      return;
      }

    if (currCap != this.captions.length-1)
      {
      this.optNextTimeCheck = this.captions[currCap+1]['time'];
      this.optPrevTimeCheck = this.captions[currCap]['time'];
      }else
      {
      this.optNextTimeCheck = -1;
      this.optPrevTimeCheck = -1;
      }

    if (this.previousRenderedCap != currCap)
      {
      this.previousRenderedCap = currCap;
      this.gurmukhiText.nodeValue = this.captions[currCap]['gurmukhi'];
      this.englishText.nodeValue = this.captions[currCap]['english'];
      this.translationText.nodeValue = this.captions[currCap]['translation'];

      this.textContainer.style['visibility'] = 'visible';
      this.textContainer.style['display'] = 'block';
      this.editTextContainer.style['visibility'] = 'hidden';
      this.editTextContainer.style['display'] = 'none';

      clearChildNodes(this.editButtonCnt);
      if (this.editMode)
        {
        var editButton = document.createElement('input');
        editButton.type = 'button';
        editButton.value = 'Edit';
        editButton.className = 'player_media_input_button';
        editButton.parent = this;
        editButton.onclick = function()
          {
          this.parent.setEditingLine(this.parent.previousRenderedCap);
          }
        this.editButtonCnt.appendChild(editButton);
        }
      }
    }

  this.setEditingLine = function(index)
    {

    this.previousRenderedCap = index;

    this.editing = true;
    this.editingLine = index;
    this.textContainer.style['visibility'] = 'hidden';
    this.textContainer.style['display'] = 'none';
    this.editTextContainer.style['visibility'] = 'visible';
    this.editTextContainer.style['display'] = 'block';
    clearChildNodes(this.editButtonCnt);

    this.editorOriginalTime = this.captions[index]['time'];
    this.editorOriginalGurmukhi = this.captions[index]['gurmukhi'];
    this.editorOriginalEnglish = this.captions[index]['english'];
    this.editorOriginalTranslation = this.captions[index]['translation'];

    this.timeInput.setValue(this.captions[index]['time']);
    this.gurmukhiInput.value = this.captions[index]['gurmukhi'];
    this.englishInput.value = this.captions[index]['english'];
    this.translationInput.value = this.captions[index]['translation'];

    var save = document.createElement('input');
    save.type = 'button';
    save.className = 'player_media_input_button';
    save.value = 'Save';
    save.parent = this;
    save.onclick = function()
      {
      var match = new RegExp("^([\\x20-\\xFF]*)$");
      if (!match.test(this.parent.gurmukhiInput.value))
        {
        alert("The following line contains invalid characters:\n"+this.parent.gurmukhiInput.value);
        return;
        }

      if (!match.test(this.parent.englishInput.value))
        {
        alert("The following line contains invalid characters:\n"+this.parent.englishInput.value);
        return;
        }

      if (!match.test(this.parent.translationInput.value))
        {
        alert("The following line contains invalid characters:\n"+this.parent.translationInput.value);
        return;
        }

      this.parent.updateCaptionLine(this.parent.timeInput.currVal, this.parent.gurmukhiInput.value, this.parent.englishInput.value, this.parent.translationInput.value);

      var rsp = new phpRequest(new objfn('finishedSavingCaption' ,this.parent), 'updateCaption', 'caption_responder', 'app/jsresponder.php');
      rsp.run(this.parent.captions[this.parent.editingLine]);

      this.parent.fixLinePosition(this.parent.editingLine);

      clearChildNodes(this.parent.editButtonCnt);

      }

    var cancel = document.createElement('input');
    cancel.type = 'button';
    cancel.className = 'player_media_input_button';
    cancel.value = 'Cancel';
    cancel.parent = this;
    cancel.onclick = function()
      {
      this.parent.updateCaptionLine(this.parent.editorOriginalTime, this.parent.editorOriginalGurmukhi, this.parent.editorOriginalEnglish, this.parent.editorOriginalTranslation);
      this.parent.fixLinePosition(this.parent.editingLine);

      this.parent.editing = false;
      this.parent.optPrevTimeCheck = -1;
      this.parent.optNextTimeCheck = -1;
      this.parent.previousRenderedCap = -1;
      }

    var deleteButton = document.createElement('input');
    deleteButton.type = 'button';
    deleteButton.className = 'player_media_input_button';
    deleteButton.value = 'Delete';
    deleteButton.parent = this;
    deleteButton.onclick = function()
      {
      if (!confirm('Are you sure you want to delete this line?'))
        {
        return;
        }
      this.parent.captions[this.parent.editingLine]['time'] = this.parent.captions[this.parent.captions.length-1]['time']+1;
      this.parent.fixLinePosition(this.parent.editingLine);
      var removed = this.parent.captions.pop();

      var rsp = new phpRequest(new objfn('finishedSavingCaption', this.parent), 'removeCaption', 'caption_responder', 'app/jsresponder.php');
      rsp.run(removed['id']);

      clearChildNodes(this.parent.editButtonCnt);
      }

    this.editButtonCnt.appendChild(save);
    this.editButtonCnt.appendChild(deleteButton);
    this.editButtonCnt.appendChild(cancel);
    }

  this.finishedSavingCaption = function()
    {
    this.editing = false;
    this.optPrevTimeCheck = -1;
    this.optNextTimeCheck = -1;
    this.previousRenderedCap = -1;
    }

  this.getCurrentCaption = function(currPos)
    {
    if (this.captions == null || this.captions.length == 0)
      {
      return null;
      }
    return this.binarySearchCaptions(this.captions, currPos, 0, this.captions.length-1);
/*
    for(var i = 0; i < this.captions.length-1; i++)
      {
      if (currPos >= this.captions[i].time && currPos < this.captions[i+1].time)
        {
        break;
        }
      }
    if (i == 0)
      {
      return null;
      }
    return i;
*/
    }

  this.binarySearchCaptions = function(arr, search, start, end)
    {
    if (search >= arr[end]['time'])
      {
      return end;
      }
    if (search < arr[start]['time'])
      {
      return null;
      }
    if (start == end)
      {
      return null;
      }
    var mid = Math.floor((start+end)/2);
    if (search >= arr[mid]['time'] && search < arr[mid+1]['time'])
      {
      return mid;
      }

    if (search < arr[mid]['time'])
      {
      return this.binarySearchCaptions(arr, search, start, mid);
      }else
      {
      return this.binarySearchCaptions(arr, search, mid, end);
      }

    }

  this.loadCaptions = function(id)
    {
    if (id == null || id == '')
      {
      this.captions = new Array();
      this.editable = false;
      this.currentCaptionID = null;
      this.captionReader({'editable':'0', 'captions':new Array()});
      return;
      }

    this.currentCaptionID = id;

    var rsp = new phpRequest(new objfn('captionReader' ,this), 'getCaptions', 'caption_responder', 'app/jsresponder.php');
    rsp.run(id);
    }

  this.captionReader = function(result)
    {

    if(result.editable == '1')
      {
      this.editable = true;
      }else
      {
      this.editable = false;
      }

    this.captionInfo = result['captionInfo'];

    var media = app.cach.get('currentMedia');

    clearChildNodes(this.captionCreateSubmitCnt);

    if (this.editable && !app.auth.inGroup('caption_admin'))
      {
      if (this.captionInfo != null && this.captionInfo['submitted'] == 'N')
        {
        var newCap = document.createElement('input');
        newCap.className = 'media_browser_input_normal_button';
        newCap.type = 'button';
        newCap.value = 'Submit Captions';
        newCap.parent = this;
        newCap.onclick = function()
          {
          if (!confirm("Submitting captions alerts the admins that you have finished working on this caption. The admins will look over the captions and either suggest improvements, or make the caption public. If you have any questions you can always e-mail us at sikhshabads@gmail.com.\nContinue?"))
            {
            return;
            }
          var rsp = new phpRequest(new objfn('userChange' ,this.parent), 'submitCaption', 'caption_responder', 'app/jsresponder.php');
          rsp.run(this.parent.captionInfo['id']);
          }
        this.captionCreateSubmitCnt.appendChild(newCap);
        }
        if (this.captionInfo['submitted'] == 'Y')
          {
          var capStatus = document.createElement('span');
          capStatus.appendChild(document.createTextNode('Caption Submitted'));
          capStatus.className = 'media_browser_link';
          capStatus.onclick = function()
            {
            alert('Your captions have been submitted. You can continue to make minor changes to your captions, but once your captions goes public, you will no longer be able to modify them. If you want to cancel your request, please e-mail sikhshabads@gmail.com.');
            }
          this.captionCreateSubmitCnt.appendChild(capStatus);
          }
      }else
      {
      if (media['createCap'] == '1' || app.auth.inGroup('caption_admin'))
        {
        var newCap = document.createElement('input');
        newCap.className = 'media_browser_input_normal_button';
        newCap.type = 'button';
        newCap.value = 'Create Captions';
        newCap.parent = this;
        newCap.onclick = function()
          {
          var media = app.cach.get('currentMedia');
          if (media == null)
            { 
            return;
            }
          if (!confirm("Creating a new caption allows you to make your own captions for this media.\nContinue?"))
            {
            return;
            }
          var rsp = new phpRequest(new objfn('userChange' ,this.parent), 'createCaption', 'media_responder', 'app/jsresponder.php');
          rsp.run(media['id']);
          }
        this.captionCreateSubmitCnt.appendChild(newCap);
        }
      }


    this.editMode = false;
    this.editing = false;

    this.optPrevTimeCheck = -1;
    this.optNextTimeCheck = -1;
    this.previousRenderedCap = -1;

    this.lineSlider.clearLines();


    this.captions = result['captions'];
    for(var i = 0; i < this.captions.length; i++)
      {
      this.captions[i]['time'] = parseFloat(this.captions[i]['time']);
      }

    this.redrawEditorContainer();
    }

  this.redrawEditorContainer = function()
    {
    clearChildNodes(this.editorCnt);
    if (!this.editable)
      {
      return;
      }

    this.optPrevTimeCheck = -1;
    this.optNextTimeCheck = -1;
    this.previousRenderedCap = -1;

    var modeSwitch;
    modeSwitch = document.createElement('input');
    modeSwitch.type = 'button';
    modeSwitch.className = 'user_menu_input_button';
    modeSwitch.parent = this;

    if (!this.editMode)
      {
      modeSwitch.value = 'Edit Mode';
      modeSwitch.onclick = function()
        {
        this.parent.editMode = true;
        this.parent.editing = false;
        this.parent.redrawEditorContainer();
        }
      this.editorCnt.appendChild(modeSwitch);
      }else
      {
      modeSwitch.value = 'View Mode';
      modeSwitch.onclick = function()
        {
        if (this.parent.didEditorChangeLineCaptions())
          {
          alert('You are currently editing a line. Save or cancel it before switching to view mode.');
          return;
          }

        this.parent.editing = false;
        this.parent.editMode = false;
        this.parent.redrawEditorContainer();
        }
      this.editorCnt.appendChild(modeSwitch);

      var addLine = document.createElement('input');
      addLine.type = 'button';
      addLine.className = 'user_menu_input_button';
      addLine.parent = this;
      addLine.value = 'Add Line';
      addLine.onclick = function()
        {
        this.parent.setAddNewLine();
        }

      this.editorCnt.appendChild(addLine);

      if (app.auth.inGroup('caption_admin') && this.captionInfo != null)
        {
        var modifyCapPublic = document.createElement('input');
        modifyCapPublic.type = 'button';
        modifyCapPublic.className = 'user_menu_input_button';
        modifyCapPublic.parent = this;
        if (this.captionInfo['public'] == 'Y')
          {
          modifyCapPublic.value = 'Make Private';
          modifyCapPublic.onclick = function()
            {
            if (!confirm('Are you sure you want to make this caption private?'))
              {
              return;
              }
            var rsp = new phpRequest(new objfn('userChange' ,this.parent), 'setCaptionPublic', 'caption_responder', 'app/jsresponder.php');
            rsp.run(this.parent.captionInfo['id'], 'N');
            }
          }else
          {
          modifyCapPublic.value = 'Make Public';
          modifyCapPublic.onclick = function()
            {
            if (!confirm('Are you sure you want to make this caption public?'))
              {
              return;
              }
            var rsp = new phpRequest(new objfn('userChange' ,this.parent), 'setCaptionPublic', 'caption_responder', 'app/jsresponder.php');
            rsp.run(this.parent.captionInfo['id'], 'Y');
            }
          }
        this.editorCnt.appendChild(modifyCapPublic);
        }
      }
    }

  this.setAddNewLine = function()
    {
    this.editing = true;
    this.editingLine = -1;
    this.textContainer.style['visibility'] = 'hidden';
    this.textContainer.style['display'] = 'none';
    this.editTextContainer.style['visibility'] = 'visible';
    this.editTextContainer.style['display'] = 'block';
    clearChildNodes(this.editButtonCnt);

    this.timeInput.setValue(app.getFunction('player', 'getPosition').run()/1000);
    this.gurmukhiInput.value = 'gurmuKI';
    this.englishInput.value = 'English Pronunciation';
    this.translationInput.value = 'Translation';

    var cancel = document.createElement('input');
    cancel.type = 'button';
    cancel.className = 'player_media_input_button';
    cancel.value = 'Cancel';
    cancel.parent = this;
    cancel.onclick = function()
      {
      this.parent.editing = false;
      this.parent.optPrevTimeCheck = -1;
      this.parent.optNextTimeCheck = -1;
      this.parent.previousRenderedCap = -1;
      }

    var addLine = document.createElement('input');
    addLine.type = 'button';
    addLine.className = 'player_media_input_button';
    addLine.value = 'Add';
    addLine.parent = this;
    addLine.onclick = function()
      {
      this.parent.addNewLine();
      }

    var copyLine = document.createElement('input');
    copyLine.type = 'button';
    copyLine.className = 'player_media_input_button';
    copyLine.value = 'Copy Existing';
    copyLine.parent = this;
    copyLine.onclick = function()
      {
      this.parent.editCopyLine();
      }

    this.editButtonCnt.appendChild(addLine);
    this.editButtonCnt.appendChild(copyLine);
    this.editButtonCnt.appendChild(cancel);
    }

  this.editCopyLine = function()
    {
    if (this.captions == null || this.captions.length == 0)
      {
      alert('This is the first line being added. There are no other lines to copy from!');
      return;
      }

    if (this.editingLine == -1)
      {
      this.editingLine = this.previousRenderedCap;
      }

    this.copyCurrentLineIntoNewLine();

    clearChildNodes(this.editButtonCnt);

    var cancel = document.createElement('input');
    cancel.type = 'button';
    cancel.className = 'player_media_input_button';
    cancel.value = 'Cancel Copy';
    cancel.parent = this;
    cancel.onclick = function()
      {
      this.parent.setAddNewLine();
      }

    var addLine = document.createElement('input');
    addLine.type = 'button';
    addLine.className = 'player_media_input_button';
    addLine.value = 'Add';
    addLine.parent = this;
    addLine.onclick = function()
      {
      this.parent.addNewLine();
      }

    var prevLine = document.createElement('input');
    prevLine.type = 'button';
    prevLine.className = 'player_media_input_button';
    prevLine.value = 'Previous Line';
    prevLine.parent = this;
    prevLine.onclick = function()
      {
      if (this.parent.editingLine == 0)
        {
        return;
        }
      this.nextLine.disabled = false;
      this.parent.editingLine = this.parent.editingLine - 1;
      if (this.parent.editingLine == 0)
        {
        this.disabled = true;
        }
      this.parent.copyCurrentLineIntoNewLine();
      }

    if (this.editingLine == 0)
      {
      prevLine.disabled = true;
      }

    var nextLine = document.createElement('input');
    nextLine.type = 'button';
    nextLine.className = 'player_media_input_button';
    nextLine.value = 'Next Line';
    nextLine.parent = this;
    nextLine.onclick = function()
      {
      if (this.parent.editingLine == this.parent.captions.length-1)
        {
        return;
        }
      this.prevLine.disabled = false;
      this.parent.editingLine = this.parent.editingLine + 1;
      if (this.parent.editingLine == this.parent.captions.length-1)
        {
        this.disabled = true;
        }
      this.parent.copyCurrentLineIntoNewLine();
      }

    if (this.editingLine == this.captions.length-1)
      {
      nextLine.disabled = true;
      }

    prevLine.nextLine = nextLine;
    nextLine.prevLine = prevLine;

    this.editButtonCnt.appendChild(prevLine);
    this.editButtonCnt.appendChild(nextLine);
    this.editButtonCnt.appendChild(document.createElement('br'));
    this.editButtonCnt.appendChild(addLine);
    this.editButtonCnt.appendChild(cancel);
    }

  this.copyCurrentLineIntoNewLine = function()
    {
    this.gurmukhiInput.value = this.captions[this.editingLine]['gurmukhi'];
    this.englishInput.value = this.captions[this.editingLine]['english'];
    this.translationInput.value = this.captions[this.editingLine]['translation'];
    }

  this.newMedia = function(info)
    {
    clearChildNodes(this.infoDiv);
    var status = document.createElement('div');
    status.className = 'player_media_info';
    status.appendChild(document.createTextNode('Name: ' + info['name']));
    status.appendChild(document.createElement('br'));
    status.appendChild(document.createTextNode('Description: ' + info['description']));
    this.infoDiv.appendChild(status);

    var captionInfo = document.createElement('div');
    captionInfo.className = 'player_media_info';
    captionInfo.appendChild(document.createTextNode('Captions: '));
    var capDropDown = document.createElement('select');
    capDropDown.className = 'player_media_dropdown';
    captionInfo.appendChild(capDropDown);
    capDropDown.parent = this;
    capDropDown.onchange = function()
      {
      this.parent.loadCaptions(this.value);
      }

    var captions = info['captions'];
    for(var i = 0; i < captions.length; i++)
      { 
      var option = document.createElement('option');
      option.value = captions[i]['id'];
      if (captions[i]['public'] == '1')
        {
        option.appendChild(document.createTextNode('by ' + captions[i]['username'] +'['+captions[i]['id'].toString()+']'));
        }else if(captions[i]['public'] == '0')
        {
        option.appendChild(document.createTextNode('-by ' + captions[i]['username'] +'['+ captions[i]['id'].toString() + ']'));
        }
      capDropDown.appendChild(option);
      }

    this.captionCreateSubmitCnt = document.createElement('div');

    captionInfo.appendChild(this.captionCreateSubmitCnt);
    this.infoDiv.appendChild(captionInfo);
    capDropDown.onchange();
    }

  this.userChange = function()
    {
    var media = app.cach.get('currentMedia');
    if (media == null)
      { 
      return;
      }
    var rsp = new phpRequest(new objfn('setNewMediaInfo' ,this), 'getMediaInfo', 'media_responder', 'app/jsresponder.php');
    rsp.run(media['id']);
    }

  this.setNewMediaInfo = function(info)
    {
    app.cach.setVariable('currentMedia', info);
    }

  app.cach.bind('currentMedia', new objfn('newMedia', this));
  app.cach.bind('userInfo', new objfn('userChange', this));
  app.timer.addTimer(new objfn('updateCaptions', this), 100);
  }

function makeInputTimeReader(input)
  {
  input.setValue = function(seconds)
    {
    if (seconds < 0)
      {
      seconds = 0; 
      }

    this.currVal = seconds;

    var minutes = Math.floor(seconds/60);
    seconds = seconds - (minutes * 60);
    seconds = Math.round(seconds*100)/100;
    if (seconds < 10)
      {
      seconds = '0' + seconds.toString();
      }else
      {
      seconds = seconds.toString();
      }
    this.value = minutes.toString() + ':' + seconds;
    }

  input.onblur = function()
    {
    var failure = true;
    try
      {
      var text = this.value;
      var colPos = text.indexOf(':');
      var seconds;
      var minutes;
      if (colPos == -1)
        {
        minutes = 0;
        seconds = parseFloat(text);
        }else
        {
        minutes = parseFloat(text.substring(0, colPos));
        seconds = parseFloat(text.substring(colPos+1));
        }
      if (!isNaN(minutes) && !isNaN(seconds))
        {
        this.setValue(minutes*60 + seconds);
        failure = false;
        }
      }catch(e)
      {
      }
    if (failure)
      {
      alert("Unable to recognize time format.\nUse minutes:seconds.\nEG. 2:30.5");
      this.setValue(this.currVal);
      }

    if (this.monitorChange != null)
      {
      this.monitorChange.run(this.currVal);
      }

    }

  }




function flashaudioplayer(playerLocation)
  {
  while(playerLocation.childNodes.length != 0)
    {
    playerLocation.removeChild(playerLocation.childNodes[0]);
    }

  this.flashObjectName = "FlashAudioPlayerIdentifier";
  this.soundCompleteCBName = this.flashObjectName + "_complete_cb";

  var parent = this;
  window[this.soundCompleteCBName] = function()
    {
    parent.soundCompleteFlashCB();
    }

  if (isExplorer())
    {
    playerLocation.innerHTML = '<object width="0" height="0" id="' + this.flashObjectName + '" name="' + this.flashObjectName + '" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"><param name="movie" value="app/flash/AudioPlayer.swf"></param><param name="quality" value="high"></param><param name="play" value="true"></param>  <param name="loop" value="true"></param><param name="scale" value="showall"></param><param name="wmode" value="window"></param><param name="devicefont" value="false"></param><param name="bgcolor" value="#ffffff"></param><param name="menu" value="true"></param><param name="allowFullScreen" value="false"></param><param name="allowScriptAccess" value="sameDomain"></param><param name="salign" value=""></param></object>';
    }else
    {
    playerLocation.innerHTML = '<embed src="app/flash/AudioPlayer.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" play="true" loop="true" scale="showall" wmode="window" devicefont="false" bgcolor="#ffffff" name="' + this.flashObjectName + '" menu="true" allowfullscreen="false" allowscriptaccess="sameDomain" salign="" type="application/x-shockwave-flash" width="0" align="middle" height="0"> ';
    }

  if (window.app != null)
    {
    this.monEventTimerID = app.timer.addTimer(new objfn('monitorEvents', this), 100);
    }

  this.flashObjectInitalized = false;
  this.checkFlashObjectInitalized();
  }

flashaudioplayer.prototype.soundCompleteFlashCB = function()
  {
  if (this.clipEndCB != null)
    {
    this.clipEndCB.run();
    }
  }

flashaudioplayer.prototype.checkFlashObjectInitalized = function()
  {
  try
    {
    this.getFlashObject().setSoundCompleteCB(this.soundCompleteCBName);
    this.flashObjectInitalized = true;
    }catch(e)
    {
    var parent = this;
    var fn = function()
      {
      parent.checkFlashObjectInitalized();
      }
    setTimeout(fn, 200);
    }
  }

flashaudioplayer.prototype.monitorEvents = function()
  {
  if (this.oldClipLength != this.getClipLength())
    {
    this.oldClipLength = this.getClipLength();
    if (this.clipLenMon != null)
      {
      this.clipLenMon.run(this.oldClipLength);
      }
    }

  if (this.oldState != this.state())
    {
    this.oldState = this.state();
    if (this.stateMon != null)
      {
      this.stateMon.run(this.oldState, this.textState());
      }
    }

  }

flashaudioplayer.prototype.getFlashObject = function()
  {
  return (isExplorer()) ? window[this.flashObjectName] : document[this.flashObjectName];
  }


flashaudioplayer.prototype.setUrl = function(url)
  {
  var parent = this;
  try
    {
    this.getFlashObject().setUrl(url);
    }catch(e)
    {
    var fn = function()
      {
      parent.setUrl(url);
      }
    setTimeout(fn, 100);
    }
  }

flashaudioplayer.prototype.play = function()
  {
  this.getFlashObject().playSound();
  }

flashaudioplayer.prototype.stop = function()
  {
  this.getFlashObject().stopSound();
  }

flashaudioplayer.prototype.pause = function()
  {
  this.getFlashObject().pauseSound();
  }

flashaudioplayer.prototype.state = function()
  {
  try
    {
    return this.getFlashObject().getState();
    }catch(e)
    {
    return 0;
    }
  }

flashaudioplayer.prototype.textState = function()
  {
  var states = new Array('Stopped', 'Contacting', 'Buffering', 'Playing', 'Paused', 'Seeking');
  return states[this.state()];
  }

flashaudioplayer.prototype.getPosition = function()
  {
  try
    {
    return this.getFlashObject().getPosition();
    }catch(e)
    {
    return 0;
    }
  }

flashaudioplayer.prototype.setPosition = function(position)
  {
  this.getFlashObject().setPosition(position);
  }

flashaudioplayer.prototype.getClipLength = function()
  {
  try
    {
    return this.getFlashObject().getClipLength();
    }catch(e)
    {
    return 0;
    }
  }


function createHowTo()
  {
  var howTo = divToContainer(document.createElement('div'));
  howTo.buttonTitle = 'HOW TO';
  howTo.style['overflow'] = 'auto';

  var title = document.createElement('div');
  title.className = 'main_page_title_text';
  title.appendChild(document.createTextNode('SikhShabads.com, How To?'));
  howTo.appendChild(title);

  var howTos = new Array();
  howTos[howTos.length] = {'question':'How to use the media browser?', 'answer':'In the top menu, clicking the "MEDIA" button, will load up the media browser. The browser is a simple tree like structure that makes categorizing and finding shabads and other media simple and easy. Clicking on the bold names will either expand or contract that branch of the tree. Under the different branches of the tree, clicking on a media will load that media into the player.'};
  howTos[howTos.length] = {'question':'How to use the player?', 'answer':'The player is accessible by the button in the top menu labeled "PLAYER." When a media is loaded into the player, it will also load up all of the information associated with that media, such as captions. On top of the player is a dropdown labeled "Captions." If someone has submitted captions for the media, they will appear their. Towards the bottom of the player there are two sliders. The bottom slider is a normal slider that allows a user to browse the media like sliders in most players. The top slider however, is used to browse the media more accurately. This slider is useful when you are reading captions and you need to listen to a line over again or when you are editing captions. On top of the top slider is where the caption lines can be visually seen relative to their times. The lines are grey squares that move across the top slider. The line in the black square is the currently displayed line.'};
  howTos[howTos.length] = {'question':'How to use the user menu?', 'answer':'The user menu is used to track users and their privileges. If you are not contributing captions or other help, you do not need to sign up in order to use SikhShabads.com. In the future we will use these accounts to create a community.'};
  howTos[howTos.length] = {'question':'How to contribute?', 'answer':'If you would like to contribute please e-mail us at thecheatah@gmail.com or instant message us using AOL instant messenger screen name: "thecheatah." We currently need help in creating captions for Shabads and Paath. If you find a Shabad or other media for which you would like to create captions for not on this site, contact us and we will gladly place it on SikhShabads.com.'};
  howTos[howTos.length] = {'question':'', 'answer':''};

  for(var i = 0; i < howTos.length; i++)
    {
    title = document.createElement('div');
    title.className = 'main_page_info_title';
    title.appendChild(document.createTextNode(howTos[i]['question']));
    howTo.appendChild(title);

    title = document.createElement('div');
    title.className = 'main_page_paragraph';
    title.appendChild(document.createTextNode(howTos[i]['answer']));
    howTo.appendChild(title);
    }

  return howTo;
  }
function initApplication(buttonCont, contentCont)
  {
  var tabs = new tabHandler(contentCont);
  app.addComponent('mainTabHandler', tabs);
  app.addFunction('mainTabHandler', 'selectTab', new objfn('selectTab', tabs));

  var tabPages = new Array();
  tabPages[tabPages.length] = createMainPage();
  tabPages[tabPages.length] = createMediaBrowser();
  tabPages[tabPages.length] = createPlayer();
  tabPages[tabPages.length] = createHowTo();

  for(var i = 0; i < tabPages.length; i++)
    {
    var button = document.createElement('div');
    var text = document.createElement('div');
    text.appendChild(document.createTextNode(tabPages[i].buttonTitle));
    text.className = 'main_button_text';
    button.appendChild(text);
    divToButton(button, 'main_button_up', 'main_button_down', 'main_button_hl', 100, 22);
    buttonCont.addContainer(button, 100);
    tabPages[i].layerID = contentCont.addContainer(tabPages[i]);
    tabs.addTab(button, tabPages[i].layerID);
    }

  tabs.selectTab(0);

  }
function lineSlideMonitor(slideCnt, precisionSlider, capMan)
  {
  this.slideCnt = slideCnt;
  this.capMan = capMan;
  this.precisionSlider = precisionSlider;

  this.lines = new Array();

  this.searchNewLines = function(currPos)
    {
    var workingWidth = this.precisionSlider.sliderMax;
    var halfTimeSpan = ((workingWidth/2)*app.cach.get('precisionSliderMillisecondsPerPixel'))/1000;


    var minTime = (currPos - halfTimeSpan);
    var maxTime = (currPos + halfTimeSpan);
    var startingIndex = this.capMan.getCurrentCaption(minTime);
    if (startingIndex == null)
      {
      startingIndex = 0;
      }else
      {
      startingIndex++;
      }

    if (startingIndex < this.capMan.captions.length)
      {
      var currMaxTime = this.capMan.captions[startingIndex]['time'];
      while (currMaxTime < maxTime)
        {
        this.addLine(startingIndex);
        startingIndex++;
        if (startingIndex == this.capMan.captions.length)
          {
          break;
          }
        currMaxTime = this.capMan.captions[startingIndex]['time'];
        }
      }
    this.updateCurrentLines(minTime, maxTime, workingWidth);
    }

  this.updateCurrentLines = function(minTime, maxTime, workingWidth)
    {
    for(var i = 0; i < this.lines.length; i++)
      {
      if (this.lines[i] != null)
        {
        this.lines[i].updateSelf(minTime, maxTime, workingWidth);
        }
      }
    }

  this.addLine = function(index)
    {
    var freeLine = null;
    for(var i = 0; i < this.lines.length; i++)
      {
      if (this.lines[i] == null)
        {
        if (freeLine == null)
          {
          freeLine = i;
          }
        }else
        {
        if (this.lines[i].lineIndex == index)
          {
          return;
          }
        }
      }
    if (freeLine == null)
      {
      freeLine = i;
      }
    this.lines[freeLine] = new captionLineSlider(this.slideCnt, this, index, this.capMan.captions[index]);
    }

  this.removeLine = function(index)
    {
    for(var i = 0; i < this.lines.length; i++)
      {
      if (this.lines[i] != null)
        {
        if (this.lines[i].lineIndex == index)
          {
          this.lines[i] = null;
          }
        }
      }
    }

  this.clearLines = function()
    {
    for(var i = 0; i < this.lines.length; i++)
      {
      if (this.lines[i] != null)
        {
        this.lines[i].updateSelf(0, -1, 10);
        }
      }
    }

  }

function captionLineSlider(sliderLoc, slideMon, lineIndex, capLine)
  {
  this.sliderLoc = sliderLoc;
  this.slideMon = slideMon;
  this.lineIndex = lineIndex;
  this.capLine = capLine;

  this.pointerDiv = document.createElement('div');
  this.pointerDiv.style['position'] = 'absolute';
  this.pointerDiv.style['height'] = '20px';
  this.pointerDiv.style['width'] = '20px';
  this.sliderLoc.appendChild(this.pointerDiv);
  this.pointerDiv.parent = this;

  this.sliderInfo = document.createElement('div');
  this.sliderInfo.style['height'] = '20px';
  this.sliderInfo.style['width'] = '100px';
  this.sliderInfo.style['top'] = '-24px';
  this.sliderInfo.style['left'] = '5px';
  this.sliderInfo.style['position'] = 'absolute';
  this.sliderInfo.style['display'] = 'none';

  var styler = document.createElement('span');
  styler.className = 'player_media_popup_text';

  this.labelText = document.createTextNode('test');
  styler.appendChild(this.labelText);
  this.sliderInfo.appendChild(styler);
  this.pointerDiv.appendChild(this.sliderInfo);

  this.draging = false;

  this.pointerDiv.onmousedown = function(evnt)
    {
    if (isExplorer())
      {
      evnt = event;
      }

    if (!this.parent.slideMon.capMan.editMode)
      {
      app.getFunction('player', 'setPosition').run(this.parent.capLine['time']*1000+10);
      return;
      }

    if (this.parent.slideMon.capMan.previousRenderedCap == this.parent.lineIndex && this.parent.slideMon.capMan.editing)
      {
      if (this.parent.mousemoveid != null)
        {
        app.docEvents.removeEvent('mousemove', this.parent.mousemoveid);
        }
      if (this.parent.mouseupid != null)
        {
        app.docEvents.removeEvent('mouseup', this.parent.mouseupid);
        }
      this.parent.mouseupid = app.docEvents.addEvent('mouseup', new objfn('mouseup', this));
      this.parent.mousemoveid = app.docEvents.addEvent('mousemove', new objfn('mousemove', this));
      this.parent.prevClientX = evnt.clientX;
      this.parent.draging = true;
      this.parent.sliderInfo.style['display'] = 'block';
      this.parent.labelText.nodeValue = this.parent.slideMon.precisionSlider.posToTextFn.run(this.parent.currPixelPos);
      return;
      }
    if (this.parent.slideMon.capMan.didEditorChangeLineCaptions())
      {
      alert('You are currently editing another line. Please save or cancel it before editing another.');
      return;
      }
    this.parent.slideMon.capMan.setEditingLine(this.parent.lineIndex);
    }

  this.pointerDiv.mousemove = function(evnt)
    {
    if (!this.parent.draging) {return;}
    if (isExplorer())
      {
      evnt = event;
      }
    var xChange = evnt.clientX - this.parent.prevClientX;
    this.parent.prevClientX = evnt.clientX;
    this.parent.currPixelPos = this.parent.currPixelPos + xChange;
    var pixelPos = this.parent.currPixelPos.toString() + 'px';
    if (this.style['left'] != pixelPos)
      {
      this.style['left'] = pixelPos;
      }

    this.parent.labelText.nodeValue = this.parent.slideMon.precisionSlider.posToTextFn.run(this.parent.currPixelPos);
    }

  this.pointerDiv.mouseup = function(evnt)
    {
    if (!this.parent.draging) {return;}
    if (isExplorer())
      {
      evnt = event;
      }
    this.parent.draging = false;

    if (this.parent.mousemoveid != null)
      {
      app.docEvents.removeEvent('mousemove', this.parent.mousemoveid);
      }
    if (this.parent.mouseupid != null)
      {
      app.docEvents.removeEvent('mouseup', this.parent.mouseupid);
      }
    this.parent.sliderInfo.style['display'] = 'none';

    var timeText = this.parent.slideMon.precisionSlider.posToTextFn.run(this.parent.currPixelPos);

    this.parent.slideMon.capMan.timeInput.value = timeText;
    this.parent.slideMon.capMan.timeInput.onblur();
    }

  this.updateSelf = function(minTime, maxTime, workingWidth)
    {
    if (this.capLine['time'] < minTime || this.capLine['time'] > maxTime)
      {
      this.sliderLoc.removeChild(this.pointerDiv);
      this.slideMon.removeLine(this.lineIndex);
      return;
      }

    if (this.draging)
      {
      return;
      }

    var offSetTime = this.capLine['time'] - minTime;
    maxTime = maxTime - minTime;
    this.currPixelPos = Math.round((offSetTime/maxTime)*workingWidth);
    var pixelPos = this.currPixelPos.toString() + 'px';
    if (this.pointerDiv.style['left'] != pixelPos)
      {
      this.pointerDiv.style['left'] = pixelPos;
      }

    var className;
    if (this.slideMon.capMan.previousRenderedCap == this.lineIndex)
      {
      className = 'player_media_slider_line_button_hl';
      }else
      {
      className = 'player_media_slider_line_button';
      }

    if (this.pointerDiv.className != className)
      {
      this.pointerDiv.className = className;
      }

    }
  }









function createMainPage()
  {
  var main = divToHorizontalSplitContainer(document.createElement('div'));
  main.buttonTitle = 'MAIN';
//  main.style['background'] = "#FF0000";

  var intro = divToContainer(document.createElement('div'));
  var title = document.createElement('div');
  title.className = 'main_page_title_text';
  title.appendChild(document.createTextNode('Welcome to SikhShabads.com!'));
  intro.appendChild(title);
  var about = document.createElement('div');
  about.className = 'main_page_paragraph';
  about.appendChild(document.createTextNode('Welcome to SikhShabads.com. This site is designed to help you understand the meanings behind the shabads and prayers that we read and listen to everyday. We are creating "captions": for each one of the shabads and prayers. Captions are lines of text that change according to the audio that is currently being played. In these captions, we try to place Gurmukhi, English pronunciation, and translations. Thus, as the audio is being played, we can, at a quick glance, understand its meaning. If you would like to contribute or if you have questions, please visit the "How To" section located in the top menu. For comments you can e-mail us at SikhShabads@gmail.com.'));
  intro.appendChild(about);
  intro.style['overflow'] = 'auto';
  main.addContainer(intro, 200);


  var updatedMediaInfo = divToContainer(document.createElement('div'));
  

  var rowRenderer = function(input, inputRow, inputColPos, inputRowPos)
    {
    var tmp = document.createElement('div');
    tmp.className = (inputRowPos%2==0?'sslistview_cell_even':'sslistview_cell_odd');
    tmp.appendChild(document.createTextNode(input.toString()));


    return tmp;
    }

  var toolTipRowRenderer = function(input, inputRow, inputColPos, inputRowPos)
    {
    var tmp = document.createElement('div');
    tmp.className = (inputRowPos%2==0?'sslistview_cell_even':'sslistview_cell_odd');
    tmp.appendChild(document.createTextNode(input.toString()));

    tmp.onmouseover = function()
      {
      app.tip.request(tmp.parentNode);
      }

    tmp.onmouseout = function()
      {
      app.tip.clear();
      }
    return tmp;
    }

  var sortByTimestamp = function(column, listView)
    {
    var attr = 'timestamp';
    var prevSort = listView.dataSet.getSort(attr);
    var prevSortPos = listView.dataSet.getSortPos(attr);
    if (prevSortPos != 0)
      {
      prevSort = null;
      }
    if (prevSort == 'asc')
      {
      listView.dataSet.setSort(attr, false);
      }else
      {
      listView.dataSet.setSort(attr, true);
      }
    listView.refreshData();
    }

  var playShabadRenderer = function(input, inputRow, inputColPos, inputRowPos)
    {
    var tmp = document.createElement('div');
    tmp.className = (inputRowPos%2==0?'sslistview_cell_even':'sslistview_cell_odd');
    var spn = document.createElement('div');
    spn.className = 'sslistview_link';
    spn.appendChild(document.createTextNode(input.toString()));
    spn.onclick = function()
      {
      app.getFunction('mediaManager', 'loadMedia').run(inputRow['shabadid']);
      }
    tmp.onmouseover = function()
      {
      app.tip.request(tmp.parentNode);
      }

    tmp.onmouseout = function()
      {
      app.tip.clear();
      }
    tmp.appendChild(spn);
    return tmp;
    }

  var columns = {
    0:{
      'label':'',
      'attr':'position',
      'width':20,
      'widthType':'.',
      'renderer':rowRenderer
      },
    1:{
      'label':'Name',
      'attr':'name',
      'width':70,
      'widthType':'%',
      'renderer':playShabadRenderer
      },
    2:{
      'label':'By',
      'attr':'user',
      'width':100,
      'widthType':'.',
      'renderer':rowRenderer
      },
    3:{
      'label':'Added',
      'attr':'date',
      'width':70,
      'widthType':'.',
      'renderer':rowRenderer,
      'labelClick':sortByTimestamp
      }
    };

  var newCaptions = divToContainer(document.createElement('div'));
  var numericSorter = function(a, b)
    {
    a = parseFloat(a);
    b = parseFloat(b);
    if (a == b)
      {
      return 0;
      }
    if (a < b)
      {
      return -1;
      }
    return 1;
    }

  var numericSorterRev = function(a, b)
    {
    a = parseFloat(a);
    b = parseFloat(b);
    if (a == b)
      {
      return 0;
      }
    if (a > b)
      {
      return -1;
      }
    return 1;
    }

  listView(
    newCaptions,
    new ssdataset('dataset_newcaptions', 'app/jsresponder.php', false, {'position':numericSorter, 'timestamp':numericSorterRev}),
    columns,
    75,
    300,
    13,
    15,
    'sslistview_label',
    0,
    10
    );

  columns = {
    0:{
      'label':'',
      'attr':'position',
      'width':20,
      'widthType':'.',
      'renderer':rowRenderer
      },
    1:{
      'label':'Name',
      'attr':'name',
      'width':50,
      'widthType':'%',
      'renderer':playShabadRenderer
      },
    2:{
      'label':'Location',
      'attr':'directory',
      'width':50,
      'widthType':'%',
      'renderer':toolTipRowRenderer
      },
    3:{
      'label':'Added',
      'attr':'date',
      'width':70,
      'widthType':'.',
      'renderer':rowRenderer,
      'labelClick':sortByTimestamp
      }
    };

  var newMedia = divToContainer(document.createElement('div'));
  listView(
    newMedia,
    new ssdataset('dataset_newmedia', 'app/jsresponder.php', false, {'position':numericSorter, 'timestamp':numericSorterRev}),
    columns,
    75,
    300,
    13,
    15,
    'sslistview_label',
    0,
    10
    );



  var name = document.createElement('div');
  name.appendChild(document.createTextNode('Newly Added Captions'));
  name.className = "sslistview_title";
  name.style['position'] = 'relative';
  name.style['left'] = '10px';
  newCaptions.style['position'] = 'relative';
  newCaptions.style['left'] = '10px';

  updatedMediaInfo.appendChild(name);
  updatedMediaInfo.appendChild(newCaptions);

  name = document.createElement('div');
  name.appendChild(document.createTextNode('Newly Added Media'));
  name.className = "sslistview_title";
  name.style['position'] = 'relative';
  name.style['left'] = '10px';

  newMedia.style['position'] = 'relative';
  newMedia.style['left'] = '10px';

  updatedMediaInfo.appendChild(name);
  updatedMediaInfo.appendChild(newMedia);

  updatedMediaInfo.lists = new Array();
  updatedMediaInfo.lists[0] = newCaptions;
  updatedMediaInfo.lists[1] = newMedia;


  updatedMediaInfo.resizeChildren = function()
    {
    var height = (this.currY-40)/this.lists.length;
    for(var i = 0; i < this.lists.length; i++)
      {
      this.lists[i].setSize(this.currX-20, height);
      }
    }

  main.addContainer(updatedMediaInfo);

  return main;
  }


function createMediaBrowser()
  {
  var mainDiv = document.createElement('div');
  divToContainer(mainDiv);
  mainDiv.initalized = false;
  mainDiv.onvisible = function()
    {
    if (!this.initalized)
      {
      initMediaFileBrowser(this);
      this.initalized = true;
      }
    }
  mainDiv.buttonTitle = "MEDIA";
  return mainDiv;
  }

function initMediaBrowser(div, exitFn)
  {
  while(div.childNodes.length != 0)
    {
    div.removeChild(div.childNodes[0]);
    }

  var title = document.createElement('div');
  title.className = 'media_browser_title';
  title.appendChild(document.createTextNode('Media Browser'));
  div.appendChild(title);

  var mediaDiv = document.createElement('div');
  div.appendChild(mediaDiv);

  div.style['overflow'] = 'auto';

  var browser = new mediaBrowser(mediaDiv, exitFn);
  app.addComponent('mediaBrowser', browser);

  }

function mediaBrowser(loc, exitFn)
  {
  this.exitFn = exitFn;
  this.loc = loc;

  this.userStatusLoc = document.createElement('div');
  this.userStatusLoc.className = "media_browser_desc media_browser_listing";
  this.loc.appendChild(this.userStatusLoc);

  this.dirTreeLoc = document.createElement('div');
  this.loc.appendChild(this.dirTreeLoc);


  this.userStatusLoc.appendChild(document.createTextNode('Below, click on the bold names to expand tree. ['));
  var link = document.createElement('span');
  link.className = 'media_browser_link';
  link.appendChild(document.createTextNode('View Directories'));
  link.parent = this.parent;

  this.rootDir = new mediaDirectory(0, this.dirTreeLoc, true);

  var parent = this;
  link.onclick = function()
    {
    parent.exitFn.run();
    }

  this.userStatusLoc.appendChild(link);
  this.userStatusLoc.appendChild(document.createTextNode(']'));

/*
  this.readUserStatus = function(userObj)
    {
    while(this.userStatusLoc.childNodes.length != 0)
      {
      this.userStatusLoc.removeChild(this.userStatusLoc.childNodes[0]);
      }

    if(app.auth.inGroup('media_browser_admin'))
      {
      this.userStatusLoc.appendChild(document.createTextNode('You are a media browser admin. ['));
      var link = document.createElement('span');
      link.className = 'media_browser_link';
      link.appendChild(document.createTextNode('Edit Directories'));
      link.parent = this;

      link.onclick = function()
        { 
        while(this.parent.userStatusLoc.childNodes.length != 0)
          {
          this.parent.userStatusLoc.removeChild(this.parent.userStatusLoc.childNodes[0]);
          }
        this.parent.userStatusLoc.appendChild(document.createTextNode('Below, click on the bold names to expand tree. ['));
        var link = document.createElement('span');
        link.className = 'media_browser_link';
        link.appendChild(document.createTextNode('View Directories'));
        link.parent = this.parent;

        this.parent.rootDir = new mediaDirectory(0, this.parent.dirTreeLoc, true);

        link.onclick = function()
          { 
          this.parent.readUserStatus(app.cach.get('userInfo'));
          this.parent.rootDir = new mediaDirectory(0, this.parent.dirTreeLoc, false);
          }

        this.parent.userStatusLoc.appendChild(link);
        this.parent.userStatusLoc.appendChild(document.createTextNode(']'));
        }

      this.userStatusLoc.appendChild(link);
      this.userStatusLoc.appendChild(document.createTextNode('] ['));

      var link = document.createElement('a');
      link.className = 'media_browser_link';
      link.appendChild(document.createTextNode('Edit Media'));
      link.href = 'editmedia.php';
      link.target = '_blank';
      this.userStatusLoc.appendChild(link);
      this.userStatusLoc.appendChild(document.createTextNode(']'));


      this.editable = true;
      }else
      {
      if (this.editable == true)
        {
        this.rootDir = new mediaDirectory(0, this.dirTreeLoc, false);
        }
      this.userStatusLoc.appendChild(document.createTextNode('Below, click on the bold names to expand tree.'));
      this.editable = false;
      }
    }
  app.cach.bind('userInfo', new objfn('readUserStatus', this));
*/
  }

function mediaDirectory(folderID, loc, editable)
  {
  this.folderID = folderID;
  this.loc = loc;
  this.editable = editable;

  loc.className = 'media_browser_listing';

  while(loc.childNodes.length != 0)
    {
    loc.removeChild(loc.childNodes[0]);
    }

  var loading = document.createElement('div');
  loading.appendChild(document.createTextNode('Loading...'));
  loading.className = 'media_browser_text';
  loc.appendChild(loading);


  this.loadListing = function()
    {
    var rsp = new phpRequest(new objfn('readListing', this), 'getListing', 'media_browser_responder', 'app/jsresponder.php');
    rsp.run(this.folderID);
    }

  this.loadListing();

  this.readListing = function(listing)
    {
    while(this.loc.childNodes.length != 0)
      {
      this.loc.removeChild(this.loc.childNodes[0]);
      }

    if (listing.length == 0 && !this.editable)
      {
      var loading = document.createElement('div');
      loading.appendChild(document.createTextNode('Empty'));
      loading.className = 'media_browser_text';
      this.loc.appendChild(loading);
      }

    var folderDiv;
    var nameDiv;
    var descDiv;
    var childDiv;
    var editDiv;

    for(var i = 0; i < listing.length; i++)
      {
      if (listing[i]['type'] == 'folder')
        {
        folderDiv = document.createElement('div');
        folderDiv.className = 'media_browser_element';
        nameDiv = document.createElement('span');
        nameDiv.className = 'media_browser_link';
        nameDiv.appendChild(document.createTextNode(listing[i]['name']));
        descDiv = document.createElement('div');
        descDiv.className = 'media_browser_desc';
        descDiv.appendChild(document.createTextNode(listing[i]['description']));

        folderDiv.appendChild(nameDiv);
        if (this.editable)
          {
          editDiv = document.createElement('span');
          editDiv.className = 'media_browser_link';
          editDiv.appendChild(document.createTextNode('edit'));
          editDiv.parent = this;
          editDiv.folderDiv = folderDiv;
          editDiv.folderInfo = listing[i];
          editDiv.onclick = function()
            {
            clearChildNodes(this.folderDiv);
            this.nameInput = document.createElement('input');
            this.nameInput.type = 'text';
            this.nameInput.value = this.folderInfo['name'];
            this.nameInput.className = 'media_browser_input_box';
            this.descInput = document.createElement('input');
            this.descInput.type = 'text';
            this.descInput.value = this.folderInfo['description'];
            this.descInput.className = 'media_browser_input_box';

            this.cancelInput = document.createElement('input');
            this.cancelInput.type = 'button';
            this.cancelInput.value = 'Cancel';
            this.cancelInput.className = 'media_browser_input_button';
            this.cancelInput.parent = this;
            this.cancelInput.onclick = function()
              {
              this.parent.parent.loadListing();
              }

            this.deleteInput = document.createElement('input');
            this.deleteInput.type = 'button';
            this.deleteInput.value = 'Delete';
            this.deleteInput.className = 'media_browser_input_button';
            this.deleteInput.parent = this;
            this.deleteInput.onclick = function()
              {
              var rsp = new phpRequest(new objfn('loadListing', this.parent.parent), 'deleteFolder', 'media_browser_responder', 'app/jsresponder.php');
              rsp.run(this.parent.folderInfo['id']);
              this.value = 'Deleting...';
              this.disabled = true;
              }

            this.saveInput = document.createElement('input');
            this.saveInput.type = 'button';
            this.saveInput.value = 'Save';
            this.saveInput.className = 'media_browser_input_button';
            this.saveInput.parent = this;
            this.saveInput.onclick = function()
              {
              var rsp = new phpRequest(new objfn('loadListing', this.parent.parent), 'setFolderInfo', 'media_browser_responder', 'app/jsresponder.php');
              rsp.run(this.parent.folderInfo['id'], {'name':this.parent.nameInput.value, 'description':this.parent.descInput.value});
              this.value = 'Saving...';
              this.disabled = true;
              }


            this.folderDiv.appendChild(this.nameInput);
            this.folderDiv.appendChild(this.cancelInput);
            this.folderDiv.appendChild(this.deleteInput);
            this.folderDiv.appendChild(document.createElement('br'));
            this.folderDiv.appendChild(this.descInput);
            this.folderDiv.appendChild(this.saveInput);
            }

          folderDiv.appendChild(document.createTextNode(' ['));
          folderDiv.appendChild(editDiv);
          folderDiv.appendChild(document.createTextNode(']'));
          }

        folderDiv.appendChild(descDiv);
        this.loc.appendChild(folderDiv);

        childDiv = document.createElement('div');
        nameDiv.childDiv = childDiv;
        nameDiv.childID = listing[i]['id'];
        nameDiv.parent = this;
        folderDiv.appendChild(childDiv);

        nameDiv.onclick = this.showDir;
        }else if(listing[i]['type'] == 'file' && !this.editable)
        {
        var mediaDiv = document.createElement('div');
        mediaDiv.className = 'media_browser_desc';
//        mediaDiv.appendChild(document.createTextNode('['));

//        var playDiv = document.createElement('span');
//        playDiv.appendChild(document.createTextNode('Play'));
//        playDiv.className = 'media_browser_link';
//        mediaDiv.appendChild(playDiv);
//        mediaDiv.appendChild(document.createTextNode('] '));

        nameDiv = document.createElement('span');
        nameDiv.appendChild(document.createTextNode(listing[i]['name']));
        nameDiv.className = 'media_browser_link';
        nameDiv.mediaID = listing[i]['id'];
        nameDiv.onclick = function()
          {
          app.getFunction('mediaManager', 'loadMedia').run(this.mediaID);
          }

        mediaDiv.appendChild(nameDiv);

        if (listing[i]['description'] != '')
          {
          descDiv = document.createElement('span');
          descDiv.appendChild(document.createTextNode(' - ' + listing[i]['description']));
          mediaDiv.appendChild(descDiv);
          }

        this.loc.appendChild(mediaDiv);
        }
      }

    if (this.editable)
      {
      var div = document.createElement('div');
      div.className = 'media_browser_element';
      var addNew = document.createElement('span');
      addNew.appendChild(document.createTextNode('Add New'));
      addNew.className = 'media_browser_link';
      addNew.parent = div;
      div.parent = this;
      addNew.onclick = function()
        {
        clearChildNodes(this.parent);
        this.nameInput = document.createElement('input');
        this.nameInput.type = 'text';
        this.nameInput.value ='';
        this.nameInput.className = 'media_browser_input_box';
        this.descInput = document.createElement('input');
        this.descInput.type = 'text';
        this.descInput.value = '';
        this.descInput.className = 'media_browser_input_box';

        this.saveInput = document.createElement('input');
        this.saveInput.type = 'button';
        this.saveInput.value = 'Save';
        this.saveInput.className = 'media_browser_input_button';
        this.saveInput.parent = this;
        this.saveInput.onclick = function()
          {
          var rsp = new phpRequest(new objfn('loadListing', this.parent.parent.parent), 'addNew', 'media_browser_responder', 'app/jsresponder.php');
          rsp.run(this.parent.parent.parent.folderID, {'name':this.parent.nameInput.value, 'description':this.parent.descInput.value});
          this.value = 'Saving...';
          this.disabled = true;
          }


        this.parent.appendChild(this.nameInput);
        this.parent.appendChild(document.createElement('br'));
        this.parent.appendChild(this.descInput);
        this.parent.appendChild(this.saveInput);
        }
      div.appendChild(addNew);
      this.loc.appendChild(div);
      }

    }

  this.showDir = function()
    {
    var t = document.createElement('div');
    this.childDiv.appendChild(t);
    this.subDir = new mediaDirectory(this.childID, t, this.parent.editable);
    this.onclick = this.parent.hideDir;
    }

  this.hideDir = function()
    {
    while(this.childDiv.childNodes.length != 0)
      {
      this.childDiv.removeChild(this.childDiv.childNodes[0]);
      }
    this.onclick = this.parent.showDir;
    }

  }


function initMediaFileBrowser(mainDiv)
  {
  clearChildNodes(mainDiv);

  createLayeredContainer(null, null, mainDiv);

  var editorDiv =  document.createElement('div');
  divToContainer(editorDiv);


  var div = document.createElement('div');
  divToVerticalSplitContainer(div);

  div.myLayerID = mainDiv.addContainer(div);
  div.editorDivID = mainDiv.addContainer(editorDiv);
  div.layerManger = mainDiv;
  initMediaBrowser(editorDiv, new objfn('viewMode', div));

  div.viewMode = function()
    {
    this.rootFolder = new mediaBrowserFolderChildren(0, new objfn('reloadFolderDS', this));
    this.layerManger.selectContainer(this.myLayerID);
    }

  div.editMode = function()
    {
    this.layerManger.selectContainer(this.editorDivID);
    }

  var leftPadding = document.createElement('div');
  var rightPadding = document.createElement('div');
  var center = document.createElement('div');
  divToHorizontalSplitContainer(center);
  divToContainer(leftPadding);
  divToContainer(rightPadding);

  div.addContainer(leftPadding, 20);
  div.addContainer(center);
  div.addContainer(rightPadding, 20);




  var title = document.createElement('div');
  divToContainer(title);
  title.className = 'media_browser_title';
  title.appendChild(document.createTextNode('Media Browser'));
  center.addContainer(title, 22);

  var folderTitle = document.createElement('div');
  divToContainer(folderTitle);
  folderTitle.className = 'media_browser_desc';


  var folderListTitle = document.createElement('div');
  folderListTitle.className = 'media_browser_list_title';
  folderListTitle.appendChild(document.createTextNode('Folders: '));
  folderTitle.appendChild(folderListTitle);

  div.folderListInfo = document.createElement('div');
  div.folderListInfo.className = 'media_browser_list_info';
  folderTitle.appendChild(div.folderListInfo);

  div.readUserStatus = function(userObj)
    {
    clearChildNodes(this.folderListInfo);
    if (app.auth.inGroup('media_browser_admin'))
      {
      this.folderListInfo.appendChild(document.createTextNode('['));
      var link = document.createElement('span');
      link.className = 'media_browser_link';
      link.appendChild(document.createTextNode('Edit Directories'));

      var parent = this;
      link.onclick = function()
        {
        parent.editMode();
        }

      this.folderListInfo.appendChild(link);
      this.folderListInfo.appendChild(document.createTextNode('] ['));

      var link = document.createElement('a');
      link.className = 'media_browser_link';
      link.appendChild(document.createTextNode('Edit Media'));
      link.href = 'editmedia.php';
      link.target = '_blank';
      this.folderListInfo.appendChild(link);
      this.folderListInfo.appendChild(document.createTextNode(']'));

      }else
      {
      this.folderListInfo.appendChild(document.createTextNode('Click folder to expand tree. Click name to load media.'));
      }
    this.viewMode();
    }

  center.addContainer(folderTitle, 14);

  div.folderDS = new dataset(new Array('id', 'depth', 'open', 'name', 'description', 'media'), null);

  var folderColRenderer = function(input, inputRow, inputColPos, inputRowPos)
    {
    var cell = document.createElement('div');
    var spacing = document.createElement('div');
    var spacing2 = document.createElement('div');
    var image = document.createElement('img');
    var text = document.createElement('div');

    cell.className = 'sslistview_cell';

    spacing.className = 'media_browser_cell_element_small_spacing';
    spacing2.className = 'media_browser_cell_element_small_spacing';
    image.className = 'media_browser_cell_element_image';
    text.className = 'media_browser_cell_folder_text';
    spacing.style['width'] = (inputRow['depth']*16).toString() + 'px';
    spacing.style['height'] = '2px';
    spacing2.style['width'] = '2px';
    spacing2.style['height'] = '2px';
    image.style['width'] = '16px';
    image.style['height'] = '16px';
    text.appendChild(document.createTextNode(input.toString()));

    if (inputRow['open'] == 1)
      {
      image.src = 'app/images/icons/open_folder.gif';
      image.onclick = function()
        {
        div.rootFolder.closeFolder(inputRow['id']);
        }
      }else if(inputRow['open'] == 0)
      { 
      image.src = 'app/images/icons/closed_folder.gif';
      image.onclick = function()
        {
        div.rootFolder.openFolder(inputRow['id']);
        }
      }else if(inputRow['open'] == -1)
      {
      text.className = 'media_browser_cell_element_dimstate';
      cell.appendChild(spacing);
      cell.appendChild(text);
      return cell;
      }

    text.onclick = function()
      {
      div.loadMediaFromFolder(inputRow['id']);
      }

    cell.appendChild(spacing);
    cell.appendChild(image);
    cell.appendChild(spacing2);
    cell.appendChild(text);

    cell.onmouseover = function()
      {
      app.tip.request(cell);
      }

    cell.onmouseout = function()
      {
      app.tip.clear();
      }

    return cell;
    }

  var normalColRenderer = function(input, inputRow, inputColPos, inputRowPos)
    {
    if (input == null)
      {
      input = "";
      }
    var cell = document.createElement('div');
    cell.className = 'sslistview_cell';
    cell.appendChild(document.createTextNode(input.toString()));

    cell.onmouseover = function()
      {
      app.tip.request(cell);
      }

    cell.onmouseout = function()
      {
      app.tip.clear();
      }

    return cell;
    }

  var centerColRenderer = function(input, inputRow, inputColPos, inputRowPos)
    {
    if (input == null)
      {
      input = "";
      }
    var cell = document.createElement('div');
    cell.className = 'sslistview_cell_centered';
    cell.appendChild(document.createTextNode(input.toString()));
    return cell;
    }

  var nullLabelClick = function(column, listView) {};
  var columns = {
    0:{
      'label':'Name',
      'attr':'name',
      'width':35,
      'widthType':'%',
      'renderer':folderColRenderer,
      'labelClick':nullLabelClick
      },
    1:{
      'label':'Description',
      'attr':'description',
      'width':65,
      'widthType':'%',
      'renderer':normalColRenderer,
      'labelClick':nullLabelClick
      },
    2:{
      'label':'Media',
      'attr':'media',
      'width':45,
      'widthType':'.',
      'renderer':centerColRenderer,
      'labelClick':nullLabelClick
      }
    };
  div.folderView = document.createElement('div');
  listView(
    div.folderView,
    div.folderDS,
    columns,
    0,
    0,
    13,
    17,
    'sslistview_label',
    0,
    null
    );
  center.addContainer(div.folderView, 150);

  div.reloadFolderDS = function(folder, depth)
    {
    if (depth == null)
      {
      folder = (this.rootFolder!=null?this.rootFolder:folder);
      depth = 0;
      this.folderDS.clearSort();
      this.folderDS.clear();
      }
    var folderSet = null;

///*
    if (folder.children.length == 0 && folder.loading == false)
      {
      folderSet = {
        'id':null,
        'depth':depth,
        'open':-1,
        'name':'No Sub Folders',
        'description':''
        };
      this.folderDS.add(folderSet);
      }
//*/
    if (folder.children.length == 0 && folder.loading == true)
      {
      folderSet = {
        'id':null,
        'depth':depth,
        'open':-1,
        'name':'Loading...',
        'description':''
        };
      this.folderDS.add(folderSet);
      }

    for (var i = 0; i < folder.children.length; i++)
      {
      folderSet = {
        'id':folder.children[i]['id'],
        'depth':depth,
        'open':(folder.children[i]['children']==null?0:1),
        'name':folder.children[i]['name'],
        'description':folder.children[i]['description'],
        'media':folder.children[i]['media']
        };
      this.folderDS.add(folderSet);
      if (folder.children[i]['children'] != null)
        {
        this.reloadFolderDS(folder.children[i]['children'], depth+1);
        }
      }
    if (depth == 0)
      {
      this.folderView.refreshData();
      }
    }

  div.rootFolder = new mediaBrowserFolderChildren(0, new objfn('reloadFolderDS', div));

  var fileTitle = document.createElement('div');
  divToContainer(fileTitle);
  fileTitle.className = 'media_browser_desc';
  var listTitle = document.createElement('div');
  listTitle.className = 'media_browser_list_title';
  listTitle.appendChild(document.createTextNode('Media: '));
  fileTitle.appendChild(listTitle);

  div.fileListInfo = document.createElement('div');
  div.fileListInfo.className = 'media_browser_list_info';
  div.fileListInfo.appendChild(document.createTextNode('Folder: /'));
  fileTitle.appendChild(div.fileListInfo);

  center.addContainer(fileTitle, 14);


  var fileColRenderer = function(input, inputRow, inputColPos, inputRowPos)
    {
    var cell = document.createElement('div');
    var image = document.createElement('img');
    var text = document.createElement('div');
    var spacing2 = document.createElement('div');
    cell.className = 'sslistview_cell';

    image.className = 'media_browser_cell_element_image';
    text.className = 'media_browser_cell_folder_text';
    image.style['width'] = '16px';
    image.style['height'] = '16px';
    text.appendChild(document.createTextNode(input.toString()));

    image.src = 'app/images/icons/media.gif';

    if (inputRow['id'] == null)
      {
      text.className = 'media_browser_cell_element_dimstate';
      cell.appendChild(text);
      return cell;
      }

    image.onclick = function()
      {
      app.getFunction('mediaManager', 'loadMedia').run(inputRow['id']);
      }

    text.onclick = function()
      {
      app.getFunction('mediaManager', 'loadMedia').run(inputRow['id']);
      }

    cell.appendChild(image);
    cell.appendChild(spacing2);
    cell.appendChild(text);

    cell.onmouseover = function()
      {
      app.tip.request(cell);
      }

    cell.onmouseout = function()
      {
      app.tip.clear();
      }

    return cell;
    }
  var numericSorter = function(a, b)
    {
    a = parseFloat(a);
    b = parseFloat(b);
    if (a == b)
      {
      return 0;
      }
    if (a < b)
      {
      return -1;
      }
    return 1;
    }
  var numericSorterRev = function(a, b)
    {
    a = parseFloat(a);
    b = parseFloat(b);
    if (a == b)
      {
      return 0;
      }
    if (a > b)
      {
      return -1;
      }
    return 1;
    }
  div.fileDS = new dataset(new Array('id', 'name', 'description', 'timestamp', 'date', 'captions', 'downloadURL'), {'timestamp':numericSorterRev});
  div.fileView = document.createElement('div');

  var sortByTimestamp = function(column, listView)
    {
    var attr = 'timestamp';
    var prevSort = listView.dataSet.getSort(attr);
    var prevSortPos = listView.dataSet.getSortPos(attr);
    if (prevSortPos != 0)
      {
      prevSort = null;
      }
    if (prevSort == 'asc')
      {
      listView.dataSet.setSort(attr, false);
      }else
      {
      listView.dataSet.setSort(attr, true);
      }
    listView.refreshData();
    }

  var downloadRenderer = function(input, inputRow, inputColPos, inputRowPos)
    {
    var cell = document.createElement('div');
    if (inputRow['id'] == null)
      {
      return cell;
      }
    var a = document.createElement('a');
    a.appendChild(document.createTextNode('Download'));
    a.target = "_blank";
    a.href = inputRow['downloadURL'];
    cell.className = "sslistview_cell";
    cell.appendChild(a);

    cell.onmouseover = function()
      {
      app.tip.request(cell, "Right click. Then click 'Save Target As...'!");
      }

    cell.onmouseout = function()
      {
      app.tip.clear();
      }

    return cell;
    }

  columns = {
    0:{
      'label':'Name',
      'attr':'name',
      'width':40,
      'widthType':'%',
      'renderer':fileColRenderer,
      'labelClick':null
      },
    1:{
      'label':'Description',
      'attr':'description',
      'width':60,
      'widthType':'%',
      'renderer':normalColRenderer,
      'labelClick':null
      },
    2:{
      'label':'Caps',
      'attr':'captions',
      'width':35,
      'widthType':'.',
      'renderer':centerColRenderer,
      'labelClick':null
      },
    3:{
      'label':'Added',
      'attr':'date',
      'width':75,
      'widthType':'.',
      'renderer':normalColRenderer,
      'labelClick':sortByTimestamp
      },
    4:{
      'label':'',
      'attr':null,
      'width':65,
      'widthType':'.',
      'renderer':downloadRenderer,
      'labelClick':function(c, lv){}
      }
    };
  listView(
    div.fileView,
    div.fileDS,
    columns,
    0,
    0,
    13,
    17,
    'sslistview_label',
    0,
    null
    );
  center.addContainer(div.fileView);

  div.loadMediaFromFolder = function(id)
    {
    this.fileDS.clear();

    var file = {
      'id':null,
      'name':'Loading...',
      'description':'',
      'timestamp':0,
      'date':''
      };
    this.fileDS.add(file);
    this.fileView.refreshData();

    var rsp = new phpRequest(new objfn('loadMedia', this), 'getFolderMedia', 'media_browser_responder', 'app/jsresponder.php');
    rsp.run(id);
    }

  div.loadMedia = function(mediaInfo)
    {
    clearChildNodes(this.fileListInfo);
    this.fileListInfo.appendChild(document.createTextNode(mediaInfo['location']));

    media = mediaInfo['listing'];
    this.fileDS.clear();
    this.fileDS.clearSort();
    var file = null;
    if (media.length == 0)
      {
      file = {
        'id':null,
        'name':'Empty',
        'description':'',
        'timestamp':0,
        'date':''
        };
      this.fileDS.add(file);
      }

    if (mediaInfo['folderID'] != null)
      {
      this.rootFolder.openFolder(mediaInfo['folderID']);
      }

    for (var i = 0; i < media.length; i++)
      {
      file = {
        'id':media[i]['id'],
        'name':media[i]['name'],
        'description':media[i]['description'],
        'timestamp':media[i]['added'],
        'captions':media[i]['captions'],
        'date':media[i]['date'],
        'downloadURL':media[i]['downloadURL']
        };
      this.fileDS.add(file);
      }
    this.fileView.refreshData();
    }

  app.cach.bind('userInfo', new objfn('readUserStatus', div));
  div.loadMediaFromFolder(0);
  }


function mediaBrowserFolderChildren(id, monitor)
  {
  this.id = id;
  this.children = new Array();
  this.monitor = monitor;

  this.loading = true;

  var rsp = new phpRequest(new objfn('readChildren', this), 'getFolderChildren', 'media_browser_responder', 'app/jsresponder.php');
  rsp.run(id);

  }

mediaBrowserFolderChildren.prototype.readChildren = function(result)
  {
  var child = null;
  for (var i = 0; i < result.length; i++)
    {
    child = {
      'id':result[i]['id'],
      'name':result[i]['name'],
      'description':result[i]['description'],
      'media':result[i]['media'],
      'children':null
      };
    this.children[this.children.length] = child;
    }
  this.loading = false;
  this.monitor.run(this);
  }

mediaBrowserFolderChildren.prototype.openFolder = function(id)
  {
  for (var i = 0; i < this.children.length; i++)
    {
    if (this.children[i]['id'] == id)
      {
      if (this.children[i]['children'] == null)
        {
        this.children[i]['children'] = new mediaBrowserFolderChildren(id, this.monitor);
        this.monitor.run(this);
        }
      return true;
      }else
      {
      if (this.children[i]['children'] != null)
        {
        if (this.children[i]['children'].openFolder(id))
          {
          return true;
          }
        }
      }
    }
  return false;
  }

mediaBrowserFolderChildren.prototype.closeFolder = function(id)
  {
  for (var i = 0; i < this.children.length; i++)
    {
    if (this.children[i]['id'] == id)
      {
      this.children[i]['children'] = null;
      this.monitor.run(this);
      return true;
      }else
      {
      if (this.children[i]['children'] != null)
        {
        if (this.children[i]['children'].closeFolder(id))
          {
          return true;
          }
        }
      }
    }
  return false;
  }


function createPlayer()
  {
  var mainDiv = document.createElement('div');
  divToContainer(mainDiv);
  mainDiv.initalized = false;
  mainDiv.onvisible = function()
    {
    if (!this.initalized)
      {
      intPlayer(this);
      this.initalized = true;
      }
    }
  mainDiv.buttonTitle = "PLAYER";

  var manager = new mediaManager(mainDiv);

  app.addComponent('mediaManager', manager);
  app.addFunction('mediaManager', 'loadMedia', new objfn('loadMedia', manager));
  app.addFunction('mediaManager', 'getPlaylistDS', new objfn('getPlaylistDS', manager));
  app.addFunction('mediaManager', 'bindPlaylistBroadcaster', new objfn('bindPlaylistBroadcaster', manager));
  app.addFunction('mediaManager', 'setPlaylistTabInfo', new objfn('setPlaylistTabInfo', manager));
  app.addFunction('mediaManager', 'deleteFromPlaylist', new objfn('deleteFromPlaylist', manager));
  app.addFunction('mediaManager', 'playFromPLID', new objfn('playFromPLID', manager));
  app.addFunction('mediaManager', 'startDragging', new objfn('startDragging', manager));
  app.addFunction('mediaManager', 'mouseOverObj', new objfn('mouseOverObj', manager));
  app.addFunction('mediaManager', 'setPlaylistState', new objfn('setPlaylistState', manager));
  app.addFunction('mediaManager', 'setPlaylistEndLoopState', new objfn('setPlaylistEndLoopState', manager));


  return mainDiv;
  }

function mediaManager(mainDiv)
  {
  this.mainDiv = mainDiv;
  this.playlistUpdateBC = new eventBroadcaster();
  this.playlistDS = new dataset(new Array("id", "plid", "infoObj", "pos", "state", "name", "description"));
  this.playlistDS.setSort("pos", true);
  this.uniqueplid = 0;
  this.playingPLID = null;
  this.plTabManager = null;
  this.plLayerId = null;
  this.playingPos = null;

  this.draggingObj = false;
  this.draggingObjID = null;

  this.plEnabled = false;

  this.timerID = null;

  this.plEndLoop = false;

  this.setPlaylistState = function(state)
    {
    this.plEnabled = state;
    }

  this.setPlaylistEndLoopState = function(state)
    {
    this.plEndLoop = state;
    }

  this.startDragging = function(plid)
    {
    this.draggingObj = true;
    this.draggingObjID = plid;
    this.docMouseUpID = app.docEvents.addEvent("mouseup", new objfn('stopDragging', this));
    document.onselectstart = function() {return false;}
    }

  this.stopDragging = function()
    {
    if (!this.draggingObj)
      {
      return;
      }
    this.draggingObj = false;
    app.docEvents.removeEvent("mouseup", this.docMouseUpID);
    document.onselectstart = function() {return true;}
    }

  this.mouseOverObj = function(plid)
    {
    if (!this.draggingObj || this.draggingObjID == plid)
      {
      return;
      }
    var targetPos = this.playlistDS.selectArray(new Array("pos"), {"plid":plid})[0]['pos'];
    this.repositionObj(this.draggingObjID, targetPos);
    }

  this.repositionObj = function(plid, pos)
    {
    var currPos = this.playlistDS.selectArray(new Array("pos"), {"plid":plid})[0]['pos'];
    if (currPos < pos)
      {
      while(currPos < pos)
        {
        this.playlistDS.update({"pos":currPos+1}, {"pos":currPos});
        currPos++;
        }
      this.playlistDS.update({"plid":plid}, {"pos":pos});
      }else
      {
      while(currPos > pos)
        {
        this.playlistDS.update({"pos":currPos-1}, {"pos":currPos});
        currPos--;
        }
      this.playlistDS.update({"plid":plid}, {"pos":pos});
      }
    this.playlistDS.resortData();
    this.playlistUpdateBC.broadcast();

    this.playingPos = this.playlistDS.selectArray(new Array("pos"), {"plid":this.playingPLID})[0]['pos'];
    }

  this.monitorPlayState = function()
    {
/*    if (!this.plEnabled)
      {
      return;
      }

    if (app.getFunction('player', 'getPosition') == null)
      {
      return;
      }

    var playState = app.getFunction('player', 'state').run();
    if (playState != 3)
      {
      return;
      }

    var currPos = app.getFunction('player', 'getPosition').run();
    var mediaLen = app.getFunction('player', 'getClipLength').run();

    if (mediaLen == 0)
      {
      return;
      }

    if ((mediaLen - currPos) < 3000)
      {
      this.audioTrackFinishedPlaying();
      }*/
    }

  this.audioTrackFinishedPlaying = function()
    {
    if (!this.plEnabled)
      {
      return;
      }
    var nextPos = this.playingPos+1;
    if (this.playlistDS.length == nextPos)
      {
      if (this.plEndLoop)
        {
        app.getFunction('player', 'stop').run();
        return;
        }
      nextPos = 0;
      }
    app.getFunction('player', 'stop').run();
    var parent = this;
    var fn = function()
      {
      parent.playFromPos(nextPos);
      }
    setTimeout(fn, 100);
    }

  this.loadMedia = function(id)
    {
    if (!this.plEnabled)
      {
      this.playlistDS.clear();
      }
    app.getFunction('mainTabHandler', 'selectTab').run(this.mainDiv.layerID);
    var rsp = new phpRequest(new objfn('readMediaInfo' ,this), 'getMediaInfo', 'media_responder', 'app/jsresponder.php');
    rsp.run(id);
    }

  this.setPlaylistTabInfo = function(tabManager, layerID)
    {
    this.plTabManager = tabManager;
    this.plLayerId = layerID;
    }

  this.getPlaylistDS = function()
    {
    return this.playlistDS;
    }

  this.bindPlaylistBroadcaster = function(fn)
    {
    this.playlistUpdateBC.addHook(fn);
    }

  this.deleteFromPlaylist = function(plid)
    {
    var mediaPos = this.playlistDS.selectArray(new Array("pos"), {"plid":plid})[0]['pos'];

    for(var i = mediaPos; i < this.playlistDS.length; i++)
      {
      this.playlistDS.update({"pos":i}, {"pos":(i-1)});
      }

    this.playlistDS.deleteRows({"plid":plid});
    var parent = this;
    var fn = function()
      {
      parent.playlistUpdateBC.broadcast();
      }
    setTimeout(fn, 1);
    }

  this.readMediaInfo = function(info)
    {
    var row = {
      "id":info['id'],
      "plid":this.uniqueplid++,
      "infoObj":info,
      "pos":this.playlistDS.length,
      "state":0,
      "name":info['name'],
      "description":info['description']
      };
    this.playlistDS.insert(row);
    this.playlistUpdateBC.broadcast();

    if (this.playlistDS.length == 1)
      {
      this.playFromPos(0);
      }else
      {
      this.showPlaylist();
      }

    }

  this.showPlaylist = function()
    {
    app.getFunction('mainTabHandler', 'selectTab').run(this.mainDiv.layerID);
    this.plTabManager.selectTab(this.plLayerId);
    }

  this.playFromPos = function(pos)
    {
    var currMedia = this.playlistDS.selectArray(new Array("plid"), {"pos":pos});
    this.playFromPLID(currMedia[0]['plid']);
    }

  this.playFromPLID = function(plid)
    {
    if (this.playingPLID != null)
      {
      this.playlistDS.update({"plid":this.playingPLID}, {"state":0});
      }

    this.playingPLID = plid;
    var currMedia = this.playlistDS.selectArray(new Array("infoObj", "pos"), {"plid":plid});
    this.playFromInfo(currMedia[0]['infoObj']);
    this.playingPos = currMedia[0]['pos'];
    this.playlistDS.update({"plid":plid}, {"state":1});
    this.playlistUpdateBC.broadcast();
    if (this.timerID == null)
      {
//      this.timerID = app.timer.addTimer(new objfn('monitorPlayState', this), 100);
      }
    }

  this.playFromInfo = function(info)
    {
//    app.getFunction('player', 'stop').run();
    app.cach.setVariable('currentMedia', info);
//This function should also play the media.
    app.getFunction('player', 'setUrl').run(info['file']);
//    app.getFunction('player', 'play').run();
    }


  }

function intPlayer(div)
  {
  divToHorizontalSplitContainer(div);
  var ctrls = createPlayerControls();
  var playerSections = new Array();
  var playerTabs = divToContainer(document.createElement('div'));
  var playerLayers = createLayeredContainer();
  var tabs = new tabHandler(playerLayers);

  var playerTabLeftPadding = document.createElement('div');
  playerTabLeftPadding.className = "player_tab_left_padding";
  playerTabs.appendChild(playerTabLeftPadding);
  playerTabs.className = "player_tab";

  playerSections[playerSections.length] = {'layer':createPlayerCaptionDisplay(), 'name':'Captions'};
  playerSections[playerSections.length] = {'layer':createPlayerPlaylistManager(), 'name':'Playlist'};



  for(var i = 0; i < playerSections.length; i++)
    {
    var button = divToButton(document.createElement('div'), "player_tab_button_up", "player_tab_button_down", "player_tab_button_hl", 60, 15);
    button.appendChild(document.createTextNode(playerSections[i]['name']));
    playerTabs.appendChild(button);
    playerSections[i]['layer'].layerID = playerLayers.addContainer(playerSections[i]['layer']);
    tabs.addTab(button, playerSections[i]['layer'].layerID);
    if (playerSections[i]['name'] == "Playlist")
      {
      app.getFunction('mediaManager', 'setPlaylistTabInfo').run(tabs, playerSections[i]['layer'].layerID);
      }
    }

  tabs.selectTab(0);

  div.addContainer(divToContainer(document.createElement('div')), 10);
  div.addContainer(playerTabs, 17);
  div.addContainer(playerLayers);
  div.addContainer(ctrls, 70);
  return div;
  }



function createPlayerControls()
  {
//Init Main DIV
  var div = document.createElement('div');
//  div.style['background'] = '#DDEEFF';
  div = divToContainer(div);
  div.style['position'] = 'relative';
//Create the slider handle
  var slideHandle = document.createElement('div');
  slideHandle.style['height'] = '20px';
  slideHandle.style['width'] = '20px';
//  slideHandle.style['background'] = '#FFFF00';
  slideHandle.className = 'player_media_slider_button';

//Create the position Slider.
  var positionSlider = createHorizontalSlider(100, 0, 20, 400, slideHandle, 20, null);
  positionSlider.style['top'] = '10px';
  positionSlider.style['left'] = '20px';
  positionSlider.style['position'] = 'absolute';
  positionSlider.className = 'player_media_slider_bar';

//Set Position slider functions.
  positionSlider.posToTextFn = new objfn('intToTime', div);
  positionSlider.posMonFn = new objfn('readPosSlideChange', div);

//Remember stuff
  div.positionSlider = positionSlider;

//Add the slider to this div.
  div.appendChild(positionSlider);

//  app.addComponent("player", div);

  div.readPosSlideChange = function(pos)
    {
    div.player.setPosition(pos);
    }

//Function for converting time.
  div.intToTime = function(number)
    {
    number = number / 1000;
    var minutes = Math.floor(number/60);
    var seconds = number - (minutes * 60);
    seconds = Math.round(seconds*100)/100;
    if (seconds < 10)
      {
      seconds = '0' + seconds.toString();
      }else
      {
      seconds = seconds.toString();
      }
    return minutes.toString() + ':' + seconds;
    }

//Tell the slider its new size.
  div.resizeChildren = function()
    {
    this.positionSlider.setWidth(this.currX-40);
    }

  var buttonCnt = document.createElement('div');
  buttonCnt.style['position'] = 'absolute';
  buttonCnt.style['top'] = '35px';
  buttonCnt.style['left'] = '20px';
  buttonCnt.style['width'] = '500px';
  buttonCnt.style['height'] = '20px';


  var playButton = document.createElement('div');
  playButton.appendChild(document.createTextNode('Play'));
  divToButton(playButton, 'player_media_button_up', 'player_media_button_down', 'player_media_button_hl', 50, 15);
  playButton.broadcasterOnMouseup.addHook(new objfn(function(){app.getFunction('player', 'play').run();}));
  buttonCnt.appendChild(playButton);
  div.playButton = playButton;

  var pauseButton = document.createElement('div');
  pauseButton.appendChild(document.createTextNode('Pause'));
  divToButton(pauseButton, 'player_media_button_up', 'player_media_button_down', 'player_media_button_hl', 50, 15);

  var pauseFn = function()
    {
    if (app.getFunction('player', 'state').run() != 4)
      {
      app.getFunction('player', 'pause').run(); 
      }else
      {
      app.getFunction('player', 'play').run(); 
      }
    }

  pauseButton.broadcasterOnMouseup.addHook(new objfn(pauseFn));
  buttonCnt.appendChild(pauseButton);
  div.pauseButton = pauseButton;

  var stopButton = document.createElement('div');
  stopButton.appendChild(document.createTextNode('Stop'));
  divToButton(stopButton, 'player_media_button_up', 'player_media_button_down', 'player_media_button_hl', 50, 15);
  stopButton.broadcasterOnMouseup.addHook(new objfn(function(){app.getFunction('player', 'stop').run();}));
  buttonCnt.appendChild(stopButton);
  div.stopButton = stopButton;

/*
  button = document.createElement('span');
  button.className = 'player_media_button';
  button.appendChild(document.createTextNode('Play'));
  button.onclick = function()
    {
    app.getFunction('player', 'play').run();
    }
  buttonCnt.appendChild(button);

  button = document.createElement('span');
  button.className = 'player_media_button';
  button.appendChild(document.createTextNode('Pause'));
  button.onclick = function()
    {
    app.getFunction('player', 'pause').run();
    }
  buttonCnt.appendChild(button);

  button = document.createElement('span');
  button.className = 'player_media_button';
  button.appendChild(document.createTextNode('Stop'));
  button.onclick = function()
    {
    app.getFunction('player', 'stop').run();
    }
  buttonCnt.appendChild(button);
*/

  var status = null;

  status = document.createElement('span');
  status.className = 'player_media_info_text';
  var statText = document.createTextNode('0:00/0:00');
  div.playerPosText = statText;
  status.appendChild(statText);
  buttonCnt.appendChild(status);

  status = document.createElement('span');
  status.className = 'player_media_info_text';
  var statText = document.createTextNode('Waiting Init.');
  div.playerStatText = statText;
  status.appendChild(statText);
  buttonCnt.appendChild(status);

  div.appendChild(buttonCnt);
//  div.player = new audioPlayer(document.getElementById('PlayerLoc'));
  div.player = new flashaudioplayer(document.getElementById('PlayerLoc'));

  div.player.clipLenMon = new objfn('clipLenChange' ,div);
  div.player.stateMon = new objfn('clipStateChange' ,div);

  div.player.clipEndCB = new objfn('audioTrackFinishedPlaying', app.getComponent('mediaManager'));

  div.clipLenChange = function(len)
    {
    this.positionSlider.sliderMax = len;
    }

  div.clipStateChange = function(intState, strState)
    {
    this.playerStatText.nodeValue = strState;
    if (intState == 3)
      {
      this.playButton.setState(1);
      this.pauseButton.setState(0);
      this.stopButton.setState(0);
      }else if(intState == 0)
      {
      this.playButton.setState(0);
      this.pauseButton.setState(0);
      this.stopButton.setState(1);
      }else if(intState == 4)
      {
      this.playButton.setState(0);
      this.pauseButton.setState(1);
      this.stopButton.setState(0);
      }else
      {
      this.playButton.setState(0);
      this.pauseButton.setState(0);
      this.stopButton.setState(0);
      }
    }

  div.updatePlayerPos = function()
    {
    var playerPos = this.player.getPosition();
    if (this.oldPlayerOptimizePos == playerPos)
      {
      return;
      }

    this.oldPlayerOptimizePos = playerPos;

    if (!this.positionSlider.draging)
      {
      this.positionSlider.setPos(playerPos);
      }
    var timeText = this.intToTime(playerPos);
    if (timeText.indexOf('.') != -1)
      {
      timeText = timeText.substring(0, timeText.indexOf('.'));
      }

    var maxTime = this.intToTime(this.player.getClipLength());
    if (maxTime.indexOf('.') != -1)
      {
      maxTime = maxTime.substring(0, maxTime.indexOf('.'));
      }

    var finalText = timeText+'/'+maxTime;

    if (this.playerPosText.nodeValue != finalText)
      {
      this.playerPosText.nodeValue = finalText;
      }
    }

  div.playPosMonTimerID = app.timer.addTimer(new objfn('updatePlayerPos', div), 100);

  div.setUrl = function(url)
    {
    this.player.setUrl(url);
    }

//  div.player.play();
  app.addComponent('player', div.player);
  app.addFunction('player', 'play', new objfn('play', div.player));
  app.addFunction('player', 'pause', new objfn('pause', div.player));
  app.addFunction('player', 'stop', new objfn('stop', div.player));
  app.addFunction('player', 'setUrl', new objfn('setUrl', div.player));
  app.addFunction('player', 'getPosition', new objfn('getPosition', div.player));
  app.addFunction('player', 'setPosition', new objfn('setPosition', div.player));
  app.addFunction('player', 'getClipLength', new objfn('getClipLength', div.player));
  app.addFunction('player', 'state', new objfn('state', div.player));

//  div.setUrl('media/Nanak%20Dukhia%20Sab%20Sansar.mp3');

  return div;
  }

function createPlayerPlaylistManager()
  {
  var sidePadding = 20;

  var mainDiv = divToContainer(document.createElement('div'));
  var plDS = app.getFunction('mediaManager', 'getPlaylistDS').run();

  var playlistRowRenderer = function(input, inputRow, inputColPos, inputRowPos)
    {
    var rootDiv = document.createElement('div');
    rootDiv.onmouseover = function()
      {
      app.getFunction('mediaManager', 'mouseOverObj').run(inputRow['plid']);
      }
    rootDiv.style['height'] = "100%";
    rootDiv.style['width'] = "100%";
    var nameDiv = document.createElement('div');
    var descDiv = document.createElement('div');
    nameDiv.appendChild(document.createTextNode((inputRow['pos']+1)+". "+inputRow['name']));
    nameDiv.className = "player_playlist_media_name";

    nameDiv.onclick = function()
      {
      app.getFunction('mediaManager', 'playFromPLID').run(inputRow['plid']);
      }

    descDiv.appendChild(document.createTextNode(inputRow['description']));
    descDiv.className = "player_playlist_media_desc";
    rootDiv.appendChild(nameDiv);
    rootDiv.appendChild(descDiv);
    return rootDiv;
    }

  var playlistStateRenderer = function(input, inputRow, inputColPos, inputRowPos)
    {
    var rootDiv = document.createElement('div');
    if (input == 1)
      {
      rootDiv.className = "player_playlist_media_status";
      rootDiv.style['text-align'] = "center";
      rootDiv.appendChild(document.createTextNode("Playing"));
      return rootDiv;
      }else
      {
      var delButton = document.createElement('div');
      delButton.appendChild(document.createTextNode("Remove"));

      divToButton(delButton, "player_media_button_up", "player_media_button_down", "player_media_button_hl", "50", "15");

      var fn = function()
        {
        app.getFunction('mediaManager', 'deleteFromPlaylist').run(inputRow['plid']);
        }

      delButton.broadcasterOnMouseup.addHook(new objfn(fn));

      rootDiv.appendChild(delButton);
      return rootDiv;
      }
    }

  var playlistDragerRenderer = function(input, inputRow, inputColPos, inputRowPos)
    {
    var rootDiv = document.createElement('div');
    rootDiv.onmouseover = function()
      {
      app.getFunction('mediaManager', 'mouseOverObj').run(inputRow['plid']);
      }
    rootDiv.style['height'] = "100%";
    rootDiv.style['width'] = "100%";
    var dragButton = document.createElement('div');
    dragButton.className = "player_playlist_drag_button";
    dragButton.onmousedown = function()
      {
      app.getFunction('mediaManager', 'startDragging').run(inputRow['plid']);
      }
    rootDiv.appendChild(dragButton);
    return rootDiv;
    }

  var columns = {
    0:{
      'label':'',
      'attr':'pos',
      'width':20,
      'widthType':'.',
      'renderer':playlistDragerRenderer,
      'labelClick':null
      },
    1:{
      'label':'',
      'attr':'name',
      'width':20,
      'widthType':'%',
      'renderer':playlistRowRenderer,
      'labelClick':null
      },
    2:{
      'label':'',
      'attr':'state',
      'width':65,
      'widthType':'.',
      'renderer':playlistStateRenderer,
      'labelClick':null
      }
    };

  var plOptions = divToContainer(document.createElement('div'));

  var plEnableOpt = document.createElement('select');
  plEnableOpt.className = "player_playlist_media_dropdown";
  var select;
  select = document.createElement('option');
  select.value = 0;
  select.appendChild(document.createTextNode("Off"));
  plEnableOpt.appendChild(select);
  select = document.createElement('option');
  select.value = 1;
  select.appendChild(document.createTextNode("On"));
  plEnableOpt.appendChild(select);
  plOptions.className = "player_playlist_options_text";
  plOptions.appendChild(document.createTextNode('Playlist: '));
  plOptions.appendChild(plEnableOpt);
  plEnableOpt.onchange = function()
    {
    app.getFunction('mediaManager', 'setPlaylistState').run((this.value==1?true:false));
    }

  plEnableOpt.onmousemove = function()
    {
    var text;
    if (this.value == 0)
      {
      text = "When you try to play a media (eg. shabads/katha), it will automatically start to play.";
      }else
      {
      text = "When you try to play a media (eg. shabads/katha), it will automatically get queued to play.";
      }
    app.tip.request(this, text);
    }

  plEnableOpt.onmouseout = function()
    {
    app.tip.clear();
    }


  var plEndOfPlayOpt = document.createElement('select');
  plEndOfPlayOpt.className = "player_playlist_media_dropdown";
  var select;
  select = document.createElement('option');
  select.value = 0;
  select.appendChild(document.createTextNode("Loop"));
  plEndOfPlayOpt.appendChild(select);
  select = document.createElement('option');
  select.value = 1;
  select.appendChild(document.createTextNode("Stop"));
  plEndOfPlayOpt.appendChild(select);
  plEndOfPlayOpt.onchange = function()
    {
    app.getFunction('mediaManager', 'setPlaylistEndLoopState').run((this.value==1?true:false));
    }

  plOptions.appendChild(document.createTextNode(' At end of playlist:'));
  plOptions.appendChild(plEndOfPlayOpt);


  listView(mainDiv, plDS, columns, 400, 400, 0, 30, "");

  app.getFunction('mediaManager', 'bindPlaylistBroadcaster').run(new objfn('refreshData', mainDiv));

  var spliter = divToHorizontalSplitContainer(document.createElement('div'));

  spliter.addContainer(plOptions, 20);
  spliter.addContainer(mainDiv);

  var layout = divToVerticalSplitContainer(document.createElement('div'));
  layout.addContainer(divToContainer(document.createElement('div')), sidePadding);

  layout.addContainer(spliter);


  layout.addContainer(divToContainer(document.createElement('div')), sidePadding);

  return layout;
  }


function initUserMenu(menu_title, menu_cnt)
  {
  var title = document.createElement('div');
  title.appendChild(document.createTextNode('User Menu'));
  title.className = 'user_menu_title';
  menu_title.appendChild(title);

  var login = new loginManager(menu_cnt);

  menu_cnt.appendChild(document.createTextNode(' Loading...'));

  app.addComponent('loginManager', login);
  app.addFunction('loginManager', 'login', new objfn('login', login));
  app.addFunction('loginManager', 'logout', new objfn('logout', login));
  app.cach.bind('userInfo', new objfn('updateUserInfo', login));
  login.repollUserInfo();
  }

function loginManager(menu_cnt)
  {
  this.menu_cnt = menu_cnt;

  this.repollUserInfo = function()
    {
    var rsp = new phpRequest(new objfn('incommingData', app.cach), 'status', 'user_responder', 'app/jsresponder.php');
    rsp.run();
    }

  this.updateUserInfo = function(userInfo)
    {
    if(userInfo['loggedin'] == '0')
      {
      this.renderLogin();
      }else
      {
      this.renderLoggedIn();
      }
    }

  this.renderNewAccount = function()
    {
    clearChildNodes(this.menu_cnt);

    var formFields = new Array();
    formFields[formFields.length] = {'fieldname':'user', 'nametext':'User Name', 'type':'text'};
    formFields[formFields.length] = {'fieldname':'first_name', 'nametext':'First Name', 'type':'text'};
    formFields[formFields.length] = {'fieldname':'last_name', 'nametext':'Last Name', 'type':'text'};
    formFields[formFields.length] = {'fieldname':'e-mail', 'nametext':'E-Mail', 'type':'text'};
    formFields[formFields.length] = {'fieldname':'password', 'nametext':'Password', 'type':'password'};
    formFields[formFields.length] = {'fieldname':'re-password', 'nametext':'Pass Again', 'type':'password'};

    var mainDiv = document.createElement('div');
    mainDiv.className = 'user_menu_text_area';

    var text;
    var input;

    this.newAccountForm = new Array();

    for(var i = 0; i < formFields.length; i++)
      {
      text = document.createElement('div');
      text.className = 'user_menu_info_box';
      text.appendChild(document.createTextNode(formFields[i]['nametext']+':'));
      mainDiv.appendChild(text);
      input = document.createElement('input');

      this.newAccountForm[formFields[i]['fieldname']] = input;

      input.type = formFields[i]['type'];
      input.className = 'user_menu_input_box';
      mainDiv.appendChild(input);
      }


    var createAccount = document.createElement('input');
    createAccount.className = 'user_menu_input_button';
    createAccount.type = 'button';
    createAccount.value = 'Create';
    createAccount.parent = this;
    createAccount.onclick = function()
      {
      var submitVals = new Array();
      for(var i in this.parent.newAccountForm)
        {
        if (this.parent.newAccountForm[i].type != 'button')
          {
          submitVals[i] = this.parent.newAccountForm[i].value;
          if (this.parent.newAccountForm[i].type == 'password')
            {
            this.parent.newAccountForm[i].value = '';
            }
          }
        this.parent.newAccountForm[i].disabled = true;
        }

      var rsp = new phpRequest(new objfn('readAccountCreateResult', this.parent), 'create', 'user_responder', 'app/jsresponder.php');
      rsp.run(submitVals);

      }

    this.newAccountForm['create'] = createAccount;

    var cancel = document.createElement('input');
    cancel.className = 'user_menu_input_button';
    cancel.type = 'button';
    cancel.value = 'Cancel';
    cancel.parent = this;
    cancel.onclick = function()
      {
      this.parent.renderLogin();
      }

    this.newAccountForm['cancel'] = cancel;

    mainDiv.appendChild(createAccount);
    mainDiv.appendChild(cancel);
    this.menu_cnt.appendChild(mainDiv);
    }

  this.readAccountCreateResult = function(result)
    {
    if (result['success'] == '1')
      {
      alert(result['message']);
      this.renderLogin();
      }else
      {
      var msg = "We were unable to create a new account.\nPlease fix the following errors:";
      for(var i = 0; i < result['errors'].length; i++)
        {
        msg = msg + "\n - " + result['errors'][i];
        }
      alert(msg);
      for(var i in this.newAccountForm)
        {
        this.newAccountForm[i].disabled = false;
        }

      }
    }

  this.renderLoggedIn = function()
    {
    while (this.menu_cnt.childNodes.length != 0)
      {
      this.menu_cnt.removeChild(this.menu_cnt.childNodes[0]);
      }

    var mainDiv = document.createElement('div');
    mainDiv.className = 'user_menu_text_area';
    var userObj = app.cach.get('userInfo');

    mainDiv.appendChild(document.createTextNode('Welcome ' + userObj['name'] + ' to SikhShabads.com! '));

    var a = document.createElement('span');
    a.className = 'user_menu_anchors';
    a.appendChild(document.createTextNode('Log Out'));
    a.onclick = function()
      {
      app.getFunction('loginManager', 'logout').run();
      }
    mainDiv.appendChild(a);

    this.menu_cnt.appendChild(mainDiv);

    }


  this.renderLogin = function()
    {
    while (this.menu_cnt.childNodes.length != 0)
      {
      this.menu_cnt.removeChild(this.menu_cnt.childNodes[0]);
      }

    var mainDiv = document.createElement('div');
    mainDiv.className = 'user_menu_text_area';
    var text;

    var text = document.createElement('div');
    text.className = 'user_menu_info_box';
    text.appendChild(document.createTextNode('User:'));
    mainDiv.appendChild(text);
    var input = document.createElement('input');
    this.userBox = input;
    input.className = 'user_menu_input_box';
    mainDiv.appendChild(input);

    var text = document.createElement('div');
    text.className = 'user_menu_info_box';
    text.appendChild(document.createTextNode('Password:'));
    mainDiv.appendChild(text);
    var input = document.createElement('input');
    this.passwordBox = input;
    input.type = 'password';
    input.className = 'user_menu_input_box';
    mainDiv.appendChild(input);

    var submit = document.createElement('input');
    this.loginSubmit = submit;
    submit.type = 'button';
    submit.value = 'Login';
    submit.className = 'user_menu_input_button';
    submit.onclick = function()
      {
      app.getFunction('loginManager', 'login').run();
      }

    this.newAccountSubmit = document.createElement('input');
    this.newAccountSubmit.className = 'user_menu_input_button';
    this.newAccountSubmit.type = 'button';
    this.newAccountSubmit.value = 'New Account';
    this.newAccountSubmit.parent = this;
    this.newAccountSubmit.onclick = function()
      {
      this.parent.renderNewAccount();
      }

    mainDiv.appendChild(submit);
    mainDiv.appendChild(this.newAccountSubmit);

    this.menu_cnt.appendChild(mainDiv);

    }

  this.logout = function()
    {
    var rsp = new phpRequest(new objfn('repollUserInfo', this), 'logout', 'user_responder', 'app/jsresponder.php');
    rsp.run();
    }

  this.login = function()
    {
    if (this.userBox.value == "")
      {
      alert('User field is empty!');
      return;
      }
    if (this.passwordBox.value == "")
      {
      alert('Password field is empty!');
      return;
      }

    var rsp = new phpRequest(new objfn('readLoginResult', this), 'login', 'user_responder', 'app/jsresponder.php');
    rsp.run(this.userBox.value, this.passwordBox.value);
    this.passwordBox.value = '';
    this.userBox.disabled = true;
    this.passwordBox.disabled = true;
    this.loginSubmit.disabled = true;
    }

  this.readLoginResult = function(result)
    {
    if (result['loggedIn'] == '0')
      {
      alert(result['msg']);
      this.userBox.disabled = false;
      this.passwordBox.disabled = false;
      this.loginSubmit.disabled = false;
      return;
      }
    this.repollUserInfo();
    }

  }
function divToButton(div, upcls, downcls, hlcls, width, height)
  {
  div = divToContainer(div, width, height, width, height);
  div.upcls = upcls;
  div.downcls = downcls;
  div.hlcls = hlcls;
  div.state = -1;//1 = pressed, 0 = decompressed

  div.broadcasterOnMouseover = new eventBroadcaster();
  div.broadcasterOnMouseout = new eventBroadcaster();
  div.broadcasterOnMousedown = new eventBroadcaster();
  div.broadcasterOnMouseup = new eventBroadcaster();
  div.broadcasterOnChange = new eventBroadcaster();

  div.setState = function(state)
    {
    if (this.state == state)
      {
      return;
      }
    this.state = state;

    this.broadcasterOnChange.broadcast(this);

    if (this.state == 1)
      {
      this.className = this.downcls;
      }else
      {
      this.className = this.upcls;
      }
    }

  div.onmouseover = function()
    {
    if (this.state == 0)
      {
      if (this.className != this.hlcls)
        {
        this.className = this.hlcls;
        }
      }
    this.broadcasterOnMouseover.broadcast(this);
    }

  div.onmousemove = div.onmouseover;

  div.onmouseout = function()
    {
    if (this.state == 1)
      {
      this.className = this.downcls;
      }else
      {
      this.className = this.upcls;
      }

    this.broadcasterOnMouseout.broadcast(this);
    }

  div.onmousedown = function()
    {
    this.broadcasterOnMousedown.broadcast(this);

    this.className = this.downcls;
    }

  div.onmouseup = function() 
    {
    this.broadcasterOnMouseup.broadcast(this);

    if (this.state == 1)
      {
      this.className = this.downcls;
      }else
      {
      this.className = this.upcls;
      }
    }

  div.setState(0);

  return div;
  }



function divToContainer(div, minX, minY, maxX, maxY)
  {
  div.isContainer = true;

  if (minX == null) {minX = 0;}
  if (minY == null) {minY = 0;}
  if (maxX == null) {maxX = 0;}
  if (maxY == null) {maxY = 0;}

  div.minX = minX;
  div.minY = minY;
  div.maxX = maxX;
  div.maxY = maxY;
  div.setSize = function(x, y)
    {
    if (x < this.minX) {x = this.minX;}
    if (y < this.minY) {y = this.minY;}

    if (x > this.maxX && this.maxX != 0) {x = this.maxX;}
    if (y > this.maxY && this.maxY != 0) {y = this.maxY;}

/*
    if (this.currX == x && this.currY == y)
      {
      return;
      }
*/

    this.currX = x;
    this.currY = y;

    if (this.currX == 0 || this.currY == 0)
      {
      this.style['display'] = 'none';
      this.style['visibility'] = 'hidden';
      }else
      {
      this.style['display'] = 'block';
      this.style['visibility'] = 'visible';
      }

    this.style['width'] = this.currX+'px';
    this.style['height'] = this.currY+'px';

    if (this.resizeChildren != null)
      {
      if (this.delayResizeTimerID != -1)
        {
        app.timer.removeTimer(this.delayResizeTimerID);
        }
      this.delayResizeTimerID = app.timer.addTimer(new objfn('delayResize', this), 1);
      }
    }

  div.delayResize = function()
    {
    if (this.delayResizeTimerID != -1)
      {
      app.timer.removeTimer(this.delayResizeTimerID);
      }
    this.delayResizeTimerID = -1;
    this.resizeChildren();
    }
  div.delayResizeTimerID = -1;
  div.setSize(0, 0);
  return div;
  }


function divToHorizontalSplitContainer(div, minX, minY, maxX, maxY)
  {


  div = divToContainer(div, minX, minY, maxX, maxY);

  div.containers = new Array();
  div.maxHeights = new Array();
  div.heightFixedContainers = 0;


  div.addContainer = function (container, maxHeight)
    {
    if (maxHeight == null)
      {
      maxHeight = 0;
      }


    this.containers[this.containers.length] = container;
    this.maxHeights[this.maxHeights.length] = maxHeight;

    if (maxHeight != 0)
      {
      this.heightFixedContainers = this.heightFixedContainers + 1;
      }

    this.appendChild(container);
    this.resizeChildren;
    }

  div.resizeChildren = function()
    {
    if (this.containers.length == 0) {return;}

    var heightLeft = this.currY;
    var fixedHeightContainers = this.heightFixedContainers;

    var heightPerContainer = heightLeft/fixedHeightContainers;

    for (var i = 0; i < this.containers.length; i++)
      {
      if (this.maxHeights[i] != 0)
        {
        var contHeight = 0;
        if (heightPerContainer > this.maxHeights[i])
          {
          contHeight = this.maxHeights[i];
          }else
          {
          contHeight = heightPerContainer;
          }
        this.containers[i].setSize(this.currX, contHeight);
        heightLeft = heightLeft - this.containers[i].currY;
        fixedHeightContainers = fixedHeightContainers - 1;
        heightPerContainer = heightLeft/fixedHeightContainers;
        if (heightLeft <= 0) {return;}
        }
      }

    heightPerContainer = heightLeft/(this.containers.length - this.heightFixedContainers);

    for (var i = 0; i < this.containers.length; i++)
      {
      if (this.maxHeights[i] == 0)
        {
        this.containers[i].setSize(this.currX, heightPerContainer);
        }
      }


    }

  return div;
  }
function createLayeredContainer(height, width, cont)
  {
  if (cont == null)
    {
    cont = document.createElement('div');//createDOMObj('div', new Array());
    }
//  cont.style['background'] = '#00AA00';

  cont = divToContainer(cont, width, height, width, height);

  cont.containers = new Array();
  cont.selected = 0;

  cont.addContainer = function (cont)
    {
    this.containers[this.containers.length] = cont;
    cont.style['visibility'] = 'hidden';
    cont.style['display'] = 'none';

    this.appendChild(cont);

    if (this.containers.length == 1)
      {
      this.selectContainer(0);
      }
    this.resizeChildren();
    return this.containers.length-1;
    }

  cont.selectContainer = function(index)
    {
    if (index < 0 || index > (this.containers.length-1))
      {
      alert('Container select index out of bound!');
      }

    for(var i = 0; i < this.containers.length; i++)
      {
      this.containers[i].style['visibility'] = 'hidden';
      this.containers[i].style['display'] = 'none';
      }


    this.selected = index;
    this.containers[this.selected].style['visibility'] = 'visible';
    this.containers[this.selected].style['display'] = 'block';

    if (this.containers[this.selected].onvisible != null)
      {
      this.containers[this.selected].onvisible();
      this.containers[this.selected].setSize(this.currX, this.currY);
      }
    }

  cont.resizeChildren = function()
    {
    for (var i = 0; i < this.containers.length; i++)
      {
      this.containers[i].setSize(this.currX, this.currY);
      }
    if (this.containers.length > 0)
      {
      this.selectContainer(this.selected);
      }
    }

  return cont;
  }
/*

columns = {
  0:{
    'label':'Fruit',
    'attr':'name',
    'width':100,
    'widthType':'.', //. = decimal, % = precent
    'renderer':null,
    'labelClick':null
    }
  };

*/

function listView(div, dataSet, columns, height, width, labelHeight, rowHeight, labelClass, dataStart, dataCount)
  {
  divToContainer(div);
  div.columns = new Array();
  div.dataSet = dataSet;
  div.height = height;
  div.width = width;
  div.setSize(width, height);
  div.labelHeight = labelHeight;
  div.listNode = null;
  div.rowHeight = rowHeight;
  div.dataStart = (dataStart==null?0:dataStart);
  div.dataCount = (dataCount==null?null:dataCount);
  div.labelClass = labelClass;
  div.prevResult = null;


  var defaultRenderer = function(input, inputRow, inputColPos, inputRowPos)
    {
    if (input == null)
      {
      return document.createTextNode('null');;
      }
    return document.createTextNode(input.toString());
    }

  var defaultLabelClick = function(column, listView)
    {
    var attr = column['attr'];
    var prevSort = listView.dataSet.getSort(attr);
    var prevSortPos = listView.dataSet.getSortPos(attr);
    if (prevSortPos != 0)
      {
      prevSort = null;
      }
    if (prevSort == 'asc')
      {
      listView.dataSet.setSort(attr, false);
      }else
      {
      listView.dataSet.setSort(attr, true);
      }
    listView.refreshData();
    }

  for (i in columns)
    {
    div.columns[div.columns.length] = {
      'label':(columns[i]['label']==null?'(No Label)':columns[i]['label']),
      'attr':columns[i]['attr'],
      'width':(columns[i]['width']==null?100:columns[i]['width']),
      'widthType':(columns[i]['widthType']==null?'%':columns[i]['widthType']),
      'renderer':(columns[i]['renderer']==null?defaultRenderer:columns[i]['renderer']),
      'labelClick':(columns[i]['labelClick']==null?defaultLabelClick:columns[i]['labelClick'])
      };
    }

  div.resizeColWidths = function()
    {
    if (this.width < 20)
      {
      return;
      }

    var oldWidth = 0;
    var newWidth = this.width-20;

    for (var i = 0; i < this.columns.length; i++)
      {
      if (this.columns[i]['widthType'] == '%')
        {
        oldWidth = oldWidth + this.columns[i]['width'];
        }else
        {
        newWidth -= this.columns[i]['width'];
        }
      }

    for (var i = 0; i < this.columns.length; i++)
      {
      if (this.columns[i]['widthType'] == '%')
        {
        this.columns[i]['width'] = Math.floor(newWidth*(this.columns[i]['width']/oldWidth));
        }
      }
    }

  div.labelClick = function(button)
    {
    var cid = button.colID;
    this.columns[cid].labelClick(this.columns[cid], this);
    }

  div.redrawElement = function()
    {
    clearChildNodes(this);
    var colLabelNode;
    var colLabelHolder;
    var totalWidth = 0;
    var buttonClickFn;
    for(var i = 0; i < this.columns.length; i++)
      {
      colLabelHolder = document.createElement('div');
      colLabelHolder.style['width'] = this.columns[i]['width'].toString() + "px";
      totalWidth = totalWidth + this.columns[i]['width'];
      colLabelHolder.style['height'] = this.labelHeight.toString() + "px";
      colLabelNode = document.createElement('div');
      colLabelHolder.className = 'listview_label';
      colLabelNode.appendChild(document.createTextNode(this.columns[i]['label']));
      divToButton(colLabelNode, labelClass.toString() + '_up', labelClass.toString() + '_down', labelClass.toString() + '_hl', this.columns[i]['width'], this.labelHeight)

      colLabelNode.colID = i;
      colLabelNode.broadcasterOnMouseup.addHook(new objfn('labelClick', this));

      colLabelHolder.appendChild(colLabelNode);
      this.appendChild(colLabelHolder);
      }
    var clearDiv = document.createElement('div');
    clearDiv.style['clear'] = "both";
    this.appendChild(clearDiv);

    var scroller = document.createElement('div');
    scroller.className = 'listview_list_overflow';

    var finalHeight = this.height-this.labelHeight;
    if (finalHeight < 0)
      {
      finalHeight = 0;
      }
    scroller.style['height'] = finalHeight.toString() + 'px';

    scroller.style['width'] = this.width.toString() + 'px';

    this.listNode = document.createElement('div');
    this.listNode.className = '';
    this.listNode.style['width'] = totalWidth.toString() + 'px';
    this.listNode.style['height'] = '100%';
    scroller.appendChild(this.listNode);
    this.appendChild(scroller);

    this.redrawList();
    }

  div.redrawList = function()
    {
    if (this.prevResult == null)
      {
      this.refreshData();
      }else
      {
      this.redrawListResult(this.prevResult);
      }
    }

  div.refreshData = function()
    {
    this.dataSet.getByRange(this.dataStart, this.dataCount, new objfn('redrawListResult', this));
    }

  div.redrawListResult = function(result)
    {
    this.prevResult = result;
    clearChildNodes(this.listNode);
    var dataRow = null;
    var clearDiv = null;
    var colCell = null;
    for(var i = 0; i < result.length; i++)
      {
      dataRow = result[i];

      for(var j = 0; j < this.columns.length; j++)
        {
        colCell = document.createElement('div');
        colCell.className = 'listview_cell';
        colCell.style['width'] = this.columns[j]['width'].toString() + "px";
        colCell.style['height'] = this.rowHeight.toString() + "px";
        colCell.appendChild(this.columns[j]['renderer'](dataRow[this.columns[j]['attr']], dataRow, j, i));
        this.listNode.appendChild(colCell);
        }

      clearDiv = document.createElement('div');
      clearDiv.style['clear'] = "both";
      this.listNode.appendChild(clearDiv);
      }
    }

  div.resizeChildren = function()
    {
    this.height = parseInt(this.currY);
    this.width = parseInt(this.currX);
    this.resizeColWidths();
    this.redrawElement();
    }




  div.resizeColWidths();
  div.redrawElement();
  }

function tabHandler(layeredcnt)
  {
  this.layeredcnt = layeredcnt;
  this.tabs = new Array();
  this.currTab = 0;
  }

tabHandler.prototype.buttonClick = function(button)
  {
  this.selectTab(button.layerIndex);
  }

tabHandler.prototype.addTab = function(button, layerIndex)
  {
  var tab = new Array();
  button.broadcasterOnMouseup.addHook(new objfn("buttonClick", this));
  button.layerIndex = layerIndex;
  tab['button'] = button;
  tab['index'] = layerIndex;
  this.tabs[this.tabs.length] = tab;
  }

tabHandler.prototype.selectTab = function(index)
  {
  for(var i = 0; i < this.tabs.length; i++)
    {
    this.tabs[i].button.setState(0);
    }
  this.currTab = index;
  this.tabs[index].button.setState(1);
  this.layeredcnt.selectContainer(this.tabs[index].index);
  }
function divToVerticalSplitContainer(div, minX, minY, maxX, maxY)
  {
  div = divToContainer(div, minX, minY, maxX, maxY);

  div.containers = new Array();
  div.maxWidths = new Array();
  div.widthFixedContainers = 0;

  div.addContainer = function (container, maxWidth)
    {
    if (maxWidth == null)
      {
      maxWidth = 0;
      }


    this.containers[this.containers.length] = container;
    this.maxWidths[this.maxWidths.length] = maxWidth;

    if (maxWidth != 0)
      {
      this.widthFixedContainers = this.widthFixedContainers + 1;
      }

//    var span = parseHTML('<span style="float:left"></span>');

    var span = document.createElement('span');

    span.className = 'verticlesplitfloater';

    span.appendChild(container);

    this.appendChild(span);
    this.resizeChildren;
    }

  div.resizeChildren = function()
    {
    if (this.containers.length == 0) {return;}

    var widthLeft = this.currX;
    var fixedWidthContainers = this.widthFixedContainers;

    var widthPerContainer = widthLeft/fixedWidthContainers;

    for (var i = 0; i < this.containers.length; i++)
      {
      if (this.maxWidths[i] != 0)
        {
        var contWidth = 0;
        if (widthPerContainer > this.maxWidths[i])
          {
          contWidth = this.maxWidths[i];
          }else
          {
          contWidth = widthPerContainer;
          }
        this.containers[i].setSize(contWidth, this.currY);
        widthLeft = widthLeft - this.containers[i].currX;
        fixedWidthContainers = fixedWidthContainers - 1;
        widthPerContainer = widthLeft/fixedWidthContainers;
//        if (widthLeft <= 0) {return;}
        }
      }

    widthPerContainer = widthLeft/(this.containers.length - this.widthFixedContainers);

    for (var i = 0; i < this.containers.length; i++)
      {
      if (this.maxWidths[i] == 0)
        {
        this.containers[i].setSize(widthPerContainer, this.currY);
        }
      }

    }

  return div;
  }
window.onresize = getWindowResize;
var winWidth;
var winHeight;
var winContainer = null;

var winDelayHandle = null;

function initWindow()
  {
  getWindowResize();
  }

function setWindowContainer(div)
  {
  if (div.isContainer != true)
    {
    alert('Given div is not a container.');
    return;
    }

  if (document.body.childNodes.length == 0)
    {
    document.body.appendChild(div);
    }else
    {
    document.body.insertBefore(div, document.body.childNodes[0])
    }

  winContainer = div;
  }

function getWindowResize()
  {

  if (window.innerWidth != null)
    {
    winWidth = window.innerWidth;
    winHeight = window.innerHeight;
    }else if (document.documentElement.clientHeight != null)
    {
    winWidth = document.documentElement.clientWidth;
    winHeight = document.documentElement.clientHeight;
    }

  if (winContainer != null)
    {
    if (winDelayHandle != null)
      {
      clearTimeout(winDelayHandle);
      winDelayHandle = null;
      }
    winDelayHandle = setTimeout(delayWinResizeExecute, 200);
    }
  }

function delayWinResizeExecute()
  {
  winDelayHandle = null;
  try
    {
    winContainer.setSize(winWidth-20, winHeight-20);
    }catch(e)
    {
    document.title = e;
    }
  }
function CommonTaskHelper()
  {
  this.eventMonitorID = app.docEvents.addEvent("mousemove", new objfn("readNewEventState", this));
  this.currentEventObj = {};
  }

CommonTaskHelper.prototype.readNewEventState = function(obj, index)
  {
  this.currentEventObj.clientX = obj.clientX;
  this.currentEventObj.clientY = obj.clientY;
  }

CommonTaskHelper.prototype.getEventObj = function()
  {
  return this.currentEventObj;
  }


function userAuth()
  {
  this.inGroup = function(name)
    {
    var userObj = app.cach.get('userInfo');
    var groups = userObj.groups;
    for(var i = 0; i < groups.length; i++)
      {
      if (groups[i] == name)
        {
        return true;
        }
      }
    return false;
    }
  }
function dataset(attributes, sorters)
  {
  this.attributes = new Array();
  this.sortingFns = new Array();

  this.data = new Array();
  this.length = 0;
  this.freeSpots = new Array();
  this.dataPos = new Array();
  this.ordering = new Array();
  this.sorts = new Array();

  this.inputAttributes = attributes;
  this.inputSorters = sorters;

  var defaultSorter = function(a, b)
    {
    if (a == b)
      {
      return 0;
      }
    if (a < b)
      {
      return -1;
      }
    return 1;
    }

  if (sorters == null)
    {
    sorters = new Array();
    }

  for(var i = 0; i < attributes.length; i++)
    {
    this.data[i] = new Array();
    this.attributes[attributes[i]] = i;
    this.sortingFns[attributes[i]] = (sorters[attributes[i]]==null?defaultSorter:sorters[attributes[i]]);
    }
  }

dataset.prototype.debug = function()
  {
  var text = "";

  for(var i = 0; i < this.length; i++)
    {
    for(var attr in this.attributes)
      {
      var attrId = this.attributes[attr];
      text = text + attr + "=\"" + this.data[attrId][i] + "\", ";
      }
    text = text + "\n";
    }


  return text;
  }

dataset.prototype.setSort = function(attr, asc)
  {
  for(var i = 0; i < this.sorts.length; i++)
    {
    if (this.sorts[i]['attr'] == attr)
      {
      removeFromArray(this.sorts, i);
      break;
      }
    }
  this.sorts.unshift({'attr':attr, 'asc':(asc==false?false:true)});
  this.resortData();
  }


dataset.prototype.getSort = function(attr)
  {
  for(var i = 0; i < this.sorts.length; i++)
    {
    if (this.sorts[i]['attr'] == attr)
      {
      return (this.sorts[i]['asc']?'asc':'desc');
      }
    }
  return null;
  }

dataset.prototype.getSortPos = function(attr)
  {
  for(var i = 0; i < this.sorts.length; i++)
    {
    if (this.sorts[i]['attr'] == attr)
      {
      return i;
      }
    }
  return null;
  }

dataset.prototype.clearSort = function()
  {
  this.sorts = new Array();
  }

dataset.prototype.insertionSortLeft = function(pos)
  {
  var tmp;
  while(pos > 0 && this.compair(this.ordering[pos-1], this.ordering[pos]) > 0)
    {
    this.swapPositions(pos-1, pos);
    pos--;
    }
  }

dataset.prototype.insertionSort = function()
  {
  for(var i = 0; i < this.ordering.length; i++)
    {
    this.insertionSortLeft(i);
    }
  }

dataset.prototype.heapSort = function()
  {
  if (this.length == 0)
    {
    return;
    }
  var heapSize = this.length;
  for(var i = Math.floor((heapSize-1)/2); i >= 0; i--)
    {
    this.heapSortSiftDown(i, heapSize);
    }

  for(var i = 0; i < this.length; i++)
    {
    this.swapPositions(0, (this.length - i - 1));
    heapSize--;
    this.heapSortSiftDown(0, heapSize);
    }
  }

dataset.prototype.heapSortSiftDown = function(node, heapSize)
  {
  var leftNode = null;
  var rightNode = null;
  var largest = null;

  while(true)
    {
    leftNode = ((node+1)*2)-1;
    rightNode = leftNode+1;
    if (rightNode < heapSize)
      {
      largest = (this.compair(this.ordering[leftNode], this.ordering[rightNode]) > 0?leftNode:rightNode);
      }else if(leftNode < heapSize)
      {
      largest = leftNode;
      }else
      {
      break;
      }

    if (this.compair(this.ordering[node], this.ordering[largest]) >= 0)
      {
      break;
      }

    this.swapPositions(node, largest);
    node = largest;
    }

  }

dataset.prototype.resortData = function()
  {
  this.heapSort();
  }

dataset.prototype.swapPositions = function(p1, p2)
  {
  var tmp = this.ordering[p1];
  this.ordering[p1] = this.ordering[p2];
  this.ordering[p2] = tmp;
  this.dataPos[this.ordering[p1]] = p1;
  this.dataPos[this.ordering[p2]] = p2;
  }

dataset.prototype.compair = function(ai, bi)
  {
  var result;
  var attr;
  for(var i = 0; i < this.sorts.length; i++)
    {
    attr = this.sorts[i]['attr'];
    attrID = this.attributes[attr];
    result = this.sortingFns[attr](this.data[attrID][ai], this.data[attrID][bi]);
    if (result != 0)
      {
      if (!this.sorts[i]['asc'])
        {
        result = result*-1;
        }
      return result;
      }
    }
  return 0;
  }

dataset.prototype.clear = function()
  {
  this.length = 0;
  this.freeSpots = new Array();
  this.dataPos = new Array();
  this.ordering = new Array();
  for(var i = 0; i < this.data.length; i++)
    {
    this.data[i] = new Array();
    }
  }

dataset.prototype.add = function(set)
  {
  var freeIndex = this.data[0].length;
  if (this.freeSpots.length != 0)
    {
    freeIndex = this.freeSpots.shift();
    }
  for(attr in set)
    {
    if (this.attributes[attr] != null)
      {
      this.data[this.attributes[attr]][freeIndex] = set[attr];
      }
    }
  this.length = this.length+1;
  var pos = this.ordering.length;
  this.ordering[pos] = freeIndex;
  this.dataPos[freeIndex] = pos;
  this.insertionSortLeft(pos);
  return freeIndex;
  }

dataset.prototype.insert = function(row)
  {
  this.add(row);
  }

dataset.prototype.update = function(where, values)
  {
  for(var i = 0; i < this.data[0].length; i++)
    {
    var matchesAll = true;

    for(attr in where)
      {
      if (this.data[this.attributes[attr]][i] != where[attr])
        {
        matchesAll = false;
        break;
        }
      }

    if (matchesAll)
      {
      for(attr in values)
        {
        this.data[this.attributes[attr]][i] = values[attr];
        }
      }
    }
  }


dataset.prototype.deleteRows = function(where)
  {
  for(var i = 0; i < this.data[0].length; i++)
    {
    var matchesAll = true;
 
    for(attr in where)
      {
      if (this.data[this.attributes[attr]][i] != where[attr])
        {
        matchesAll = false;
        break;
        }
      }


    if (matchesAll)
      {
      this.remove(i);
      }
    }
  }


dataset.prototype.select = function(values, where)
  {
  var result = new dataset(values, this.inputSorters);

  for(var i = 0; i < this.data[0].length; i++)
    {
    var matchesAll = true;
 
    for(attr in where)
      {
      if (this.data[this.attributes[attr]][i] != where[attr])
        {
        matchesAll = false;
        break;
        }
      }


    if (matchesAll)
      {
      var row = {};
      for(var j = 0; j < values.length; j++)
        {
        row[values[j]] = this.data[this.attributes[values[j]]][i];
        }
      result.insert(row);
      }
    }


  return result;
  }

dataset.prototype.selectArray = function(values, where)
  {
  return this.select(values, where).getByRange(0);
  }

dataset.prototype.remove = function(index)
  {
  for(var i = 0; i < this.data.length; i++)
    {
    this.data[i][index] = null;
    }
  var pos = this.dataPos[index];
  for(var i = pos; i < (this.ordering.length-1); i++)
    {
    this.ordering[i] = this.ordering[i+1];
    this.dataPos[this.ordering[i]] = i;
    }
  this.ordering.pop();
  this.length = this.length-1;
  this.dataPos[index] = null;
  this.freeSpots.push(index);
  }

dataset.prototype.get = function(index)
  {
  var row = new Array();
  for(attr in this.attributes)
    {
    row[attr] = this.data[this.attributes[attr]][index];
    }
  return row;
  }

dataset.prototype.getByPos = function(pos, retObj)
  {
  var result;

  if (pos >= this.ordering.length)
    {
    result = null;
    }else
    {
    result = this.get(this.ordering[pos]);
    }

  if (retObj == null)
    {
    return result;
    }else
    {
    retObj.run(result);
    }
  }

dataset.prototype.getByRange = function(start, count, retObj)
  {
  if (count == null)
    {
    count = this.length;
    }
  var result = new Array();
  var row = null;
  for(var i = 0; i < count; i++)
    {
    row = this.getByPos(start+i);
    if (row != null)
      {
      result[result.length] = this.getByPos(start+i);
      }else
      {
      break;
      }
    }
  if (retObj == null)
    {
    return result;
    }else
    {
    retObj.run(result);
    }
  }


function globalCach()
  {
  this.cach = new Array();
  this.broadcasters = new Array();
  }

globalCach.prototype.get = function(varName)
  {
  return this.cach[varName];
  }

globalCach.prototype.incommingData = function(data)
  {
  for (var i in data)
    {
    this.setVariable(i, data[i]);
    }
  }

globalCach.prototype.setVariable = function(varName, data)
  {
  if (data == this.cach[varName]) {return;}
  this.cach[varName] = data;
  if (this.broadcasters[varName] != null)
    {
    this.broadcasters[varName].broadcast(data);
    }
  }

globalCach.prototype.bind = function(varName, handler)
  {
  if (this.broadcasters[varName] == null)
    {
    this.broadcasters[varName] = new eventBroadcaster();
    }
  this.broadcasters[varName].addHook(handler);

  if (this.cach[varName] != null)
    {
    handler.run(this.cach[varName]);
    }
  }
var globalTimers = new Array();

function timer()
  {
  setTimeout('exeTimers();', 100);
  }

function exeTimers()
  {
  setTimeout('exeTimers();', 100);

  for(var i = 0; i < globalTimers.length; i++)
    {
    if (globalTimers[i] != null)
      {
      globalTimers[i].checkExecute();
      }
    }
  }

timer.prototype.addTimer = function(fn, interval)
  {
  for(var i = 0; i < globalTimers.length; i++)
    {
    if (globalTimers[i] == null) {break;}
    }
  globalTimers[i] = new timerObj(fn, interval);
//  return globalTimers[i];
  return i;
  }

timer.prototype.removeTimer = function(index)
  {
  globalTimers[index] = null;
/*
  for(var i = 0; i < globalTimers.length; i++)
    {
    if (globalTimers[i] == obj)
      {
      globalTimers[i] = null;
      }
    }
*/
  }

function timerObj(fn, interval)
  {
  this.fn = fn;
  this.timer = timer;
  }

timerObj.prototype.checkExecute = function ()
  {
  this.fn.run(this);
  }

function createHorizontalSlider(max, pos, height, width, slider, sliderWidth, posMonFn)
  {
  slider.style['position'] = 'absolute';

  var sliderInfo = document.createElement('div');
  sliderInfo.style['height'] = '20px';
  sliderInfo.style['width'] = '100px';
  sliderInfo.style['top'] = '-24px';
  sliderInfo.style['left'] = '5px';
  sliderInfo.style['position'] = 'absolute';
  sliderInfo.style['display'] = 'none';
  sliderInfo.className = 'sliderInfo';

  var styler = document.createElement('span');
  styler.className = 'player_media_popup_text';
  var labelText = document.createTextNode('test');
  styler.appendChild(labelText);

  sliderInfo.appendChild(styler);
  slider.appendChild(sliderInfo);

  slider.onmousedown = function(evnt)
    {
    if (isExplorer())
      {
      evnt = event;
      }
    this.parent.prevClientX = evnt.clientX;
    this.parent.draging = true;

    if (this.mouseupid != null)
      {
      app.docEvents.removeEvent('mouseup', this.mouseupid);
      this.mouseupid = null;
      }

    if (this.mousemoveid != null)
      {
      app.docEvents.removeEvent('mousemove', this.mousemoveid);
      this.mousemoveid = null;
      }

    this.mouseupid = app.docEvents.addEvent('mouseup', new objfn('mouseup', this));
    this.mousemoveid = app.docEvents.addEvent('mousemove', new objfn('mousemove', this));

    if (this.parent.posToTextFn != null)
      {
      this.parent.labelNode.style['display'] = 'block';
      this.parent.labelText.nodeValue = this.parent.posToTextFn.run(this.parent.sliderPos);
      }
    }

  slider.mouseup = function(evnt)
    {
    if (!this.parent.draging) {return;}

    if (isExplorer())
      {
      evnt = event;
      }

    this.parent.draging = false;

    if (this.mouseupid != null)
      {
      app.docEvents.removeEvent('mouseup', this.mouseupid);
      this.mouseupid = null;
      }

    if (this.mousemoveid != null)
      {
      app.docEvents.removeEvent('mousemove', this.mousemoveid);
      this.mousemoveid = null;
      }

//    app.docEvents.removeEvent('mouseup', this.mouseupid);
//    app.docEvents.removeEvent('mousemove', this.mousemoveid);

    if (this.parent.posMonFn != null)
      {
      this.parent.posMonFn.run(this.parent.sliderPos);
      }

    if (this.parent.posToTextFn != null)
      {
      this.parent.labelNode.style['display'] = 'none';
      }
    }

  slider.mousemove = function(evnt)
    {
    if (!this.parent.draging) {return;}

    if (isExplorer())
      {
      evnt = event;
      }

    var xChange = evnt.clientX - this.parent.prevClientX;
    this.parent.prevClientX = evnt.clientX;

    var change = this.parent.sliderMax * (xChange / (this.parent.physicalWidth - this.parent.sliderWidth));

    var finalPos = this.parent.sliderPos + change;

    if (finalPos > this.parent.sliderMax)
      {
      finalPos = this.parent.sliderMax;
      }

    if (finalPos < this.parent.sliderMin)
      {
      finalPos = this.parent.sliderMin;
      }

    this.parent.setPos(finalPos);

    if (this.parent.posToTextFn != null)
      {
      this.parent.labelText.nodeValue = this.parent.posToTextFn.run(finalPos);
      }
    }

  var div = document.createElement('div');

  div.labelNode = sliderInfo;
  div.labelText = labelText;

  slider.parent = div;

//  div.style['background'] = '#0000AA';
  div.style['position'] = 'relative';
  divToContainer(div, width, height, width, height);

  div.sliderMax = max;
  div.sliderMin = 0;
  div.slider = slider;
  div.sliderWidth = sliderWidth;
  div.posMonFn = posMonFn;
  div.physicalWidth = width;
  div.physicalHeight = height;
  div.sliderPos = pos;

  div.draging = false;
  div.prevClientX = 0;

  div.appendChild(slider);

  div.setPos = function(pos)
    {
    this.sliderPos = pos;
    var physicalPos;
    if (this.sliderMax == 0)
      {
      physicalPos = 0;
      }else
      {
      physicalPos = (this.physicalWidth-this.sliderWidth)*(this.sliderPos/this.sliderMax);
      }

    var newPos = Math.round(physicalPos).toString() + 'px';

    if (this.slider.style['left'] != newPos)
      {
      this.slider.style['left'] = newPos;
      }
    }

  div.setWidth = function(width)
    {
    this.maxX = width;
    this.minX = width;
    this.physicalWidth = width;
    this.setSize(this.physicalWidth, this.physicalHeight);
    this.setPos(this.sliderPos);
    }


  div.setPos(pos);

  return div;
  }

function objCach(phpfn, phpclass, responder)
  {
  this.cach = new Array();
  this.phpfn = phpfn;
  this.phpclass = phpclass;
  this.phpresponder = responder;
  this.waitingHooks = new Array();
  }

objCach.prototype.get = function(objs, hook)
  {

  var allObjsPreloaded = true;
  var objResult = new Array();
  var unknownObjs = new Array();

  for(var i = 0; i < objs.length; i++)
    {
    if (this.cach['id'+objs[i]] == null)
      {
      allObjsPreloaded = false;
      unknownObjs[unknownObjs.length] = objs[i];
      }else
      {
      objResult[objResult.length] = this.cach['id'+objs[i]];
      }
    }

  if (allObjsPreloaded)
    {
    hook.run(objResult);
    return;
    }

  this.addHook(hook, objs);

  var req = getPHPRequestHandler(new objfn('saveObjs', this), this.phpfn, this.phpclass, this.phpresponder);
  req.run(unknownObjs);
  }

objCach.prototype.saveObjs = function(objs)
  {
  for (var i = 0; i < objs.length; i++)
    {
    var obj = objs[i];
    this.cach['id'+obj['id']] = obj;
    }
  this.triggerHooks();
  }

objCach.prototype.triggerHooks = function()
  {
  for (var i = 0; i < this.waitingHooks.length; i++)
    {
    var hook = this.waitingHooks[i];
    var allFound = true;
    var result = new Array();
    for (var j = 0; j < hook['ids'].length; j++)
      {
      if (this.cach['id'+hook['ids'][j]] == null)
        {
        allFound = false;
        break;
        }else
        {
        result[result.length] = this.cach['id'+hook['ids'][j]];
        }
      }
    if (allFound)
      {
      hook['hook'].run(result);
      this.waitingHooks[i] = null;
      }
    }
  }

objCach.prototype.addHook = function(hook, objs)
  {
  var i;
  for(i = 0; i < this.waitingHooks.length; i++)
    {
    if (this.waitingHooks[i] == null)
      {
      break;
      }
    }

  this.waitingHooks[i] = new Array();
  this.waitingHooks[i]['hook'] = hook;
  this.waitingHooks[i]['ids'] = objs;
  }
function objfn(fn, obj)
  {
  this.fn = fn;
  this.obj = obj;
  }

objfn.prototype.runArr = function(arr)
  {
  if (this.obj == null)
    {
    return this.fn.apply(this, arr);
    }else
    {
    return this.obj[this.fn].apply(this.obj, arr);
    }
  }

objfn.prototype.run = function()
  {
  if (this.obj == null)
    {
    return this.fn.apply(this, arguments);
    }else
    {
    return this.obj[this.fn].apply(this.obj, arguments);
    }
  }


function queryCach()
  {
  this.cach = new Array();
  }

queryCach.prototype.query = function(args, handler, fn, cls, location)
  {
  if (this.cach[location] != null)
    {
    if (this.cach[location][cls] != null)
      {
      if (this.cach[location][cls][fn] != null)
        {
        var fnQs = this.cach[location][cls][fn];
        for (var i = 0; i < fnQs.length; i++)
          {
          if (isEqual(fnQs[i]['args'], args))
            {
            handler.run(fnQs[i]['result']);
            return;
            }
          }
        }
      }
    }
  new queryCachRunner(args, handler, fn, cls, location, this);
  }

queryCach.prototype.saveQuery = function(args, fn, cls, location, result)
  {
  if (this.cach[location] == null)
    {
    this.cach[location] = new Array();
    }

  if (this.cach[location][cls] == null)
    {
    this.cach[location][cls] = new Array();
    }

  if (this.cach[location][cls][fn] == null)
    {
    this.cach[location][cls][fn] = new Array();
    }

  var save = new Array();
  save['result'] = result;
  save['args'] = args;

  this.cach[location][cls][fn][this.cach[location][cls][fn].length] = save;

  }

function queryCachRunner(args, handler, fn, cls, location, cacher)
  {
  this.handler = handler;
  this.cacher = cacher;
  this.fn = fn;
  this.cls = cls;
  this.location = location;
  this.args = args;
  var rnr = getPHPRequestHandler(new objfn('ret', this), fn, cls, location);
  rnr.run.apply(rnr, args);
  }

queryCachRunner.prototype.ret = function(rsp)
  {
  this.cacher.saveQuery(this.args, this.fn, this.cls, this.location, rsp);
  this.handler.run(rsp);
  }




function responderManager()
  {
  }

responderManager.prototype.addRequest = function(rspObj)
  {
  }

function singleRequesterManager(file)
  {


  }


function sharedInputHandler(component, catchers)
  {
  this.component = component;
  this.events = new Array();
  component.inputHandler = this;

  var handlerfn = function(evnt)
    {
    var eventType;
    if (isExplorer())
      {
      evnt = event;
      }
    eventType = evnt.type;
    var events = this.inputHandler.events;
    for (var i = 0; i < events[eventType].length; i++)
      {
      if (events[eventType][i] != null)
        {
        events[eventType][i].run(evnt, i);
        }
      }
    }

  for(var i = 0; i < catchers.length; i++)
    {
    component['on'+catchers[i]] = handlerfn;
    this.events[catchers[i]] = new Array();
    }

  this.removeEvent = function(eventType, id)
    {
    this.events[eventType][id] = null;
    }

  this.addEvent = function(eventType, fn)
    {
    if (this.events[eventType] == null)
      {
      alert('Shared Input Handler: "' + eventType + '", unbounded event name.');
      return;
      }
    var i = 0;
    for (i = 0; i < this.events[eventType].length; i++)
      {
      if (this.events[eventType][i] == null)
        {
        break;
        }
      }
    this.events[eventType][i] = fn;
    return i;
    }
  }
function ssdataset(phpclass, loc, ssSort, sorters)
  {
  this.cls = phpclass;
  this.loc = loc;
  this.ssSort = (ssSort==true?true:false);

  this.cacheDS = null;
  this.cacheStart = null;
  this.cacheCount = null;

  this.sortingFns = sorters;
  this.sorts = new Array();
  }

ssdataset.prototype.getByRange = function(start, count, retObj)
  {
  if (!this.ssSort && this.cacheDS != null && this.cacheStart == start && this.cacheCount == count)
    {
    this.cacheDS.getByRange(start, count, retObj);
    return;
    }

  var ds = this;
  var resultParser = function(result)
    {
    ds.cacheResult(result);
    ds.cacheStart = start;
    ds.cacheCount = count;
    ds.cacheDS.getByRange(start, count, retObj);
    }

  var rsp = new phpRequest(new objfn(resultParser), 'getByRange', this.cls, this.loc);
  rsp.run((start==null?'':start), (count==null?'':count));
  }

ssdataset.prototype.cacheResult = function(result)
  {
  if (result.length == 0)
    {
    return;
    }
  if (this.cacheDS == null)
    {
    var attrs = new Array();
    for(i in result[0])
      {
      attrs[attrs.length] = i;
      }
    this.cacheDS = new dataset(attrs, this.sortingFns);
    }
  this.clearSort();
  this.cacheDS.clear();
  for(var i = 0; i < result.length; i++)
    {
    this.cacheDS.add(result[i]);
    }
  }

ssdataset.prototype.setSort = function(attr, asc)
  {
  for(var i = 0; i < this.sorts.length; i++)
    {
    if (this.sorts[i]['attr'] == attr)
      {
      removeFromArray(this.sorts, i);
      break;
      }
    }
  this.sorts.unshift({'attr':attr, 'asc':(asc==false?false:true)});

  if (!this.ssSort && this.cacheDS != null)
    {
    this.cacheDS.sorts = this.sorts;
    this.cacheDS.resortData();
    }

  }

ssdataset.prototype.getSort = function(attr)
  {
  for(var i = 0; i < this.sorts.length; i++)
    {
    if (this.sorts[i]['attr'] == attr)
      {
      return (this.sorts[i]['asc']?'asc':'desc');
      }
    }
  return null;
  }

ssdataset.prototype.getSortPos = function(attr)
  {
  for(var i = 0; i < this.sorts.length; i++)
    {
    if (this.sorts[i]['attr'] == attr)
      {
      return i;
      }
    }
  return null;
  }

ssdataset.prototype.clearSort = function()
  {
  this.sorts = new Array();
  if (!this.ssSort && this.cacheDS != null)
    {
    this.cacheDS.sorts = this.sorts;
    this.cacheDS.resortData();
    }
  }
function toolTip(delay)
  {
  if (delay == null)
    {
    delay = 500;
    }
  this.delay = delay;
  this.displaying = false;
  this.requested = false;
  this.rootNode = null;
  this.tipNode = null;
  this.displayText = null;
  this.timer = null;
  }

toolTip.prototype.request = function(root, text)
  {
  this.clear();
  this.rootNode = root;
  if (text == null)
    {
    text = this.collectText(this.rootNode);
    }
  this.displayText = text;
  var parent = this;
  var fn = function()
    {
    parent.timer = null;
    parent.display();
    }
  this.timer = setTimeout(fn, this.delay);
  this.requested = true;
  }

toolTip.prototype.collectText = function(root)
  {
  var result = "";
  for(var i = 0; i < root.childNodes.length; i++)
    {
    if (root.childNodes[i].nodeType == 3)
      {
      result = result + root.childNodes[i].nodeValue;
      }else
      {
      result = result + this.collectText(root.childNodes[i]);
      }
    }
  return result;
  }

toolTip.prototype.display = function()
  {
  this.displaying = true;
  this.tipNode = document.createElement('span');
  this.tipNode.className = 'toolTip_box';
  this.tipNode.appendChild(document.createTextNode(this.displayText));
  var evntObj = app.helper.getEventObj();
  this.tipNode.style['top'] = ((evntObj.clientY + document.documentElement.scrollTop) - 25) + "px";
  this.tipNode.style['left'] = (evntObj.clientX + document.documentElement.scrollLeft + 5) + "px";
  var parent = this;
  this.tipNode.onmouseover = function()
    {
    parent.clear();
    }
  document.body.appendChild(this.tipNode);
  }

toolTip.prototype.clear = function()
  {
  if (!this.requested)
    {
    return;
    }

  if (this.displaying)
    {
    this.tipNode.parentNode.removeChild(this.tipNode);
    }else
    {
    clearTimeout(this.timer);
    this.timer = null;
    }

  this.displaying = false;
  this.requested = false;
  }


//function phpCommunicator(objfn, fn, cls, location)
function phpRequest(returnFn, fn, cls, location)
  {
  var parent = this;
  this.objfn = returnFn;
  this.fn = fn;
  this.cls = cls;
  this.location = location;
  this.rsp = new xmlHTTPRequestor();

  this.tryCount = 1;
  this.headersSent = "";

  this.run = function()
    {
    var args = new Array();
    for (var i = 0; i < arguments.length; i++)
      {
      args[i] = arguments[i];
      }
    var toSendHeaders = "cls="+escape(this.cls)+"&fn="+escape(this.fn);
    toSendHeaders = toSendHeaders + varToPostExport(args);
    this.headersSent = toSendHeaders;
    this.rsp.run(this.location, this.headersSent);
    }

  this.retryRequest = function()
    {
//    parent.tryCount = parent.tryCount + 1;
    parent.rsp.run(parent.location, parent.headersSent);
    }

  this.rspStateMon = function()
    {
    var xmlResponder = this.rsp.xmlResponder;
    if (xmlResponder.readyState != 4) { return; };

    var responderStatus;
    try
      {
      responderStatus = xmlResponder.status;
      }catch(e)
      {
      responderStatus = -1;
      }
    if (responderStatus != 200)
      {
      if (this.tryCount == 3)
        {
        alert(location + '\n' + xmlResponder.status + ': Unable to retrieve XML response document.');
        return;
        }else
        {
        setTimeout(this.retryRequest, 1000);
        return;
        }
      }
    var result = null;
    try
      {
      var root = xmlResponder.responseXML.getElementsByTagName('result');
      root = root[0].childNodes[0];
      result = XMLtoVar(root);
      }catch(e)
      {
      alert("Error: " + e.toString() + "\nUnable to parse:\n"+xmlResponder.responseText);
      }
    this.parseResult(result);
    }

  this.parseResult = function(result)
    {
    if (this.objfn != null)
      {
      this.objfn.run(result);
      }
    }

  this.rsp.stateMonFn = new objfn('rspStateMon', this);
  }


function xmlHTTPRequestor()
  {
  var parent = this;
  this.xmlResponder = null; 
  this.stateMonFn = null;
  try
    {
    this.xmlResponder = new XMLHttpRequest ();
    }catch (dumb_browser_exception)
    {
    try
      {
      this.xmlResponder = new ActiveXObject ("Msxml2.XMLHTTP");
      }catch (yet_another_deal_with_ie_exception)
      {
      try
        {
        this.xmlResponder = new ActiveXObject ("Microsoft.XMLHTTP");
        } catch (give_up_now_exception)
        {
        alert('XML HTTP Request is not supported by your browser!');
        return;
        }
      }
    }
  if (typeof this.xmlResponder.overrideMimeType != 'undefined')
    {
    this.xmlResponder.overrideMimeType("text/xml");
    }
  this.run = function(location, postVars)
    {
    this.xmlResponder.abort();
    this.xmlResponder.onreadystatechange = this.monitorResponderState;
    this.xmlResponder.open('POST', location, true);
    this.xmlResponder.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    this.xmlResponder.send(postVars);
    }
  this.monitorResponderState = function()
    {
    if (parent.stateMonFn != null)
      {
      parent.stateMonFn.run();
      }
    }
  }


//Components: events, functions
function application()
  {
  this.components = new Array();


  this.addComponent = function(name, obj)
    {
    var desc = new Array();
    desc['obj'] = obj;
    desc['events'] = new Array();
    desc['functions'] = new Array();
    this.components[name] = desc;
    }

  this.getComponent = function(name)
    {
    return this.components[name]['obj'];
    }

  this.addFunction = function(component, fnName, fn)
    {
    if (this.components[component] == null)
      { 
      alert('Unable to add function. Component '+component+' does not exist.');
      return;
      }
    this.components[component]['functions'][fnName] = fn;
    }

  this.attachEvent = function(component, eventName, callbackfn)
    {
    if (this.components[component] == null)
      { 
      alert('Unable to attach Event. Component '+component+' does not exist.');
      return;
      }
    if (this.components[component]['events'][eventName] == null)
      {
      this.components[component]['events'][eventName] = new Array();
      }
    this.components[component]['events'][eventName][this.components[component]['events'][eventName].length] = callbackfn;
    }

  this.sendEvent = function(component, event, args)
    {
    if (this.components[component]['events'][event] == null)
      {
      return;
      }

    for (var i = 0; i < this.components[component]['events'][event].length; i++)
      {
      this.components[component]['events'][event][i].runArr(args);
      }
    }

  this.getFunction = function(component, fnName)
    {
    if (this.components[component] == null)
      {
      return null;
      }
    return this.components[component]['functions'][fnName];
    }

  }

function createDOMObj(tag, tags)
  {

  tagString = "";

  for (var x in tags)
    {
    tagString = tagString+' '+x+'="'+tags[x]+'"';
    }   

//  htmlNode = getChildByName(this.document, "HTML");
//  bodyNode = getChildByName(htmlNode, "BODY");
//  bodyNode.innerHTML = bodyNode.innerHTML + '<'+tag+tagString+'></'+tag+'>';

  var div = document.getElementById('DOMWorkSpace');
  div.innerHTML = "";
  div.innerHTML = '<'+tag+tagString+'></'+tag+'>';

  var node = div.removeChild(div.childNodes[0]);

  while (div.childNodes.length != 0)
    {
    div.removeChild(div.childNodes[0]);
    }

  return node;
  }

function parseHTML(html)
  {
  var div = document.getElementById('DOMWorkSpace');
  div.innerHTML = "";
  div.innerHTML = html;
  var node = div.removeChild(div.childNodes[0]);

  while (div.childNodes.length != 0)
    {
    div.removeChild(div.childNodes[0]);
    }

  return node;

  }

function clearChildNodes(parent)
  {
  while(parent.childNodes.length != 0)
    {
    parent.removeChild(parent.childNodes[0]);
    }
  }

function isArray(a)
  {
  return a.constructor == Array;
  }

function isEqual(st1, st2)
  {
  if (isArray(st1) != isArray(st2))
    {
    return false;
    }

  if (isArray(st1) && isArray(st2))
    {
    for(var i in st1)
      {
      if (isArray(st1[i]) != isArray(st2[i]))
        {
        return false;
        }
      if (isArray(st1[i]) && isArray(st2[i]))
        {
        if (!isEqual(st1[i], st2[i]))
          {
          return false;
          }
        }else
        {
        if (!(st1[i] == st2[i]))
          {
          return false;
          }
        }
      }
    return true;
    }else
    {
    return st1 == st2;
    }
  }

function eventBroadcaster()
  {
  this.events = new Array();

  this.addHook = function(handler)
    {
    var newid = this.events.length;
    this.events[newid] = handler;
    return newid;
    }

  this.broadcast = function()
    {
    for(var i = 0; i < this.events.length; i++)
      {
      if (this.events[i] != null)
        {
        this.events[i].runArr(arguments);
        }
      }
    }

  }

function isExplorer()
  {
  if (document.all)
    {
    return true;
    }else
    {
    return false;
    }
  }

function isMozilla()
  {
  if (document.all)
    {
    return false;
    }else
    {
    return true;
    }
  }

/*
function initLoader(retFn)
  {
  this.retObj = retFn;
  }

initLoader.prototype.run = function()
  {
  var t = new phpRequest(new objfn("handler", this), "includes", "loader", 'app/layout.php');
  t.run();
  }

initLoader.prototype.handler = function(doc)
  {
  this.retObj.run();
  }
*/


function XMLtoVar(node)
  {
  if (node == null)
    {
    return;
    }

  var type = node.getAttribute('type');

  if (type == "string")
    {
    if (node.childNodes.length == 1)
      {
      return node.childNodes[0].nodeValue;
      }else
      {
      var str = "";
      for(var i = 0; i < node.childNodes.length; i++)
        {
        str = str + node.childNodes[i].nodeValue;
        }
      return str;
      }
    }else if (type == "array")
    {
    var result = new Array();

    for(var i = 0; i < node.childNodes.length; i++)
      {
      result[node.childNodes[i].getAttribute('key')] = XMLtoVar(node.childNodes[i].childNodes[0]);
      }

    return result;
    }

  }

function varToPostExport(variable, base)
  {
  if (variable == null) {return "";}

  if (base == null)
    {
    base = "input";
    }

  if (!(typeof variable == 'object'))
    {
    return "&"+base+"="+escape(variable);
    }else
    {
    var toReturn = '';
    for (i in variable)
      {
      toReturn = toReturn + varToPostExport(variable[i], base+"["+i+"]");
      }
    return toReturn;
    }
  }

function removeFromArray(arr, index)
  {
  for(var i = index; i < (arr.length-1); i++)
    {
    arr[i] = arr[i+1];
    }
  arr.pop();
  }