/**
 * Loads and displays (presents) resources (templates) in our app.
 */
var Presenter = {
  // parses a DOM from a template
  makeDocument: function(resource) {
    if (!Presenter.parser) {
      Presenter.parser = new DOMParser();
    }
    var doc = Presenter.parser.parseFromString(resource, "application/xml");
    return doc;
  },

  modalDialogPresenter: function(xml) {
    navigationDocument.presentModal(xml);
  },
 
  // pushes document to the stack, giving us back and forth capability
  pushDocument: function(xml) {
    navigationDocument.pushDocument(xml);
  },

  // loads a resource when clicked in the app
  load: function(event) {
      console.log(event);

      var self = this,
          ele = event.target,
          templateURL = ele.getAttribute("template"),
          presentation = ele.getAttribute("presentation"),
          videoURL = ele.getAttribute("videoURL");

      /*
      Check if the selected element has a 'template' attribute. If it does then we begin
      the process to present the template to the user.
      */
      if (templateURL) {
          /*
          Whenever a user action is taken you need to visually indicate to the user that
          you are processing their action. When a users action indicates that a new document
          should be presented you should first present a loadingIndicator. This will provide
          the user feedback if the app is taking a long time loading the data or the next 
          document.
          */
          self.showLoadingIndicator(presentation);

          /* 
          Here we are retrieving the template listed in the templateURL property.
          */
          resourceLoader.fetch({
            url: templateURL,
            success: function(document) {
                document.addEventListener('select', self.load.bind(self));
                document.addEventListener('select', self.pushDocument(document));
            }
          });

          // resourceLoader.loadResource(templateURL,
          //     function(resource) {
          //         if (resource) {
                      
          //             The XML template must be turned into a DOMDocument in order to be 
          //             presented to the user. See the implementation of makeDocument below.
                      
          //             var doc = self.makeDocument(resource);
                      
          //             doc.addEventListener("select", self.load.bind(self));
          //             doc.addEventListener("select", self.pushDocument(doc));
          //         }
          //     }
          // );
      }

      // if we have a video URL on whatever we click, we spawn a video player instance
      if (videoURL) {
        console.log("Video link clicked!");
        
        var player = new Player();
        var playlist = new Playlist();
        var mediaItem = new MediaItem("video", videoURL);
     
        player.playlist = playlist;
        player.playlist.push(mediaItem);
        player.present();
      };
  },

  showLoadingIndicator: function(presentation) {
      /*
      You can reuse documents that have previously been created. In this implementation
      we check to see if a loadingIndicator document has already been created. If it 
      hasn't then we create one.
      */
      if (!this.loadingIndicator) {
          this.loadingIndicator = this.makeDocument(this.loadingTemplate);
      }
      
      /* 
      Only show the indicator if one isn't already visible and we aren't presenting a modal.
      */
      if (!this.loadingIndicatorVisible && presentation != "modalDialogPresenter" && presentation != "menuBarItemPresenter") {
          navigationDocument.pushDocument(this.loadingIndicator);
          this.loadingIndicatorVisible = true;
      }
  },

  removeLoadingIndicator: function() {
      if (this.loadingIndicatorVisible) {
          navigationDocument.removeDocument(this.loadingIndicator);
          this.loadingIndicatorVisible = false;
      }
  },

  loadingTemplate: `<?xml version="1.0" encoding="UTF-8" ?>
    <document>
      <loadingTemplate>
        <activityIndicator>
          <text>Loading...</text>
        </activityIndicator>
      </loadingTemplate>
    </document>`
}