/*global alert, window, $, $clear, Class, Element, Event, Fx, Request */
/*jsl:option explicit*/

var TrackViewer = new Class({
      initialize: function (trackName, trackTitle, pages, startAt, thumbnailSize, pointerSize) {
            var trackviewer;
            
            trackviewer = this;
            
            this.trackName     = trackName;
            this.trackTitle    = trackTitle;
            this.pages         = pages;
            this.startAt       = startAt;
            this.numPages      = this.pages.length;
            this.currentPage   = 0;
            this.toolbarOffset = 0;
            this.thumbnailSize = thumbnailSize || {'x': 100, 'y': 100};
            this.pointerSize   = pointerSize   || {'x': 32, 'y': 32};
            
            this.thumbnailSizeWithMargin = {'x': this.thumbnailSize.x + 20, 'y': this.thumbnailSize.y + 10};
            
            this.thumbnailListSize = {'x': this.thumbnailSizeWithMargin.x * this.numPages, 'y': 120};
            this.effectFinished    = true;
            this.active            = false;
            this.activated         = false;
            this.viewSize          = $('content').getSize();
            
            this.images = {};
            
            this._scrollEffect = new Fx.Scroll(window);
            
            pages.each(function (page) {
                  var url;
                  
                  url = '/rider/default/' + trackName + '/pages/' + page + '/image_urls';
                  
                  var jsonRequest = new Request.JSON({
                        url: url,
                        onSuccess: function (imageURLs) {
                              var images = Asset.images(imageURLs, {
                                    onComplete: function (){
                                          trackviewer.images[page] = images;
                                    }
                              });
                        },
                        onFailure: function () {
                              alert("Image preload JSON request to " + url + " failed!");
                        }
                  });
                  
                  jsonRequest.send();
            });
            
            this.nextFunction = function (event) {
                  event = new Event(event);
                  event.stop();
                  
                  if (trackviewer.effectFinished) {
                        trackviewer.previousPage();
                  }
            };
            
            this.previousFunction = function (event) {
                  event = new Event(event);
                  event.stop();
                  
                  if (trackviewer.effectFinished) {
                        trackviewer.nextPage();
                  }
            };
            
            this._keydown = function (event) {
                  if (event.key === 'left') {
                        trackviewer.previousPage();
                  }
                  else if (event.key === 'right') {
                        trackviewer.nextPage();
                  }
            };
            
            this.windowResized = function (event) {
                  if (trackviewer.active) {
                        trackviewer.viewSize = $('content').getSize();
                        
                        trackviewer.updateToolbar();
                  }
            };
            
            this.thumbnailClicked = function (event) {
                  trackviewer.setSelectedPageChainAware(this.retrieve('n'));
                  
                  event.stopPropagation();
            };
      },
      
      start: function () {
            this.inflate();
            
            //var addthis_share = {
            //      'title' : this.trackTitle,
            //      'url'   : application_url + '/default/frontpage_1?view_track=' + this.trackName
            //};
            //
            //addthis.button('#addthis-button', {}, addthis_share);
            
            this._title_before = document.title;
            document.title = this.trackTitle;
            
            $('trackviewer-thumbnails-toolbar').addEvent('click', function (event) {
                event.stopPropagation();
            });
            
            $('trackviewer-thumbnail-list').setStyle('left', 0);
            
            this.active    = true;
            this.activated = true;
            
            this._scrolled_before_open = window.getScroll().y;
            
            this.initToolbar();
            
            if (this.startAt) {
                  this.setSelectedPageChainAware(this.startAt);
            }
            else {
                  this.updateContentPane();
            }
            
            if (this.numPages > 1) {
                  $('trackviewer-previous-nav-arrow'        ).setStyle('visibility', 'visible');
                  $('trackviewer-next-nav-arrow'            ).setStyle('visibility', 'visible');
                  $('trackviewer-previous-nav-arrow_padding').setStyle('visibility', 'visible');
                  $('trackviewer-next-nav-arrow_padding'    ).setStyle('visibility', 'visible');
                  $('trackviewer-thumbnails-toolbar'        ).setStyle('visibility', 'visible');
                  $('trackviewer-thumbnail-pointer'         ).setStyle('visibility', 'visible');
                  //$('trackviewer-toolbar-shadow'            ).setStyle('height'    , '120px');
                  //$('trackviewer_close_text'                ).setStyle('top'       , '128px');
                  
                  $('trackviewer-previous-nav-arrow').addEvent('click', this.nextFunction);
                  $('trackviewer-next-nav-arrow'    ).addEvent('click', this.previousFunction);
                  
                  //$('addthis-button').setStyle('top', '125px');
                  //$('addthis-button').setStyle('visibility', 'visible');
            }
            else {
                  $('trackviewer-previous-nav-arrow'        ).setStyle('visibility', 'hidden');
                  $('trackviewer-next-nav-arrow'            ).setStyle('visibility', 'hidden');
                  $('trackviewer-previous-nav-arrow_padding').setStyle('visibility', 'hidden');
                  $('trackviewer-next-nav-arrow_padding'    ).setStyle('visibility', 'hidden');
                  $('trackviewer-thumbnails-toolbar'        ).setStyle('visibility', 'hidden');
                  $('trackviewer-thumbnail-pointer'         ).setStyle('visibility', 'hidden');
                  //$('trackviewer-toolbar-shadow'            ).setStyle('height'    , 0);
                  //$('trackviewer_close_text'                ).setStyle('top'       , '10px');
                  
                  //$('addthis-button').setStyle('top', '5px');
                  //$('addthis-button').setStyle('visibility', 'visible');
            }
            
            window.addEvent('keydown', this._keydown);
            window.addEvent('resize' , this.windowResized);
      },
      
      stop: function () {
            this.active = false;
            
            //$('trackviewer-addthis-button').setStyle('visibility', 'hidden');
            
            this.deflate();
            
            window.removeEvent('keydown', this._keydown);
            window.removeEvent('resize' , this.windowResized);
            
            window.scrollTo(0, this._scrolled_before_open);
            
            document.title = this._title_before;
            
            //var addthis_share = {
            //      'title' : document.title,
            //      'url'   : window.location.href
            //};
            //
            //addthis.button('#addthis-button', {}, addthis_share);
            //$('addthis-button').setStyle('visibility', 'visible');
            //$('addthis-button').setStyles({
            //      'top'  : '5px',
            //      'left' : '5px'
            //});
      },
      
      inflate: function () {
            var container, trackviewer_content_div, trackviewer_thumbnails_toolbar;
            
            container = $('trackviewer-div');
            
            container.empty();
            
            //container.grab(new Element('div', {'id' : 'trackviewer-toolbar-shadow'}));
            
            trackviewer_content_div = new Element('div', {'class' : 'trackviewer-content', 'id' : 'trackviewer-content-div'});
            trackviewer_content_div.grab(new Element('div'));
            
            container.grab(trackviewer_content_div);
            
            container.grab(new Element('div', {'id' : 'trackviewer_close_text', 'text' : "click here to close"}));
            
            container.grab(new Element('div', {'class' : 'trackviewer-nav-arrow_padding', 'id' : 'trackviewer-previous-nav-arrow_padding'}));
            container.grab(new Element('div', {'class' : 'trackviewer-nav-arrow_padding', 'id' : 'trackviewer-next-nav-arrow_padding'}));
            container.grab(new Element('div', {'class' : 'trackviewer-nav-arrow', 'id' : 'trackviewer-previous-nav-arrow'}));
            container.grab(new Element('div', {'class' : 'trackviewer-nav-arrow', 'id' : 'trackviewer-next-nav-arrow'}));
            
            trackviewer_thumbnails_toolbar = new Element('div', {'class' : 'trackviewer-toolbar', 'id' : 'trackviewer-thumbnails-toolbar'});
            trackviewer_thumbnails_toolbar.grab(new Element('div', {'class' : 'trackviewer-toolbar-scroll-pane', 'id' : 'trackviewer-thumbnail-list'}));
            
            container.grab(trackviewer_thumbnails_toolbar);
            
            container.grab(new Element('div', {'class' : 'trackviewer-pointer', 'id' : 'trackviewer-thumbnail-pointer'}));
      },
      
      deflate: function () {
            $('trackviewer-div').empty();
      },
      
      initToolbar: function () {
            var img, n, trackviewer, clickHandler, connection_line_div, line_width;
            
            trackviewer = this;
            
            this._toolbarSlideEffect = new Fx.Tween(
                  $('trackviewer-thumbnail-list'),
                  {
                        property : 'left',
                        link     : 'cancel'
                  }
            );
            
            this._pointerSlideEffect = new Fx.Tween(
                  $('trackviewer-thumbnail-pointer'),
                  {
                        property   : 'left',
                        transition : Fx.Transitions.Back.easeOut,
                        link       : 'cancel',
                        onComplete : function () {
                              trackviewer.effectFinished = true;
                        }
                  }
            );
            
            $('trackviewer-thumbnails-toolbar').setStyle('height', this.thumbnailListSize.y);
            //$('trackviewer-toolbar-shadow'    ).setStyle('height', this.thumbnailListSize.y);
            $('trackviewer-thumbnail-list'    ).setStyle('width' , this.thumbnailListSize.x);
            $('trackviewer-thumbnail-list'    ).setStyle('height', this.thumbnailListSize.y);
            
            for (n = 0; n < this.numPages; n += 1) {
                  img = new Element('img');
                  
                  img.set('class'  , 'trackviewer-thumbnail');
                  img.set('id'     , 'trackviewer-thumbnail-' + n);
                  img.set('src'    , '/rider/@@/rider/rider/' + this.pages[n] + '/picture/thumbnail');
                  img.set('width'  , this.thumbnailSize.x);
                  img.set('height' , this.thumbnailSize.y);
                  
                  img.store('n' , n);
                  
                  $('trackviewer-thumbnail-list').grab(img);
                  
                  $('trackviewer-thumbnail-' + n).addEvent('click', this.thumbnailClicked);
                  
                  //if (this.pages[n + 1] && !this.pages[n + 1].clickable) {
                  //      connection_line_div = new Element('div', {
                  //            'class': 'trackviewer-thumbnails-toolbar-connection-line'
                  //      });
                  //      
                  //      $('trackviewer-thumbnail-list').grab(connection_line_div);
                  //      
                  //      line_width = parseInt(img.getStyle('margin-left'), 10) + parseInt(img.getStyle('margin-right'), 10);
                  //      
                  //      connection_line_div.setStyles({
                  //            'width' : line_width + 'px',
                  //            'top'   : img.getCoordinates(img.getParent()).top + Math.floor(this.thumbnailSize.y / 2) - 1 + 'px',
                  //            'left'  : img.getCoordinates(img.getParent()).right
                  //      });
                  //}
            }
            
            this.updateToolbar();
      },
      
      updateToolbar: function () {
            var pointerX, xofs, toolbarEffect, pointerEffect, trackviewer;
            
            trackviewer = this;
            
            // Center toolbar scroll pane if narrower than visible toolbar
            
            if (this.thumbnailListSize.x < this.viewSize.x) {
                  this.toolbarOffset = parseInt((this.viewSize.x - this.thumbnailListSize.x) / 2, 10);
                  this._toolbarSlideEffect.set(this.toolbarOffset);
            }
            else {
                  // If thumbnail not fully visible, scroll toolbar scroll pane to bring it into view
                  
                  if (this.toolbarOffset + ((this.currentPage + 1) * this.thumbnailSizeWithMargin.x) > this.viewSize.x) {
                        this.toolbarOffset = this.viewSize.x - ((this.currentPage + 1) * this.thumbnailSizeWithMargin.x);
                        this._toolbarSlideEffect.start(this.toolbarOffset);
                  }
                  else if ((this.currentPage * this.thumbnailSizeWithMargin.x) + this.toolbarOffset < 0) {
                        this.toolbarOffset = -(this.currentPage * this.thumbnailSizeWithMargin.x);
                        this._toolbarSlideEffect.start(this.toolbarOffset);
                  }
            }
      
            // Calculate arrow position
            
            pointerX = this.toolbarOffset + (this.thumbnailSizeWithMargin.x * this.currentPage) + parseInt(this.thumbnailSizeWithMargin.x / 2, 10);
            
            // Center arrow on selected thumbnail
            
            xofs = parseInt(this.pointerSize.x / 2, 10);
            
            if ($('trackviewer-thumbnail-pointer').getStyle('left') === "0px") {
                  this._pointerSlideEffect.set(pointerX - xofs);
            }
            else {
                  this.effectFinished = false;
                  this._pointerSlideEffect.start(pointerX - xofs);
            }
      },
      
      updateContentPane: function () {
            var trackviewer, contentDiv, fadeoutEffect, fadeinEffect, requestUrl, ajaxRequest, ajaxHTML, fadeoutComplete, fadeDuration, image, scrollEffect;
            
            trackviewer     = this;
            ajaxHTML        = false;
            fadeoutComplete = false;
            contentDiv      = $('trackviewer-content-div');
            fadeDuration    = 400;
            
            fadeinEffect = new Fx.Tween(
                  contentDiv,
                  {
                        property   : 'opacity',
                        duration   : fadeDuration / 2
                  }
            );
            
            fadeoutEffect = new Fx.Tween(
                  contentDiv,
                  {
                        property   : 'opacity',
                        duration   : fadeDuration / 2,
                        onComplete : function () {
                              var trackpage_container_element;
                              
                              if (ajaxHTML) {
                                    contentDiv.getChildren()[0].empty();
                                    
                                    trackpage_container_element = new Element('div', {
                                          'id'   : 'trackpage-container',
                                          'html' : ajaxHTML
                                    } );
                                    
                                    contentDiv.getChildren()[0].grab(trackpage_container_element);
                                    
                                    $('trackpage-container').getChildren()[0].addEvent('click', function (event) {
                                          event.stopPropagation();
                                    });
                                    
                                    fadeinEffect.start(1);
                                    
                                    //$('addthis-button').setStyle('left', $('trackpage-container').getPosition().x);
                                    
                                    pageTracker._trackPageview('/' + application_url + '/' + trackviewer.trackName + '/pages/' + trackviewer.currentPage);
                              }
                              else {
                                    fadeoutComplete = true;
                              }
                        }
                  }
            );
            
            window.scrollTo(0, 0);
            
            requestUrl = "/rider/default/" + this.trackName + "/pages/" + this.pages[this.currentPage] + "/mainhtml";
            
            ajaxRequest = new Request.HTML({method: 'get', url: requestUrl,
                  onSuccess: function (tree, els, html) {
                        var trackpage_container_element;
                        
                        if (fadeoutComplete) {
                              contentDiv.getChildren()[0].empty();
                              
                              trackpage_container_element = new Element('div', {
                                    'id'   : 'trackpage-container',
                                    'html' : html
                              } );
                              
                              contentDiv.getChildren()[0].grab(trackpage_container_element);
                              
                              $('trackpage-container').getChildren()[0].addEvent('click', function (event) {
                                    event.stopPropagation();
                              });
                              
                              fadeinEffect.start(1);
                              
                              //$('addthis-button').setStyle('left', $('trackpage-container').getPosition().x);
                              
                              //pageTracker._trackPageview('/' + this.trackName + '/pages/' + this.currentPage);
                        }
                        else {
                              ajaxHTML = html;
                        }
                  },
                  //Our request will most likely succeed, but just in case, we'll add an
                  //onFailure method which will let the user know what happened.
                  onFailure: function () {
                        alert("Page content request to " + ajaxRequest.url + " failed.");
                  }});
            
            // Don't fade out if just started
            if (this.activated) {
                  fadeoutEffect.set(0);
                  fadeoutComplete = true;
                  this.activated  = false;
            }
            else {
                  fadeoutEffect.start(0);
            }
            
            ajaxRequest.send();
      },
      
      setSelectedPageChainAware: function (page) {
            //var same_series;
            //
            //same_series = true;
            //
            //if (page > this.currentPage) {
            //      for ( var n = this.currentPage + 1 ; n < page + 1 ; n++ ) {
            //            if (this.pages[n].clickable === true) {
            //                  same_series = false;
            //            }
            //      }
            //
            //      if (same_series) {
            //            this.nextPage();
            //      }
            //}
            //else if (page < this.currentPage ) {
            //      for ( var n = this.currentPage - 1 ; n > page - 1 ; n-- ) {
            //            if (this.pages[n + 1].clickable === true) {
            //                  same_series = false;
            //            }
            //      }
            //
            //      if (same_series) {
            //            this.setSelectedPage(page_num);
            //      }
            //}
            //else {
            //      // Never process click on the thumbnail for the current page
            //      return;
            //}
            //
            //if (!same_series) {
            //      while (this.pages[page].clickable === false) {
            //            page = page - 1;
            //      }
            //      
            //      if (this.currentPage !== page) {
                        this.setSelectedPage(page);
            //      }
            //}
      },
      
      setSelectedPage: function (page) {
            if (this.numPages > 1) {
                  this.currentPage = page;
                  
                  this.updateToolbar();
                  this.updateContentPane();
            }
      },
      
      nextPage: function () {
            this.setSelectedPage((this.currentPage + 1) % this.numPages);
      },
      
      previousPage: function () {
            var page_num;
            
            page_num = this.currentPage > 0 ? this.currentPage - 1 : this.numPages - 1;
            
            //if (this.pages[this.currentPage].clickable === true) {
            //      while (this.pages[page_num].clickable === false) {
            //            page_num = page_num - 1;
            //      }
            //}
            
            this.setSelectedPage(page_num);
      }
});