(function(){
    var PhotoPagination = Class.create({
        initialize: function() {
          this.next_button = $("next");
          this.previous_button = $("previous");

          this.photogroup_length = $$(".photogroup").length;
          this.link_pages = $("pages");
          this.pagination = $("pagination");
          this.photo_groups = $$('.photo_page');
          this.photoCollections = this.photo_groups[0].select(".photogroup");

          this.currentPage = 0;

          this.widthOfPhotoPage = $$('.photo_page');
          this.createPageLinks();
          this.showHidePageLinks();
          this.bindEvents();
        },

        createPageLinks: function() {
          for (i= 1; i <= this.photogroup_length; i++) {
            var link = new Element('a', {href: ''}).update(""+i);
            this.next_button.insert({ 'before': link });
          }

          //make first page active..
          this.pagination.select('a')[this.currentPage + 1].addClassName('active');
          this.previous_button.addClassName('disabled_pagination');

          //Set the width of the photo_page class
          this.widthOfPhotoPage[0].setStyle({ width: "" + this.photogroup_length * 330 +"px", height: "520px" });
        },

        bindEvents: function() {
          this.pagination.on("click", "a", this.goToPageClickEvent.bind(this));
        },

        goToPageClickEvent: function(event) {
          event.stop();

          this.clearClassNames();
          //Set the new page index according which button is pressed..
          this.setCurrentPage(event);
          //Change the style of the buttons..
          this.setStylesOfControls();
          //show and hide page links
          this.showHidePageLinks();
          //morph the photo div to the left or right depending on the useraction
          this.photo_groups[0].morph("left: " + (-1 * (this.currentPage * 330)) +"px", {duration: .5, transition: Effect.Transitions.sinoidal});
        },

        clearClassNames: function() {
          this.pagination.select('a').invoke('removeClassName','active');
          this.previous_button.removeClassName('disabled_pagination')
          this.next_button.removeClassName('disabled_pagination')
        },

        setCurrentPage: function(event){
          switch (event.element().id) {
            case "next":
              this.currentPage += 1;
              break;
            case "previous":
              this.currentPage -= 1;
              break;
            default:
              this.currentPage = parseInt(event.element().innerHTML) -1;
              break;
          } 
        },

        setStylesOfControls: function() {
          if (this.currentPage < 0)
            this.currentPage = 0;

          if (this.currentPage == this.photogroup_length -1)
            this.next_button.addClassName('disabled_pagination');

          if (this.currentPage == this.photogroup_length) {
            this.currentPage -=1;
            this.next_button.addClassName('disabled_pagination');
          }
          
          this.pagination.select("a")[this.currentPage + 1].addClassName('active');

          if (this.currentPage == 0) 
            this.previous_button.addClassName('disabled_pagination');
          else 
            this.previous_button.removeClassName('disabled_pagination');
        },
        
        showHidePageLinks: function() {
          if (this.photogroup_length <= 6) { return; }
          if ($("dotted") !== null) { $("dotted").remove(); }

          if (this.currentPage < 2) {
            this.pagination.select("a")[3].insert({after: new Element("span", {'id':'dotted'}).update("...")});
            this.showLinks(1, 3);
            this.hideLinks(4, (this.photogroup_length - 3));
            this.showLinks((this.photogroup_length - 2), this.photogroup_length);
          } else if (this.currentPage >= (this.photogroup_length - 3)) {
            this.hideLinks(1, (this.photogroup_length - 6));
            this.showLinks((this.photogroup_length - 5), this.photogroup_length);
          } else {
            this.hideLinks(1, (this.currentPage - 1));
            if ((this.photogroup_length - 4 == this.currentPage) || (this.photogroup_length - 5 == this.currentPage)) {
              this.showLinks((this.photogroup_length - 5), this.photogroup_length);
            } else {
              this.showLinks((this.currentPage), (this.currentPage + 2));
              var i = this.currentPage + 2;
              this.pagination.select("a")[i].insert({after: new Element("span", {'id':'dotted'}).update("...")});
              this.hideLinks((this.currentPage + 3), (this.photogroup_length - 3));
              this.showLinks((this.photogroup_length - 2), this.photogroup_length);
            }
          }
        },

        showLinks: function(from, to) {
          for (var i = from; i <= to; i++)
            this.pagination.select("a")[i].show();
        },
        hideLinks: function(from, to) {
          for (var i = from; i <= to; i++)
            this.pagination.select("a")[i].hide();
        }
    });

    document.observe("dom:loaded", function(){ 
      if(!$("pagination")){ return };

      window.photo_pagination = new PhotoPagination(); 
    });
})();