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

var ModalAjaxDialog = new Class({
      Extends: StickyWin.Modal.Ajax,
      
      initialize : function (options) {
            this.parent(options);
            options = options||{};
            var original_hide_callback = (options.modalOptions||{}).onModalHide;
            this.setModalOptions($merge(options.modalOptions||{}, {
                  onModalHide: function(){
                        if (original_hide_callback) original_hide_callback();
                        this.hide(false);
                  }.bind(this)
            }));
      }
});

function measureScrollbarWidth() {
      var inner = document.createElement('p');
      inner.style.width = '100%';
      inner.style.height = '200px';
      
      var outer = document.createElement('div');
      outer.style.position = 'absolute';
      outer.style.top = '0px';
      outer.style.left = '0px';
      outer.style.visibility = 'hidden';
      outer.style.width = '200px';
      outer.style.height = '150px';
      outer.style.overflow = 'hidden';
      outer.appendChild(inner);
      
      document.body.appendChild(outer);
      
      var w1 = inner.offsetWidth;
      outer.style.overflow = 'scroll';
      var w2 = inner.offsetWidth;
      
      if (w1 === w2) {
            w2 = outer.clientWidth;
      }
      
      document.body.removeChild(outer);
      
      return (w1 - w2);
};

var TrackViewer = new Class({
      Implements: [Class.Occlude],
      
      initialize: function (options) {
            var trackviewer;
            
            if (this.occlude('trackviewer', $('trackviewer-div'))) {
                  trackviewer = this.occluded;
            }
            else {
                  trackviewer = this;
                  
                  trackviewer.nextFunction = function (event) {
                        event = new Event(event);
                        event.stop();
                        
                        if (trackviewer.effect_finished) {
                              trackviewer.previousPage();
                        }
                  };
                  
                  trackviewer.previousFunction = function (event) {
                        event = new Event(event);
                        event.stop();
                        
                        if (trackviewer.effect_finished) {
                              trackviewer.nextPage();
                        }
                  };
                  
                  trackviewer._keydown = function (event) {
                        var current_scroll;
                        
                        if (event.key === 'esc') {
                              if ($('trackviewer-thumbview-div')) {
                                    trackviewer.closeThumbview(null);
                              }
                              else if (trackviewer.active_modal === null) {
                                    trackviewer.stop();
                                    $('trackviewer-div').set('styles', {'z-index': '-3'});
                              }
                              else {
                                    trackviewer.active_modal.hide();
                              }
                              
                              event.stop();
                        }
                        
                        if (trackviewer.active_modal === null) {
                              if ($('trackviewer-thumbview-div')) {
                                    if (event.key === 'left') {
                                          if (trackviewer.thumbview_selected_thumb % trackviewer.thumbview_row_thumbs > 0) {
                                                $('thumbnail-div-' + trackviewer.thumbview_selected_thumb).set('class', 'thumbnail-div');
                                                trackviewer.thumbview_selected_thumb -= 1;
                                                $('thumbnail-div-' + trackviewer.thumbview_selected_thumb).set('class', 'thumbnail-div selected-thumbnail-div');
                                          }
                                          
                                          event.stop();
                                    }
                                    else if (event.key === 'right') {
                                          if ((trackviewer.thumbview_selected_thumb % trackviewer.thumbview_row_thumbs) < (trackviewer.thumbview_row_thumbs - 1)) {
                                                if ((trackviewer.num_pages - 1) > trackviewer.thumbview_selected_thumb) {
                                                      $('thumbnail-div-' + trackviewer.thumbview_selected_thumb).set('class', 'thumbnail-div');
                                                      trackviewer.thumbview_selected_thumb += 1;
                                                      $('thumbnail-div-' + trackviewer.thumbview_selected_thumb).set('class', 'thumbnail-div selected-thumbnail-div');
                                                }
                                                else {
                                                      $('thumbnail-div-' + trackviewer.thumbview_selected_thumb).set('class', 'thumbnail-div');
                                                      trackviewer.thumbview_selected_thumb -= (trackviewer.thumbview_row_thumbs - 1);
                                                      $('thumbnail-div-' + trackviewer.thumbview_selected_thumb).set('class', 'thumbnail-div selected-thumbnail-div');
                                                }
                                          }
                                          
                                          event.stop();
                                    }
                                    else if (event.key === 'up') {
                                          if (Math.floor(trackviewer.thumbview_selected_thumb / trackviewer.thumbview_row_thumbs) > 0) {
                                                $('thumbnail-div-' + trackviewer.thumbview_selected_thumb).set('class', 'thumbnail-div');
                                                trackviewer.thumbview_selected_thumb -= trackviewer.thumbview_row_thumbs;
                                                $('thumbnail-div-' + trackviewer.thumbview_selected_thumb).set('class', 'thumbnail-div selected-thumbnail-div');
                                          }
                                          
                                          if ($('thumbnail-div-' + trackviewer.thumbview_selected_thumb).getCoordinates($('trackviewer-div')).top < 0) {
                                                $('trackviewer-div').scrollTo(0, $('thumbnail-div-' + trackviewer.thumbview_selected_thumb).getCoordinates($('trackviewer-thumbview-div')).top);
                                          }
                                          
                                          event.stop();
                                    }
                                    else if (event.key === 'down') {
                                          if (trackviewer.thumbview_selected_thumb + trackviewer.thumbview_row_thumbs < trackviewer.num_pages) {
                                                $('thumbnail-div-' + trackviewer.thumbview_selected_thumb).set('class', 'thumbnail-div');
                                                trackviewer.thumbview_selected_thumb += trackviewer.thumbview_row_thumbs;
                                                $('thumbnail-div-' + trackviewer.thumbview_selected_thumb).set('class', 'thumbnail-div selected-thumbnail-div');
                                          }
                                          else if (Math.floor((trackviewer.num_pages - 1) / trackviewer.thumbview_row_thumbs) > Math.floor(trackviewer.thumbview_selected_thumb / trackviewer.thumbview_row_thumbs)) {
                                                $('thumbnail-div-' + trackviewer.thumbview_selected_thumb).set('class', 'thumbnail-div');
                                                trackviewer.thumbview_selected_thumb = trackviewer.num_pages - 1;
                                                $('thumbnail-div-' + trackviewer.thumbview_selected_thumb).set('class', 'thumbnail-div selected-thumbnail-div');
                                          }
                                          
                                          if ($('thumbnail-div-' + trackviewer.thumbview_selected_thumb).getCoordinates($('trackviewer-div')).bottom > $('trackviewer-div').getSize().y) {
                                                $('trackviewer-div').scrollTo(0, $('thumbnail-div-' + trackviewer.thumbview_selected_thumb).getCoordinates($('trackviewer-thumbview-div')).bottom - $('trackviewer-div').getSize().y + 40);
                                          }
                                          
                                          event.stop();
                                    }
                                    else if ((event.code === 9 || event.key === 'enter')) { // TAB or enter
                                          trackviewer.closeThumbview(trackviewer.thumbview_selected_thumb);
                                          event.stop();
                                    }
                              }
                              else {
                                    current_scroll = $('trackviewer-content-div').getScroll();
                                    
                                    if (event.key === 'left') {
                                          trackviewer.previousPage();
                                          
                                          event.stop();
                                    }
                                    else if (event.key === 'right') {
                                          trackviewer.nextPage();
                                          
                                          event.stop();
                                    }
                                    else if (event.key === 'up') {
                                          if (event.shift && trackviewer.parent_feed) {
                                                trackviewer.previousFeedItem();
                                          }
                                          else {
                                                $('trackviewer-content-div').scrollTo(current_scroll.x, current_scroll.y - 20);
                                          }
                                          
                                          event.stop();
                                    }
                                    else if (event.key === 'down') {
                                          if (event.shift && trackviewer.parent_feed) {
                                                trackviewer.nextFeedItem();
                                          }
                                          else {
                                                $('trackviewer-content-div').scrollTo(current_scroll.x, current_scroll.y + 20);
                                          }
                                          
                                          event.stop();
                                    }
                                    else if (event.code === 9 && trackviewer.num_pages > 10) { // TAB
                                          trackviewer.openThumbview();
                                          event.stop();
                                    }
                                    else if (event.key === 'space') {
                                          if (event.shift === true) {
                                                $('trackviewer-content-div').scrollTo(current_scroll.x, current_scroll.y - $('trackviewer-content-div').getSize().y);
                                          }
                                          else {
                                                $('trackviewer-content-div').scrollTo(current_scroll.x, current_scroll.y + $('trackviewer-content-div').getSize().y);
                                          }
                                          
                                          event.stop();
                                    }
                                    else if ([33,63276].contains(event.code)) { // Page up
                                          $('trackviewer-content-div').scrollTo(current_scroll.x, current_scroll.y - $('trackviewer-content-div').getSize().y);
                                          
                                          event.stop();
                                    }
                                    else if ([34,63277].contains(event.code)) { // Page down
                                          $('trackviewer-content-div').scrollTo(current_scroll.x, current_scroll.y + $('trackviewer-content-div').getSize().y);
                                          
                                          event.stop();
                                    }
                              }
                        }
                        else {
                              if (['right', 'left'].contains(event.key)) {
                                    event.stop();
                              }
                              
                              current_scroll = $(trackviewer.active_modal.id).getScroll();
                              
                              if (event.key === 'space') {
                                    if (event.shift === true) {
                                          $(trackviewer.active_modal.id).scrollTo(current_scroll.x, current_scroll.y - $(trackviewer.active_modal.id).getSize().y);
                                    }
                                    else {
                                          $(trackviewer.active_modal.id).scrollTo(current_scroll.x, current_scroll.y + $(trackviewer.active_modal.id).getSize().y);
                                    }
                                    
                                    event.stop();
                              }
                              else if ([33,63276].contains(event.code)) { // Page up
                                    $(trackviewer.active_modal.id).scrollTo(current_scroll.x, current_scroll.y - $(trackviewer.active_modal.id).getSize().y);
                                    
                                    event.stop();
                              }
                              else if ([34,63277].contains(event.code)) { // Page down
                                    $(trackviewer.active_modal.id).scrollTo(current_scroll.x, current_scroll.y + $(trackviewer.active_modal.id).getSize().y);
                                    
                                    event.stop();
                              }
                              else if (event.key === 'up') {
                                    $(trackviewer.active_modal.id).scrollTo(current_scroll.x, current_scroll.y - 20);
                                    
                                    event.stop();
                              }
                              else if (event.key === 'down') {
                                    $(trackviewer.active_modal.id).scrollTo(current_scroll.x, current_scroll.y + 20);
                                    
                                    event.stop();
                              }
                        }
                  };
                  
                  trackviewer.windowResized = function (event) {
                        if (trackviewer.active) {
                              trackviewer.updateDimensions();
                        }
                  };
                  
                  trackviewer.thumbnailClicked = function (event, element) {
                        trackviewer.setSelectedPageChainAware(parseInt(element.get('page_number'), 10));
                        
                        event.stopPropagation();
                  };
            }
            
            if ((options.track_id === trackviewer.track_id) && trackviewer.current_page) {
                  trackviewer.start_at = trackviewer.current_page;
            }
            else if (options.start_at !== undefined) {
                  trackviewer.start_at = options.start_at;
            }
            else {
                  trackviewer.start_at = 0;
            }
            
            trackviewer.track_id         = options.track_id;
            trackviewer.track_title      = options.track_title;
            trackviewer.show_title       = options.show_title === undefined && false || options.show_title;
            trackviewer.pages            = options.pages;
            trackviewer.thumbnail_size   = options.thumbnail_size   || {'x': 100, 'y': 100};
            trackviewer.pointer_size     = options.pointer_size     || {'x': 32 , 'y': 32};
            trackviewer.toolbar_position = options.toolbar_position || 'bottom';
            trackviewer.parent_feed      = options.parent_feed;
            trackviewer.add_share_button = options.add_share_button;
            trackviewer.num_pages        = trackviewer.pages.length;
            trackviewer.toolbar_offset   = 0;
            trackviewer.fade_duration    = 400;
            trackviewer.title_height     = 24;
            trackviewer.active_modal     = null;
            
            trackviewer.current_page = null;
            
            trackviewer.thumbnail_size_with_margin = {'x': trackviewer.thumbnail_size.x + 20, 'y': trackviewer.thumbnail_size.y + 16};
            
            trackviewer.thumbnail_list_size = {'x': trackviewer.thumbnail_size_with_margin.x * trackviewer.num_pages, 'y': 120};
            trackviewer.effect_finished     = true;
            trackviewer.active              = false;
            trackviewer.activated           = false;
            trackviewer.view_size           = $('content').getSize();
            
            trackviewer.thumbview_selected_thumb = 0;
            
            trackviewer.preloadImages();
            
            return trackviewer;
      },

      updateDimensions: function() {
            var trackpage_container_element, content_div, total_content_width, left_margin, content_height;
            
            this.view_size = $('content').getSize();
            
            if (this.num_pages > 1) {
                  this.updateThumbnailsToolbar();
            }
            
            if ($('trackpage-container')) {                        
                  banner_width = 0;
                  
                  $('banner_left_container').getElements('img').each(function (img) {
                        //var img_width = img.measure(function () { return this.getSize().x });
                        var img_width = img.getSize().x;
                        if (img_width > banner_width) {
                              banner_width = img_width;
                        }
                  });
                  
                  total_content_width = $('trackpage-container').getSize().x + 10 + banner_width;
                  left_margin = Math.floor(($('trackviewer-content-div').getSize().x - total_content_width) / 2);
                  
                  $('banner_left_container').setStyles({
                        'left' : left_margin + 'px',
                        'width' : banner_width + 'px'
                  });
                  
                  $('trackpage-container').setStyles({
                        'left' : $('banner_left_container').getCoordinates($('trackviewer_content_div')).right + 10 + 'px'
                  });
                  
                  //$('banner_right_container').setStyle('left', $('trackpage-container').getPosition($('trackviewer-content-div')).x + $('trackpage-container').getSize().x + 8 + 'px');
            }
            
            content_height = window.getSize().y;
            
            if (this.num_pages > 1) {
                  content_height -= 120;
            }
            
            if (this.show_title) {
                  content_height -= this.title_height;
            }
            
            $('trackviewer-content-div').setStyle('height' , content_height + 'px');
            
            if ($('trackviewer-thumbview-icon')) {
                  $('trackviewer-thumbnails-toolbar').setStyles({
                        width: this.view_size.x - 120 + 'px'
                  });
            }
       },
      
      preloadImages: function () {
            var trackviewer;
            
            trackviewer = this;
            
            this.images = {};
            
            (new Request.JSON({
                  url: trackviewer.pages[trackviewer.start_at].image_list_url,
                  onSuccess: function (imageURLs) {
                        var images = Asset.images(imageURLs, {
                              onComplete: function (){
                                    trackviewer.images[trackviewer.pages[trackviewer.start_at]] = images;
                              }
                        });
                  },
                  onFailure: function () {
                        alert("Image preload JSON request to " + page.image_list_url + " failed!");
                  }
            })).send();
            
            this.pages.each(function (page) {
                  if (page !== trackviewer.pages[trackviewer.start_at]) {
                        (new Request.JSON({
                              url: page.image_list_url,
                              onSuccess: function (imageURLs) {
                                    var images = Asset.images(imageURLs, {
                                          onComplete: function (){
                                                trackviewer.images[page] = images;
                                          }
                                    });
                              },
                              onFailure: function () {
                                    alert("Image preload JSON request to " + page.image_list_url + " failed!");
                              }
                        })).send();
                  }
            });
      },
      
      start: function () {
            var trackviewer, modal_background_element;
            
            modal_background_element = new Element('div', {
                  'class' : 'trackviewer-modal-background'
            });
            
            modal_background_element.addEvent('click', function (event) {
                  trackviewer.stop();
                  event.stopPropagation();
            });
            
            $('trackviewer-div').getParent().grab(modal_background_element);
            
            this.inflate();
            
            trackviewer = this;
            
            trackViewerElement = $('trackviewer-div');
            
            $('trackviewer-div').set('styles', {'z-index': '501'});
            
            $('trackviewer-div').addEvent('click', function (event) {
                trackviewer.stop();
                $('trackviewer-div').set('styles', {'z-index': '-3'});
                event.stopPropagation();
            });
            
            this._title_before = document.title;
            document.title = this.track_title;
            
            $('trackviewer-thumbnails-toolbar').addEvent('click', function (event) {
                event.stopPropagation();
            });
            
            
            this.active    = true;
            this.activated = true;
            
            this._scrolled_before_open = window.getScroll().y;
            
            this.setupThumbnailsToolbar();
            
            if (this.start_at) {
                  this.current_page = -1;
                  this.setSelectedPageChainAware(this.start_at);
            }
            else {
                  this.current_page = 0;
                  this.fadeoutAndLoadContent();
            }
            
            
            
            $$('body')[0].addEvent('keydown', this._keydown);
            window.addEvent('keydown', this._keydown);
            window.addEvent('resize' , this.windowResized);
            
            $$('body')[0].setStyle('overflow', 'hidden');
            
            window.resizeBy(0, -1);
            window.resizeBy(0, 1);
            
            this.updateDimensions();
      },
      
      stop: function () {
            if ($('trackviewer-thumbview-div')) {
                  this.closeThumbview();
            }
            
            this.active = false;
            
            //$('trackviewer-addthis-button').setStyle('visibility', 'hidden');
            
            this.deflate();
            
            $$('body')[0].removeEvent('keydown', this._keydown);
            window.removeEvent('keydown', this._keydown);
            window.removeEvent('resize' , this.windowResized);
            
            $$('body')[0].setStyle('overflow', 'auto');
            
            $$('.trackviewer-modal-background').dispose();
            
            document.title = this._title_before;
            
            // Hack: make sure scroll bars are only displayed if needed
            window.scrollBy(1, 1);
            window.scrollBy(-1, -1);
      },
      
      inflate: function () {
            var trackviewer, container, trackviewer_content_div, trackviewer_thumbnails_toolbar, body_element, close_text_element;
            
            trackviewer = this;
            
            container = $('trackviewer-div');
            
            body_element = $$('body')[0];
            
            close_text_element = new Element('div', {'id' : 'trackviewer_close_text', 'text' : "Click outside to close"});
            
            close_text_element.addEvent('click', function (event) {
                  if ($('trackviewer-thumbview-div')) {
                        trackviewer.closeThumbview(null);
                  }
                  else if (trackviewer.active_modal === null) {
                        trackviewer.stop();
                        $('trackviewer-div').set('styles', {'z-index': '-3'});
                  }
                  else {
                        trackviewer.active_modal.hide();
                  }
                  
                  event.stop();
            });
            
            body_element.grab(close_text_element);
            
            if (this.add_share_button) {
                  trackviewer_addthis_button = new Element('a', {
                        'id'    : 'addthis-button-trackviewer',
                        'class' : 'addthis_button',
                        'href'  : 'http://www.addthis.com/bookmark.php?v=250&amp;pub=xa-4aa91ffe73b2b19b'
                  });
                  
                  trackviewer_addthis_button.grab(new Element('img', {
                        'src'    : 'http://s7.addthis.com/static/btn/v2/lg-share-en.gif',
                        'width'  : '125',
                        'height' : '16',
                        'alt'    : 'Bookmark and Share',
                        'style'  : 'border: 0'
                  }));
                  
                  body_element.grab(trackviewer_addthis_button);
                  
                  var addthis_options = {
                        'services_compact'  : 'facebook,email,myspace,twitter,evernote,printfriendly,googletranslate',
                        'services_expanded' : 'facebook,email,myspace,twitter,evernote,printfriendly,googletranslate'
                  };
                  
                  var addthis_share = {
                        'title'             : this.track_title,
                        //'url'               : application_url + '?view_track=' + this.track_id
                        'url'               : application_url + '/default/' + this.track_id
                  };
                  
                  addthis.button('#addthis-button-trackviewer', addthis_options, addthis_share);
                  
                  trackviewer_addthis_button.addEvent('click', function (event) {
                        event.stopPropagation();
                  });
                  
                  trackviewer_addthis_button.getChildren()[0].addEvent('mouseover', function (event) {
                        event.stop();
                  });
            }
            
            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', {'id' : 'banner_left_container'}));
            trackviewer_content_div.grab(new Element('div', {'id' : 'banner_right_container'}));
            trackviewer_content_div.grab(new Element('div', {'id' : 'banner_top_container'}));
            
            trackviewer_content_div.grab(new Element('div', {'id' : 'trackviewer-content-div-container'}));
            
            trackviewer_content_div.grab(new Element('div', {'id' : 'banner_bottom_container'}));
            
            container.grab(trackviewer_content_div);
            
            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'}));
            
            if (trackviewer.show_title) {
                  container.grab(new Element('div', {'class' : 'trackviewer-title'}).grab(new Element('h1', {'text' : trackviewer.track_title})));
            }
            
            container.grab(new Element('div', {'class' : 'trackviewer-toolbar', 'id' : 'trackviewer-thumbnails-toolbar'}));
            
            container.grab(new Element('div', {'class' : 'trackviewer-pointer', 'id' : 'trackviewer-thumbnail-pointer'}));
            
            this.showControls();
            
            this._pointerSlideEffect = new Fx.Tween(
                  $('trackviewer-thumbnail-pointer'),
                  {
                        property   : 'left',
                        transition : Fx.Transitions.Back.easeOut,
                        link       : 'cancel',
                        onComplete : function () {
                              trackviewer.effect_finished = true;
                        }
                  }
            );
      },
      
      showControls: function () {
            var yofs;
            
            $('trackviewer-previous-nav-arrow'        ).setStyle('z-index', '503');
            $('trackviewer-next-nav-arrow'            ).setStyle('z-index', '503');
            $('trackviewer-previous-nav-arrow_padding').setStyle('z-index', '502');
            $('trackviewer-next-nav-arrow_padding'    ).setStyle('z-index', '502');
            
            $('trackviewer-thumbnails-toolbar').setStyles({
                  'z-index' : '502',
                  'bottom'  : '0px'
            });
            
            $('trackviewer-thumbnail-pointer').setStyles({
                  'z-index' : '506',
                  'bottom'  : '116px'
            });
            
            $$('.trackviewer-title').setStyles({
                  'z-index' : '502',
                  'height'  : this.title_height + 'px'
            })
            
            if (this.num_pages > 1) {
                  $$('.trackviewer-title').setStyles({
                        'bottom' : '120px'
                  });
            }
            else {
                  $$('.trackviewer-title').setStyles({
                        'bottom' : '0px'
                  });
            }
            
            $('trackviewer-toolbar-shadow'   ).setStyle('z-index', '501');
            $('trackviewer_close_text'       ).setStyle('z-index', '530');
            
            $('trackviewer-content-div').setStyles({
                  'z-index'    : '502',
                  'visibility' : 'visible'
            });
            
            yofs = 0;
            
            if (this.show_title) {
                  $('trackviewer-content-div').setStyles({
                        //'top'        : this.title_height + 'px',
                        'height'     : (window.getSize().y - this.title_height) + 'px'
                  });
                  
                  //yofs += this.title_height + 4;
            }
            else {
                  $('trackviewer-content-div').setStyles({
                        'top'        : '0px',
                        'height'     : window.getSize().y + 'px'
                  });
            }            
            
            if (this.add_share_button) {
                  $('addthis-button-trackviewer').setStyle('top', 4 + yofs + 'px');
                  yofs += 21;
            }
            
            $('trackviewer_close_text').setStyle('top', 4 + yofs + 'px');
            
            if (this.num_pages > 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');
                  
                  if (this.toolbar_position === 'top') {
                        $('trackviewer-thumbnails-toolbar').setStyles({
                              'bottom' : null,
                              'top'    : '0px'
                        });
                        
                        $('trackviewer-thumbnail-pointer').setStyles({
                              'bottom' : null,
                              'top'    : '116px'
                        });
                        
                        $('trackviewer-content-div').setStyle('top'   , '120px');
                        $('trackviewer_close_text' ).setStyle('top'   , '128px');
                  }
                  
                  $('trackviewer-content-div').setStyle('height', window.getSize().y - 120 + 'px');
                  
                  $('trackviewer-previous-nav-arrow').addEvent('click', this.nextFunction);
                  $('trackviewer-next-nav-arrow'    ).addEvent('click', this.previousFunction);
            }
            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);
            }
            
            if ($('trackviewer-thumbview-icon')) {
                  $('trackviewer-thumbview-icon').setStyles({
                        'z-index'    : '506',
                        'visibility' : 'visible'
                  });
            }
      },
      
      hideControls: function () {
            $('trackviewer-previous-nav-arrow').setStyles({
                  'z-index'    : '-3',
                  'visibility' : 'hidden'
            });
            
            $('trackviewer-next-nav-arrow').setStyles({
                  'z-index'    : '-3',
                  'visibility' : 'hidden'
            });
            
            $('trackviewer-previous-nav-arrow_padding').setStyles({
                  'z-index'    : '-3',
                  'visibility' : 'hidden'
            });
            
            $('trackviewer-next-nav-arrow_padding').setStyles({
                  'z-index'    : '-3',
                  'visibility' : 'hidden'
            });
            
            
            $('trackviewer-thumbnails-toolbar').setStyles({
                  'z-index'    : '-3',
                  'visibility' : 'hidden'
            });
            
            $('trackviewer-thumbnail-pointer').setStyles({
                  'z-index'    : '-3',
                  'visibility' : 'hidden'
            });
            
            $('trackviewer-toolbar-shadow').setStyles({
                  'z-index'    : '-3',
                  'visibility' : 'hidden',
                  'height'     : '0px'
            });
            
            $$('.trackviewer-title').setStyles({
                  'z-index'    : '-3',
                  'visibility' : 'hidden'
            });
            
            //$('trackviewer_close_text').setStyles({
            //      'z-index'    : '-3',
            //      'visibility' : 'hidden'
            //});
            
            $('trackviewer-content-div').setStyles({
                  'z-index'    : '-3',
                  'visibility' : 'hidden'
            });
            
            if ($('trackviewer-thumbview-icon')) {
                  $('trackviewer-thumbview-icon').setStyles({
                        'z-index'    : '-3',
                        'visibility' : 'hidden'
                  });
            }
      },
      
      deflate: function () {
            $('trackviewer-div').empty();
            
            if ($('trackviewer_close_text')) {
                  $('trackviewer_close_text').dispose();
            }
            
            if (this.add_share_button) {
                  $('addthis-button-trackviewer').dispose();
            }
      },
      
      setupThumbnailsToolbar: function () {
            var img, n, trackviewer, clickHandler, connection_line_div, line_width, thumbnail_gloss;
            
            trackviewer = this;
            
            if ($('trackviewer-thumbview-icon')) {
                  $('trackviewer-thumbview-icon').dispose();
            }
            
            $('trackviewer-thumbnails-toolbar').empty();
            
            $('trackviewer-thumbnails-toolbar').grab(new Element('div', {'class' : 'trackviewer-toolbar-scroll-pane', 'id' : 'trackviewer-thumbnail-list'}));
            
            $('trackviewer-thumbnail-list').empty();
            
            this._toolbarSlideEffect = new Fx.Tween(
                  $('trackviewer-thumbnail-list'),
                  {
                        property : 'left',
                        link     : 'cancel'
                  }
            );
            
            if (this.num_pages > 10) {
                  $('trackviewer-div').grab(new Element('div', {'id' : 'trackviewer-thumbview-icon'}), 'top');
                  
                  $('trackviewer-thumbnails-toolbar').setStyles({
                        width: $('content').getSize().x - 120 + 'px',
                        left: '120px'
                  });
                  
                  $('trackviewer-thumbview-icon').setStyles({
                        left: 0
                  });
                  
                  if (this.toolbar_position === 'top') {
                        $('trackviewer-thumbview-icon').setStyle('top', 0);
                  }
                  else {
                        $('trackviewer-thumbview-icon').setStyle('bottom', 0);
                  }
                  
                  $('trackviewer-thumbview-icon').addEvent('click', function (event) {
                        trackviewer.openThumbview();
                        event.stopPropagation();
                  });
            }
            else {
                  $('trackviewer-thumbnails-toolbar').setStyles({
                        width: '100%',
                        left: 0
                  });
            }
            
            $('trackviewer-thumbnails-toolbar').setStyle('height', this.thumbnail_list_size.y);
            $('trackviewer-toolbar-shadow'    ).setStyle('height', this.thumbnail_list_size.y);
            $('trackviewer-thumbnail-list'    ).setStyle('width' , this.thumbnail_list_size.x);
            $('trackviewer-thumbnail-list'    ).setStyle('height', this.thumbnail_list_size.y);
            
            for (n = 0; n < this.num_pages; n += 1) {
                  img = new Element('img');
                  
                  img.set('class'  , 'trackviewer-thumbnail');
                  img.set('id'     , 'trackviewer-thumbnail-' + n);
                  img.set('src'    , this.pages[n].thumb_url);
                  img.set('width'  , this.thumbnail_size.x);
                  img.set('height' , this.thumbnail_size.y);
                  
                  img.set('page_number' , n);
                  
                  $('trackviewer-thumbnail-list').grab(img);
                  
                  $('trackviewer-thumbnail-' + n).addEvent('click', function (event) {
                        trackviewer.thumbnailClicked(event, this);
                  });
                  
                  thumbnail_gloss = new Element('div', {
                        'class': 'trackviewer-thumbnail-gloss'
                  });
                  
                  thumbnail_gloss.set('page_number', n);
                  
                  thumbnail_gloss.addEvent('click', function (event) {
                        trackviewer.thumbnailClicked(event, this);
                  });
                  
                  $('trackviewer-thumbnail-list').grab(thumbnail_gloss);
                  
                  thumbnail_gloss.setStyles({
                        'top'   : img.getCoordinates(img.getParent()).top,
                        'left'  : img.getCoordinates(img.getParent()).left
                  });
                  
                  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.thumbnail_size.y / 2) - 1 + 'px',
                              'left'  : img.getCoordinates(img.getParent()).right
                        });
                  }
            }
            
            this.updateThumbnailsToolbar();
      },
      
      updateThumbnailsToolbar: function () {
            var pointerX, xofs, toolbarEffect, pointerEffect, trackviewer, toolbar_available_width;
            
            trackviewer = this;
            
            // Center toolbar scroll pane if narrower than visible toolbar
            
            toolbar_available_width = this.view_size.x;
            
            if ($('trackviewer-thumbview-icon')) {
                  toolbar_available_width -= 120;
            }
            
            if (this.thumbnail_list_size.x < toolbar_available_width) {
                  this.toolbar_offset = Math.floor((toolbar_available_width - this.thumbnail_list_size.x) / 2);
                  this._toolbarSlideEffect.set(this.toolbar_offset);
            }
            else {
                  // If thumbnail not fully visible, scroll toolbar scroll pane to bring it into view
                  
                  if (this.toolbar_offset + ((this.current_page + 1) * this.thumbnail_size_with_margin.x) > toolbar_available_width) {
                        this.toolbar_offset = toolbar_available_width - ((this.current_page + 1) * this.thumbnail_size_with_margin.x);
                        this._toolbarSlideEffect.start(this.toolbar_offset);
                  }
                  else if ((this.current_page * this.thumbnail_size_with_margin.x) + this.toolbar_offset < 0) {
                        this.toolbar_offset = -(this.current_page * this.thumbnail_size_with_margin.x);
                        this._toolbarSlideEffect.start(this.toolbar_offset);
                  }
            }
            
            // Calculate arrow position
            
            pointerX = this.toolbar_offset + (this.thumbnail_size_with_margin.x * this.current_page) + Math.floor(this.thumbnail_size_with_margin.x / 2);
            
            if ($('trackviewer-thumbview-icon')) {
                  pointerX += 120;
            }
            
            // Center arrow on selected thumbnail
            
            xofs = parseInt(this.pointer_size.x / 2, 10);
            
            if ($('trackviewer-thumbnail-pointer').getStyle('left') === "0px") {
                  this._pointerSlideEffect.set(pointerX - xofs);
            }
            else {
                  this.effect_finished = false;
                  this._pointerSlideEffect.start(pointerX - xofs);
            }
      },
      
      updateMainContent: function (main_content_dict) {
            var trackviewer = this, page, content_div, trackpage_container_element,  content_div_container, trackviewer_addthis_button, addthis_button_placeholder, style_width;
            
            page = this.pages[this.current_page];
            
            content_div = $('trackviewer-content-div');
            
            content_div.scrollTo(0, 0);
            
            content_div_container = $('trackviewer-content-div-container');
            
            content_div_container.empty();
            
            trackpage_container_element = new Element('div', {
                  'id'   : 'trackpage-container',
                  'html' : main_content_dict.content
            } );
            
            content_div_container.grab(trackpage_container_element);
            
            trackpage_container_element.getElements('img[class~="zoomable"]').each(function (zoomable_image) {
                  var zoom_icon = new Element('div', {
                        'class' : 'zoom-icon'
                  });
                  
                  zoom_icon.setStyles({
                        'top'  : zoomable_image.getPosition(zoomable_image.getParent()).y + 6 + 'px',
                        'left' : zoomable_image.getPosition(zoomable_image.getParent()).x + 6 + 'px'
                  });
                  
                  zoomable_image.getParent().grab(zoom_icon);
                  
                  zoomable_image.addEvent('mouseenter', function (event) {
                        zoom_icon.set('class', 'zoom-icon zoom-icon-hover');
                  });
                  
                  zoomable_image.addEvent('mouseleave', function (event) {
                        zoom_icon.set('class', 'zoom-icon');
                  });
                  
                  [zoomable_image, zoom_icon].each(function (element) {
                        var clicked_image;
                        
                        clicked_image = zoomable_image;
                        
                        element.addEvent('click', function (event) {
                              // $$('body')[0].setStyle('overflow', 'auto');
                              
                              event.stop();
                              
                              trackviewer.active_modal = new ModalAjaxDialog({
                                    fade : false,
                                    
                                    modalOptions : {
                                          modalStyle : {
                                                'background-color' : '#000',
                                                'opacity' : .9,
                                                'z-index' : 515
                                          },
                                          
                                          onModalHide : function () {
                                                trackviewer.active_modal = null;
                                          }
                                    },
                                    
                                    handleResponse : function (response) {
                                          var _this = this, zoomed_coordinates, image_width, image_height, ad_popup_modal_background, body_element;
                                          
                                          if (response.contains(' margin-left: ')) {
                                                response = response.replace(' margin-left: ', ' foo: ');
                                          }
                                          
                                          var responseScript = "";
                                          this.Request.response.text.stripScripts(function(script){ responseScript += script; });
                                          if (this.options.wrapWithUi) response = StickyWin.ui(this.options.caption, response, this.options.uiOptions);
                                          this.setContent(response);
                                          
                                          body_element = $$('body')[0];
                                          
                                          dummy_div = new Element('div', {
                                                'html' : response
                                          });
                                          
                                          trackviewer._popup_ad_zoom_image = dummy_div.getElements('img')[0];
                                          
                                          image_width  = parseInt(trackviewer._popup_ad_zoom_image.get('width'), 10);
                                          image_height = parseInt(trackviewer._popup_ad_zoom_image.get('height'), 10);
                                          
                                          zoomed_coordinates = new Hash({
                                                left   : Math.floor((window.getSize().x - image_width) / 2),
                                                width  : image_width,
                                                height : image_height
                                          });
                                          
                                          if (zoomed_coordinates.height > window.getSize().y) {
                                                zoomed_coordinates.top = 0;
                                          }
                                          else {
                                                zoomed_coordinates.top = Math.floor((window.getSize().y - image_height) / 2);
                                          }
                                          
                                          trackviewer._popup_ad_zoom_image.setStyles({
                                                'position' : 'fixed',
                                                'z-index'  : 520,
                                                'left'     : clicked_image.getPosition($('trackviewer-content-div')).x + 'px',
                                                'top'      : clicked_image.getPosition($$('body')[0]).y - $$('body')[0].getScroll().y + 'px',
                                                'width'    : clicked_image.getSize().x + 'px',
                                                'height'   : clicked_image.getSize().y + 'px'
                                          });
                                          
                                          body_element.grab(trackviewer._popup_ad_zoom_image);
                                          
                                          //clicked_image.setStyle('visibility', 'hidden');
                                          
                                          (new Fx.Morph(trackviewer._popup_ad_zoom_image, {
                                                'duration' : 'short',
                                                
                                                'onComplete' : function () {
                                                      _this.show();
                                                      
                                                      $(_this.id).setStyles({
                                                            'height'   : window.getSize().y + 'px',
                                                            'z-index'  : 525
                                                      });
                                                      
                                                      if (zoomed_coordinates.height > window.getSize().y) {
                                                            $(_this.id).setStyles({
                                                                  'top' : $$('body')[0].getScroll().y
                                                            });
                                                      }
                                                      
                                                      var stickywin_id = _this.id;
                                                      
                                                      if (!(Browser.Engine.trident && document.documentMode && document.documentMode === 8)) {
                                                            (function () {
                                                                  $(stickywin_id).setStyles({
                                                                        'overflow' : 'auto',
                                                                        'width'    : $(stickywin_id).getSize().x + measureScrollbarWidth() + 'px'
                                                                  });
                                                            }).delay(250);
                                                      }
                                                      else {
                                                            $(stickywin_id).setStyle('overflow', 'auto');
                                                      }
                                                      
                                                      $(_this.id).addEvent('click', function (event) {
                                                            _this.hide();
                                                            event.stop();
                                                      });
                                                      
                                                      if (_this.evalScripts) $exec(responseScript);
                                                      
                                                      (function () {
                                                            trackviewer._popup_ad_zoom_image.dispose();
                                                            trackviewer._popup_ad_zoom_image = 0;
                                                      }).delay(100);
                                                }
                                          })).start({
                                                'left'   : zoomed_coordinates.left,
                                                'top'    : zoomed_coordinates.top,
                                                'width'  : zoomed_coordinates.width,
                                                'height' : zoomed_coordinates.height
                                          });
                                    }
                              }).update(main_content_dict.url.replace(/trackview/, 'trackviewimageonly'), {
                                    data: {
                                          max_width:  $$('body')[0].getSize().x - measureScrollbarWidth()
                                    }
                              });
                        });
                  });
            });
            
            trackpage_container_element.addEvent('click', function (event) {
                  event.stopPropagation();
            });
            
            trackpage_container_element.getElements('.gallery_image_container').addEvent('click', function (event) {
                  trackviewer.stop();
                  event.stopPropagation();
            });
            
            trackpage_container_element.getElements('.new_product_container').addEvent('click', function (event) {
                  trackviewer.stop();
                  event.stopPropagation();
            });
            
            trackpage_container_element.setStyles({
                  'z-index' : 502,
                  'width'   : page.content_width
            });
            
            if ((trackpage_container_element.getSize().y + trackpage_container_element.getCoordinates().top) > content_div.getSize().y) {
                  content_div.setStyle('overflow-y', 'auto');
            }
            else {
                  content_div.setStyle('overflow-y', 'hidden');
            }
            
            if (window['toSifr'] !== undefined) {
                  toSifr.each(function (list_item) {
                        sIFR.activate(list_item[1].src);
                        sIFR.replace(list_item[1], {selector: list_item[0]});
                  });
                  
                  toSifr = undefined;
            }
            
            if ($$('#trackviewer-content-div div.share-button').length > 0) {
                  addthis_button_placeholder = $$('#trackviewer-content-div div.share-button')[0];
                  
                  trackviewer_addthis_button = new Element('a', {
                        'id'    : 'addthis-button-trackviewer-page',
                        'class' : 'addthis_button',
                        'href'  : 'http://www.addthis.com/bookmark.php?v=250&amp;pub=xa-4aa91ffe73b2b19b'
                  });
                  
                  trackviewer_addthis_button.grab(new Element('img', {
                        'src'    : 'http://s7.addthis.com/static/btn/v2/lg-share-en.gif',
                        'width'  : '125',
                        'height' : '16',
                        'alt'    : 'Bookmark and Share',
                        'style'  : 'border: 0'
                  }));
                  
                  trackviewer_addthis_button.setStyles(addthis_button_placeholder.getStyles('float'));
                  
                  trackviewer_addthis_button.replaces(addthis_button_placeholder);
                  
                  var addthis_options = {
                        'services_compact'  : 'facebook,email,myspace,twitter,evernote,printfriendly,googletranslate',
                        'services_expanded' : 'facebook,email,myspace,twitter,evernote,printfriendly,googletranslate'
                  };
                  
                  var addthis_share = {
                        'title'             : this.track_title,
                        //'url'               : application_url + '?view_track=' + this.track_id + '&start_at_id=' + this.pages[this.current_page].id
                        'url'               : application_url + '/default/' + this.track_id + '/pages/' + this.pages[this.current_page].id
                  };
                  
                  addthis.button('#addthis-button-trackviewer-page', addthis_options, addthis_share);
                  
                  trackviewer_addthis_button.addEvent('click', function (event) {
                        event.stopPropagation();
                  });
                  
                  trackviewer_addthis_button.getChildren()[0].addEvent('mouseover', function (event) {
                        event.stop();
                  });
            }
            
            pageTracker._trackPageview('/' + application_url + '/' + this.track_id + '/pages/' + page.id);
      },
      
      updateBannerAds: function (banners) {
            var trackviewer, popupAd, dummy_div;
            
            trackviewer = this;
            
            var page;
            
            popupAd = function (banner_dict, clicked_image) {
                  //trackviewer.hideControls();
                  
                  trackviewer.active_modal = new ModalAjaxDialog({
                        fade : false,
                        
                        modalOptions : {
                              modalStyle : {
                                    'background-color' : '#000',
                                    'opacity' : .9,
                                    'z-index' : 515
                              },
                              
                              onModalHide : function () {
                                    trackviewer.active_modal = null;
                              }
                        },
                              
                        handleResponse : function (response) {
                              var _this = this, zoomed_coordinates, image_width, image_height, ad_popup_modal_background, body_element;
                              
                              if (response.contains(' margin-left: ')) {
                                    response = response.replace(' margin-left: ', ' foo: ');
                              }
                              
                              var responseScript = "";
                              this.Request.response.text.stripScripts(function(script){ responseScript += script; });
                              if (this.options.wrapWithUi) response = StickyWin.ui(this.options.caption, response, this.options.uiOptions);
                              
                              this.setContent(response);
                              
                              body_element = $$('body')[0];
                              
                              dummy_div = new Element('div', {
                                    'html' : response
                              });
                              
                              trackviewer._popup_ad_zoom_image = dummy_div.getElements('img')[0];
                              
                              image_width  = parseInt(trackviewer._popup_ad_zoom_image.get('width'), 10);
                              image_height = parseInt(trackviewer._popup_ad_zoom_image.get('height'), 10);
                              
                              zoomed_coordinates = new Hash({
                                    left   : Math.floor((window.getSize().x - image_width) / 2),
                                    width  : image_width,
                                    height : image_height
                              });
                              
                              if (zoomed_coordinates.height > window.getSize().y) {
                                    zoomed_coordinates.top = 0;
                              }
                              else {
                                    zoomed_coordinates.top = Math.floor((window.getSize().y - image_height) / 2);
                              }
                              
                              trackviewer._popup_ad_zoom_image.setStyles({
                                    'position' : 'fixed',
                                    'z-index'  : 520,
                                    'left'     : clicked_image.getPosition($('trackviewer-content-div')).x + 'px',
                                    'top'      : clicked_image.getPosition($$('body')[0]).y - $$('body')[0].getScroll().y + 'px',
                                    'width'    : clicked_image.getSize().x + 'px',
                                    'height'   : clicked_image.getSize().y + 'px'
                              });
                              
                              body_element.grab(trackviewer._popup_ad_zoom_image);
                              
                              //clicked_image.setStyle('visibility', 'hidden');
                              
                              (new Fx.Morph(trackviewer._popup_ad_zoom_image, {
                                    'duration' : 'short',
                                    
                                    'onComplete' : function () {
                                          _this.show();
                                          
                                          $(_this.id).setStyles({
                                                'height'   : window.getSize().y + 'px',
                                                'z-index'  : 525
                                          });
                                          
                                          if (zoomed_coordinates.height > window.getSize().y) {
                                                $(_this.id).setStyles({
                                                      'top' : $$('body')[0].getScroll().y
                                                });
                                          }
                                          
                                          var stickywin_id = _this.id;
                                          
                                          if (!(Browser.Engine.trident && document.documentMode && document.documentMode === 8)) {
                                                (function () {
                                                      $(stickywin_id).setStyles({
                                                            'overflow' : 'auto',
                                                            'width'    : $(stickywin_id).getSize().x + measureScrollbarWidth() + 'px'
                                                      });
                                                }).delay(250);
                                          }
                                          else {
                                                $(stickywin_id).setStyle('overflow', 'auto');
                                          }
                                          
                                          $(_this.id).addEvent('click', function (event) {
                                                _this.hide();
                                                event.stop();
                                          });
                                          
                                          if (_this.evalScripts) $exec(responseScript);
                                          
                                          (function () {
                                                trackviewer._popup_ad_zoom_image.dispose();
                                                trackviewer._popup_ad_zoom_image = 0;
                                          }).delay(100);
                                    }
                              })).start({
                                    'left'   : zoomed_coordinates.left,
                                    'top'    : zoomed_coordinates.top,
                                    'width'  : zoomed_coordinates.width,
                                    'height' : zoomed_coordinates.height
                              });
                        }
                  }).update(banner_dict.url.replace(/trackview/, 'trackviewimageonly'), {
                        data: {
                              max_width:  $$('body')[0].getSize().x - measureScrollbarWidth()
                              //max_height: $('trackviewer-content-div').getSize().y
                        }
                  });
                  
                  //(new Request.HTML({
                  //      url: banner_dict.url.replace(/trackview/, 'trackviewimageonly'),
                  //      data: {
                  //            max_width: $$('body')[0].getSize().x - measureScrollbarWidth()
                  //      },
                  //      
                  //      onSuccess: function(tree, elements, html) {
                  //            var zoomed_coordinates, image_width, image_height, ad_popup_modal_background, body_element;
                  //            
                  //            body_element = $$('body')[0];
                  //            
                  //            dummy_div = new Element('div', {
                  //                  'html' : html
                  //            });
                  //            
                  //            trackviewer._popup_ad_zoom_image = dummy_div.getElements('img')[0];
                  //            
                  //            image_width  = parseInt(trackviewer._popup_ad_zoom_image.get('width'), 10);
                  //            image_height = parseInt(trackviewer._popup_ad_zoom_image.get('height'), 10);
                  //            
                  //            zoomed_coordinates = new Hash({
                  //                  left   : Math.floor((window.getSize().x - image_width) / 2),
                  //                  top    : Math.floor((window.getSize().y - image_height) / 2),
                  //                  width  : image_width,
                  //                  height : image_height
                  //            });
                  //            
                  //            trackviewer._popup_ad_zoom_image.setStyles({
                  //                  'position' : 'fixed',
                  //                  'z-index'  : 520,
                  //                  'left'     : clicked_image.getPosition($('trackviewer-content-div')).x + 'px',
                  //                  'top'      : clicked_image.getPosition($$('body')[0]).y - $$('body')[0].getScroll().y + 'px',
                  //                  'width'    : clicked_image.getSize().x + 'px',
                  //                  'height'   : clicked_image.getSize().y + 'px'
                  //            });
                  //            
                  //            body_element.grab(trackviewer._popup_ad_zoom_image);
                  //            
                  //            //clicked_image.setStyle('visibility', 'hidden');
                  //            
                  //            (new Fx.Morph(trackviewer._popup_ad_zoom_image, {
                  //                  'duration' : 'short',
                  //                  
                  //                  'onComplete' : function () {
                  //                        new StickyWin.Modal({
                  //                              'content'    : html,
                  //                              'zIndex'     : 515,
                  //                              'modalOptions' : {
                  //                                    'modalStyle' : {
                  //                                          'background-color' : '#000',
                  //                                          'opacity' : .9,
                  //                                          'z-index' : 510
                  //                                    }
                  //                              }
                  //                        });
                  //                        
                  //                        (function () {
                  //                              trackviewer._popup_ad_zoom_image.dispose();
                  //                              trackviewer._popup_ad_zoom_image = 0;
                  //                        }).delay(100);
                  //                  }
                  //            })).start({
                  //                  'left'   : zoomed_coordinates.left,
                  //                  'top'    : zoomed_coordinates.top,
                  //                  'width'  : zoomed_coordinates.width,
                  //                  'height' : zoomed_coordinates.height
                  //            });
                  //      },
                  //      
                  //      onFailure: function() {
                  //            alert("Page content request to " + banner_dict.url + " failed.");
                  //      }
                  //})).send();
            }
            
            $('banner_left_container'  ).empty();
            $('banner_right_container' ).empty();
            $('banner_top_container'   ).empty();
            $('banner_bottom_container').empty();
            
            page = this.pages[this.current_page];
            
            banners.left.each(function (left_banner_dict) {
                  var banner_element = new Element('div', {
                        'class' : 'banner banner_vertical banner_left',
                        'html'  : left_banner_dict.content
                  });
                  
                  $('banner_left_container').grab(banner_element);
                  
                  banner_element.getElements('img').each(function (zoomable_image) {
                        var zoom_icon = new Element('div', {
                              'class' : 'zoom-icon'
                        });
                        
                        zoom_icon.setStyles({
                              'top'  : zoomable_image.getPosition(zoomable_image.getParent()).y + 14 + 'px',
                              'left' : zoomable_image.getPosition(zoomable_image.getParent()).x + 6 + 'px'
                        });
                        
                        zoomable_image.getParent().grab(zoom_icon);
                        
                        zoomable_image.addEvent('mouseenter', function (event) {
                              zoom_icon.set('class', 'zoom-icon zoom-icon-hover');
                        });
                        
                        zoomable_image.addEvent('mouseleave', function (event) {
                              zoom_icon.set('class', 'zoom-icon');
                        });
                        
                        [zoomable_image, zoom_icon].each(function (element) {
                              element.addEvent('click', function (event) {
                                    popupAd(left_banner_dict, this);
                                    
                                    event.stopPropagation();
                              });
                        });
                  });
                  
                  banner_element.addEvent('click', function (event) {
                        event.stopPropagation();
                  });
            });
            
            banners.right.each(function (right_banner_dict) {
                  var banner_element = new Element('div', {
                        'class' : 'banner banner_vertical banner_right',
                        'html'  : left_banner_dict.content
                  });
                  
                  $('banner_left_container').grab(banner_element);
                  
                  banner_element.getElements('img').each(function (zoomable_image) {
                        var zoom_icon = new Element('div', {
                              'class' : 'zoom-icon'
                        });
                        
                        zoom_icon.setStyles({
                              'top'  : zoomable_image.getPosition(zoomable_image.getParent()).y + 14 + 'px',
                              'left' : zoomable_image.getPosition(zoomable_image.getParent()).x + 6 + 'px'
                        });
                        
                        zoomable_image.getParent().grab(zoom_icon);
                        
                        [zoomable_image, zoom_icon].each(function (element) {
                              element.addEvent('click', function (event) {
                                    popupAd(left_banner_dict, this);
                                    
                                    event.stopPropagation();
                              });
                        });
                  });
                  
                  banner_element.addEvent('click', function (event) {
                        event.stopPropagation();
                  });
            });
            
            banners.top.each(function (top_banner_dict) {
                  var banner_element = new Element('div', {
                        'class' : 'banner banner_horizontal banner_top',
                        'html'  : left_banner_dict.content
                  });
                  
                  $('banner_left_container').grab(banner_element);
                  
                  banner_element.getElements('img').each(function (zoomable_image) {
                        var zoom_icon = new Element('div', {
                              'class' : 'zoom-icon'
                        });
                        
                        zoom_icon.setStyles({
                              'top'  : zoomable_image.getPosition(zoomable_image.getParent()).y + 14 + 'px',
                              'left' : zoomable_image.getPosition(zoomable_image.getParent()).x + 6 + 'px'
                        });
                        
                        zoomable_image.getParent().grab(zoom_icon);
                        
                        [zoomable_image, zoom_icon].each(function (element) {
                              element.addEvent('click', function (event) {
                                    popupAd(left_banner_dict, this);
                                    
                                    event.stopPropagation();
                              });
                        });
                  });
                  
                  banner_element.addEvent('click', function (event) {
                        event.stopPropagation();
                  });
            });
            
            banners.bottom.each(function (bottom_banner_dict) {
                  var banner_element = new Element('div', {
                        'class' : 'banner banner_horizontal banner_bottom',
                        'html'  : left_banner_dict.content
                  });
                  
                  $('banner_left_container').grab(banner_element);
                  
                  banner_element.getElements('img').each(function (zoomable_image) {
                        var zoom_icon = new Element('div', {
                              'class' : 'zoom-icon'
                        });
                        
                        zoom_icon.setStyles({
                              'top'  : zoomable_image.getPosition(zoomable_image.getParent()).y + 14 + 'px',
                              'left' : zoomable_image.getPosition(zoomable_image.getParent()).x + 6 + 'px'
                        });
                        
                        zoomable_image.getParent().grab(zoom_icon);
                        
                        [zoomable_image, zoom_icon].each(function (element) {
                              element.addEvent('click', function (event) {
                                    popupAd(left_banner_dict, this);
                                    
                                    event.stopPropagation();
                              });
                        });
                  });
                  
                  banner_element.addEvent('click', function (event) {
                        event.stopPropagation();
                  });
            });
      },
      
      fadeinContentPane: function () {
            var content_div;
            
            content_div = $('trackviewer-content-div');
            
            this._fadein_effect = new Fx.Tween(
                  content_div,
                  {
                        property   : 'opacity',
                        duration   : this.fade_duration / 2
                  }
            );
            
            this._fadein_effect.start(1);
      },
      
      fadeoutAndLoadContent: function () {
            var trackviewer, page, content_div, loaded_content, fadeout_complete, banners, fadeinIfFinished, load, left_banners_height = 0, right_banners_height = 0;
            
            trackviewer      = this;
            page             = this.pages[this.current_page];
            content_div      = $('trackviewer-content-div');
            loaded_content   = [];
            fadeout_complete = false;
            main_content     = null;
            
            banners = new Hash();
            
            banners.left   = [];
            banners.right  = [];
            banners.top    = [];
            banners.bottom = [];
            
            fadeinIfFinished = function () {
                  if (!fadeout_complete) {
                        return;
                  }
                  
                  if ($('trackviewer-thumbview-div')) {
                        return;
                  }
                  
                  loaded_content.each(function (load_dict) {
                        if (load_dict.load_state !== 'loaded') {
                              return;
                        }
                  });
                  
                  trackviewer.updateMainContent(main_content);
                  trackviewer.updateBannerAds(banners);
                  trackviewer.updateDimensions();
                  
                  $$('.banner_left').each(function (left_banner) {
                        left_banners_height +=  left_banner.measure(function () { return this.getSize().y });
                  });
                  
                  $$('.banner_right').each(function (right_banner) {
                        right_banners_height += right_banner.getSize().y;
                  });
                  
                  if (left_banners_height > $('trackpage-container').getSize().y) {
                        $('trackpage-container').getChildren()[0].setStyle('height', left_banners_height - 16 + 'px');
                  }
                  
                  if (right_banners_height > $('trackpage-container').getSize().y) {
                        $('trackpage-container').getChildren()[0].setStyle('height', right_banners_height - 16 + 'px');
                  }
                  
                  trackviewer.updateDimensions(); // Yes, a second call is needed
                  trackviewer.fadeinContentPane();
            };
            
            this._fadeout_effect = new Fx.Tween(
                  content_div,
                  {
                        property   : 'opacity',
                        duration   : this.fade_duration / 2,
                        onComplete : function () {
                              fadeout_complete = true;
                              fadeinIfFinished();
                        }
                  }
            );
            
            load = function (loadstate_dict) {
                  (new Request.HTML({
                        method: 'get',
                        url:    loadstate_dict.url,
                        data: {
                              'max_width'  : loadstate_dict.max_width,
                              'max_height' : loadstate_dict.max_height
                        },
                        
                        onSuccess: function (tree, els, html) {
                              loadstate_dict.load_state = 'loaded';
                              loadstate_dict.content    = html;
                              fadeinIfFinished();
                        },
                        
                        onFailure: function () {
                              loadstate_dict.load_state = 'failed';
                              alert("Page content request to " + loadstate_dict.url + " failed.");
                        }
                  })).send();
                  
                  loadstate_dict.load_state = 'loading';
            };
            
            loaded_content.push(new Hash({
                  url        : page.content_url,
                  load_state : 'pending',
                  content    : null,
                  max_width  : $('trackviewer-content-div').getSize().x - 210,
                  max_height : $('trackviewer-content-div').getSize().y
            }));
            
            main_content = loaded_content[0];
            
            if (page.banner_ads) {
                  page.banner_ads.each(function (banner_ad) {
                        var ad_dict;
                        
                        ad_dict = new Hash({
                              url        : banner_ad.content_url,
                              load_state : 'pending',
                              content    : null
                        });
                        
                        if (banner_ad.position === 'left' || banner_ad.position === 'right') {
                              ad_dict.set('max_width',  $('trackviewer-content-div').getSize().x - page.content_width - 64);
                              ad_dict.set('max_height', $('trackviewer-content-div').getSize().y);
                        }
                        else {
                              ad_dict.set('max_width', page.content_width);
                        }
                        
                        loaded_content.push(ad_dict);
                        
                        banners[banner_ad.position].push(ad_dict);
                  });
            }
            
            loaded_content.each(function (load_dict) {
                  load(load_dict);
            });
            
            // Don't fade out if just started
            if (this.activated) {
                  this._fadeout_effect.set(0);
                  fadeout_complete = true;
                  this.activated  = false;
            }
            else {
                  this._fadeout_effect.start(0);
            }
      },
      
      setSelectedPageChainAware: function (page) {
            var same_series;
            
            same_series = true;
            
            if (page > this.current_page) {
                  for ( var n = this.current_page + 1 ; n < page + 1 ; n++ ) {
                        if (this.pages[n].clickable === true) {
                              same_series = false;
                        }
                  }
                  
                  if (same_series) {
                        this.nextPage();
                  }
            }
            else if (page < this.current_page ) {
                  for ( var n = this.current_page - 1 ; n > page - 1 ; n-- ) {
                        if (this.pages[n + 1].clickable === true) {
                              same_series = false;
                        }
                  }
                  
                  if (same_series) {
                        this.setSelectedPage(page);
                  }
            }
            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.current_page !== page) {
                        this.setSelectedPage(page);
                  }
            }
      },
      
      setSelectedPage: function (page) {
            if (this.num_pages > 1) {
                  this.current_page = page;
                  
                  this.updateThumbnailsToolbar();
                  this.fadeoutAndLoadContent();
            }
      },
      
      nextPage: function () {
            this.setSelectedPage((this.current_page + 1) % this.num_pages);
      },
      
      previousPage: function () {
            var page_num;
            
            page_num = this.current_page > 0 ? this.current_page - 1 : this.num_pages - 1;
            
            if (this.pages[this.current_page].clickable === true) {
                  while (this.pages[page_num].clickable === false) {
                        page_num = page_num - 1;
                  }
            }
            
            this.setSelectedPage(page_num);
      },
      
      nextFeedItem: function () {
            var trackviewer, next_item;
            
            trackviewer = this;
            
            next_item = this.parent_feed.getItemAfter(this.track_id);
            
            if (next_item !== null) {
                  this.switchTrack(next_item.id);
            }
      },
      
      previousFeedItem: function () {
            var previous_item;
            
            previous_item = this.parent_feed.getItemBefore(this.track_id);
            
            if (previous_item !== null) {
                  this.switchTrack(previous_item.id);
            }
      },
      
      switchTrack: function (track_id) {
            var trackviewer;
            
            trackviewer = this;
            
            (new Request.JSON({
                  method    : "get",
                  url       : application_url + "/getSetOfPages",
                  
                  onSuccess : function (json_data) {
                        var container;
                        
                        container = $('trackviewer-div');
                        
                        trackviewer.track_id       = track_id;
                        trackviewer.track_title    = json_data.title;
                        trackviewer.show_title     = json_data.show_title === undefined && false || json_data.show_title;
                        trackviewer.pages          = json_data.pages;
                        trackviewer.start_at       = json_data.start_at || 0;
                        trackviewer.num_pages      = trackviewer.pages.length;
                        trackviewer.current_page   = trackviewer.start_at;
                        trackviewer.toolbar_offset = 0;
                        
                        trackviewer._toolbarSlideEffect.set(trackviewer.toolbar_offset);
                        
                        trackviewer.thumbnail_list_size = {'x': trackviewer.thumbnail_size_with_margin.x * trackviewer.num_pages, 'y': 120};
                        
                        trackviewer.preloadImages();
                        
                        if (trackviewer.num_pages > 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-thumbnails-toolbar'        ).setStyle('height'    , '120px');
                              $('trackviewer-thumbnail-pointer'         ).setStyle('visibility', 'visible');
                              $('trackviewer-toolbar-shadow'            ).setStyle('height'    , '120px');
                              
                              if (trackviewer.toolbar_position === 'top') {
                                    $('trackviewer-thumbnails-toolbar').setStyles({
                                          'bottom' : null,
                                          'top'    : '0px'
                                    });
                                    
                                    $('trackviewer-thumbnail-pointer').setStyles({
                                          'bottom' : null,
                                          'top'    : '116px'
                                    });
                                    
                                    $('trackviewer-content-div').setStyle('top'   , '120px');
                                    $('trackviewer-content-div').setStyle('height', window.getSize().y - 120 + 'px');
                                    $('trackviewer_close_text' ).setStyle('top'   , '128px');
                              }
                              
                              $('trackviewer-previous-nav-arrow').addEvent('click', trackviewer.nextFunction);
                              $('trackviewer-next-nav-arrow'    ).addEvent('click', trackviewer.previousFunction);
                        }
                        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-thumbnails-toolbar'        ).setStyle('height'    , 0);
                              $('trackviewer-thumbnail-pointer'         ).setStyle('visibility', 'hidden');
                              $('trackviewer-toolbar-shadow'            ).setStyle('height'    , 0);
                        }
                        
                        if (trackviewer.show_title) {
                              if ($$('.trackviewer-title')[0]) {
                                    $$('.trackviewer-title > h1')[0].set('text', trackviewer.track_title);
                              }
                              else {
                                    container.grab(new Element('div', {'class' : 'trackviewer-title'}).grab(new Element('h1', {'text' : trackviewer.track_title})));
                              }
                        }
                        else if ($$('.trackviewer-title')[0]) {
                              $$('.trackviewer-title')[0].dispose();
                        }
                        
                        trackviewer.setupThumbnailsToolbar();
                        
                        trackviewer.fadeoutAndLoadContent();
                        
                        trackviewer.showControls();
                        
                        trackviewer.updateDimensions();
                        
                        trackviewer.preloadImages();
                        
                        document.title = trackviewer.track_title;
                  },
                  
                  onFailure: function () {
                      alert("The request for the track page list at " + application_url + "/getSetOfPages failed.");
                  }
            })).send("contentId=" + track_id);
      },
      
      openThumbview: function () {
            var trackviewer, thumbnail, thumbnail_div, m;
            
            trackviewer = this;
            
            this._fadeout_effect.cancel();
            this._fadein_effect.cancel();
            this.hideControls();
            
            this.thumbview_selected_thumb = this.current_page;
            
            $('trackviewer-div').grab(new Element('div', {
                  'id' : 'trackviewer-thumbview-div'
            }));
            
            if ((Math.ceil(Math.sqrt(this.num_pages)) > Math.floor($('trackviewer-div').getSize().x / this.thumbnail_size_with_margin.x)) && (Math.ceil(Math.sqrt(this.num_pages)) > Math.floor($('trackviewer-div').getSize().y / this.thumbnail_size_with_margin.y))) {
                  this.thumbview_row_thumbs = Math.floor($('trackviewer-div').getSize().x / this.thumbnail_size_with_margin.x);
            }
            else {
                  this.thumbview_row_thumbs = Math.ceil(Math.sqrt(this.num_pages));
            }
            
            $('trackviewer-thumbview-div').setStyles({
                  width  : this.thumbnail_size_with_margin.x * this.thumbview_row_thumbs + 'px',
                  height : this.thumbnail_size_with_margin.y * Math.ceil(this.num_pages / this.thumbview_row_thumbs) + 'px'
            });
            
            for (m = 0; m < this.num_pages; m += 1) {
                  // Thumbnail img element is wrapped in a div for the border
                  // Allows for greater cross-browser stability and support for rounded borders
                  // using third-party plugins like DD_roundies
                  
                  thumbnail_div = new Element('div', {
                        'class' : 'thumbnail-div',
                        'id'    : 'thumbnail-div-' + m
                  });
                  
                  if (m === this.thumbview_selected_thumb) {
                        thumbnail_div.set('class', 'thumbnail-div selected-thumbnail-div');
                  }
                  
                  thumbnail_div.setStyles({
                        'width' : this.thumbnail_size.y,
                        'height': this.thumbnail_size.x,
                        'left'  : ((m % this.thumbview_row_thumbs) * this.thumbnail_size_with_margin.x) + 'px',
                        'top'   : (Math.floor(m / this.thumbview_row_thumbs) * this.thumbnail_size_with_margin.y) + 'px'
                  });
                  
                  thumbnail = new Element('img', {
                        'class' : 'thumbview-thumbnail',
                        //'id'    : 'thumbview-thumb-' + m,
                        'src'   : this.pages[m].thumb_url,
                        'width' : this.thumbnail_size.y,
                        'height': this.thumbnail_size.x
                  });
                  
                  thumbnail_div.grab(thumbnail);
                  
                  thumbnail_div.set('page_number', m);
                  
                  thumbnail_div.addEvent('click', function (event) {
                        trackviewer.closeThumbview(parseInt(this.get('page_number'), 10));
                        event.stopPropagation();
                  });
                  
                  $('trackviewer-thumbview-div').grab(thumbnail_div);
            }
            
            $('trackviewer-div').setStyle('overflow', 'auto');
            
            this._thumbview_guide_text_element = new Element('div', {'id' : 'trackviewer_thumbview_guide_text', 'text' : "Try arrow keys to navigate and tab or enter to view image"});
            
            $$('body')[0].grab(this._thumbview_guide_text_element);
            
            pageTracker._trackPageview('/' + application_url + '/' + this.track_id + '/thumbview');
      },
      
      closeThumbview: function (selected_page) {
            this._thumbview_guide_text_element.dispose();
            this._thumbview_guide_text_element = null;
            
            $('trackviewer-thumbview-div').dispose();
            
            this.showControls();
            
            if (selected_page) {
                  if (selected_page === this.current_page) {
                        this._fadein_effect.set(1);
                  }
                  else if (selected_page !== null) {
                        this.setSelectedPageChainAware(selected_page);
                  }
            }
      }
});