///////////////////////////////////////////////////////////////
//
//  Script: Project Paging
//  Version: 2.0
//  Author: Craig Nelson / Classic Labs
//
//  Notes: basic paging, oo version
//

  var Ascribe = Ascribe || {};
  
  Ascribe.Paging = function (config) {
    // scope adjustment
    var that = this;
    
    // data
    this.projects = config.projects;
    
    // general configs
    this.pagesOutput = '';
    this.limit = config.projectsPerPage || 12; // number of results to display per page
    
    // ids
    this.pagesOutputID = config.pagesOutputID || 'pages-container';
    this.projectsOutputID = config.projectsOutputID || 'projects-container';
    
    // methods
    this.projectPaging = function (page) {
      var projectsOutput = '';
      var total = this.projects.length;
      var limit = this.limit; // number of results to display per page
      var page = page || 1;
      var pages = Math.ceil(total / limit);
      var offset = (page * limit - limit);
      var set = limit + offset;
      if (set > total) {
        set = total; // so the last iteration of our forloop will be set correctly
      }

      // check value of pagesOutput so we only write the pages list once
      // check if total > limit so we only show paging if there is more than one page
      if (this.pagesOutput == '' && total > limit) {
        this.pagesOutput = '<h5>Pages &#187;</h5>';
        this.pagesOutput += '<ul id="pages">';
        for (var i=1; i<pages + 1; i++) {
          this.pagesOutput += '<li><a href="#">' + [i] + '</a></li>';
        }
        this.pagesOutput += '</ul><!-- #pages -->';
        $(this.pagesOutputID).style.display = 'block';
        $(this.pagesOutputID).update(this.pagesOutput);

        // setup events for pages list
        var elements = $$('#pages li a');
        for (var x=0; x<elements.length; x++) {
          if ([x] == 0) {
            elements[x].className = 'active'; // set first page to active when script is first run
          }
          Event.observe(elements[x], 'click', function (event) {
            for (var y=0; y<elements.length; y++) {
              elements[y].className = '';
            }
            this.className = 'active';
            this.blur();
            that.projectPaging(this.innerHTML);
            event.preventDefault();
          });
        }
      }
      this.projectsOutput = this.projectsHTMLOutput(offset, set, this.projects);
      $(this.projectsOutputID).update(this.projectsOutput);
    }; // projectPaging()
    
    this.projectsHTMLOutput = config.projectsHTMLOutput || function (offset, set, aProjects) {
      output = '<ul id="projects">';
      for (var i=offset; i<set; i++) {
        output += '<li><a href="' + aProjects[i].projectPath + '" title="' + aProjects[i].projectTitle + '"><img src="' + aProjects[i].projectThumbnailPath + '" alt="' + aProjects[i].projectTitle + '" /></a><h3>' + aProjects[i].projectTitle + '</h3></li>';
      }
      output += '</ul><!-- #projects -->';
      return output;
    }; // projectsHTMLOutput()
    
    this.projectPaging(); // initial paging
  }; // constructor