/**
 * @depends prototype.js
 * @depends effects.js
 * @depends g-ext.js
 * @depends g-zoom.js
 */


var FashionLoop = {
  SPACER_WIDTH: 0,
  ZOOM_FACTOR: 28,
  getSnippets: $$.curry('#snippets > div'),
  resizeCounter: 0,
  fullWidth: 0,
  loadingBkClass: '',
  shoppingLinks: [],
  
  initialize: function(options){
    this.data = _runway_models || {};
    this.texts = _runway_texts[options.lang] || {};
    this.styles = $H(_catalog_data) || $({});
    this.totalModels  = this.data.models.size();
    this.loadingBkClass = this.data.loadingBkClass || 'loading';
    this.data.textColor = this.data.textColor || '#FFF';
    
    var links = this.texts.links || [];
    for (var i = 0; i < 2; i++) {
      if (links[i])
        this.shoppingLinks.push(links[i]);
      else {
        var obj = { name: "none", url: "#", style: "visibility: hidden"};
        this.shoppingLinks.unshift(obj);
      }
    }
    // replace modified links
    this.texts.links=this.shoppingLinks;
    
    new Gucci.Home(this.data, this.texts);
    var obj = $H({});
    this.data.models.each(function(model, idx) {
      obj.id     = idx + 1;
      obj.images = model;
      obj.styles = this.styles.get(idx+1) || $H({});
      Showrooms.register(obj, (idx+1) == this.totalModels);
    }.bind(this));

    Showrooms.registerEvents();

    
    this._snippets = this.getSnippets().invoke('addClassName', 'snippet');
    
    /* Removing last spacer from DOM */
    if($(this._snippets.last()).hasClassName('spacer'))
      $(this._snippets.pop()).remove();
    
    // Setting proper width to the container so it will contain all floated snippets correctly
    this.fullWidth = FashionLoop.getFullWidth();
    $('snippets_container').setStyle({width: (this.fullWidth + 65) + 'px'});
    
    /* Removing title attribute */
    $$('#header a').invoke('writeAttribute', 'title', ''); 
    
    if ($('logo') != null && typeof getCookie == 'function') {
  		var durl = document.URL;
  		var begin, end, prefix;
  		begin = durl.indexOf('://');
  		if(begin != -1) {
    			begin += 3;
    			end = durl.indexOf('/', begin);
    			if(end != -1) {
      			prefix = 'http://' + unescape(durl.substring(begin, end));
    			}
  		}

  		if (Engine.isMSIE) {
  			$('logo').replace('<div id="logo" style="text-indent: 0;"><a href="' + prefix + '/' + getCookie('site') + '/"><img src="/images/gucci-logo.gif" width="164" height="30" alt="gucci"></a></div>');
  		}
  		else {
      		Event.observe('logo','click',function(){ 
  				document.location = prefix + '/' + getCookie('site') + '/';
  			});
  			$('logo').setStyle({cursor:'pointer'});
  		}
    }
    
    this._snippets.invoke('setStyle', {visibility: 'visible'});

    Showrooms.loadVisible();
  },
  resize: function(){
    document.fire('layout:changed');
    return;
  },
  centerIntoView: function(snippet){
    snippet = $(snippet);
    var offset = ((document.viewport.getDimensions().width - snippet.getWidth())/2).round();
    snippet.scrollTo({offset: -offset, duration: 0, transition: Effect.Transitions.full});
  },
  
  scrollIntoView: function(snippet){
    snippet = $(snippet);
    var options = Object.extend({
      duration: .8
    }, arguments[1] || { });
    
    var width = options.width || snippet.getWidth();
    var offset = ((document.viewport.getDimensions().width - width)/2).round();
    
    this.scrollFx = snippet.scrollTo(Object.extend(options, {offset: -offset}));
  },

  cacheSnippets: function(){
    this._snippets = this.getSnippets();
  },

  getFullWidth: function(){
    if(!this._snippets) this.cacheSnippets();
    
    var width = 0;
    this._snippets.each(function(snippet){
      width += snippet.getWidth();
    });
    return width + 1;
  },

  page: function(dir){
    FashionLoop.scrollToPosition(document.viewport.getScrollOffsets().left + document.viewport.getWidth()*dir);
  },

  scrollToPosition: function(position){
    scrollOffsets = document.viewport.getScrollOffsets();
    options = {
      duration:0.8, 
      queue:{scope:'page',limit:1}
    };
    new Effect.Tween(null,
      scrollOffsets.left,
      position,
      options,
      function(p){ scrollTo(p.round(), scrollOffsets.top); }
    );
  },
  
  HScroll: function(delta){
	var options = { },
    scrollOffsets = document.viewport.getScrollOffsets();

    if(scrollOffsets.left + delta < 0) delta = -scrollOffsets.left;
    if(scrollOffsets.left + delta > (window.scrollMaxX)) delta = window.scrollMaxX-scrollOffsets.left;
    
    return new Effect.Tween(null,
      scrollOffsets.left,
      scrollOffsets.left+delta,
      options,
      function(p){ scrollTo(p.round(), scrollOffsets.top); }
    );	
  }
};

var Showrooms = {
  showrooms: [],
  getSnippets: $$.curry('#snippets > .showroom'),
  isActive: false, // Used to prevent multiple clicks on different showrooms
  
  initialize: function(collection){
    this.collection = collection;
    if(!this._snippets) this.cacheSnippets();
  },

  spacerEvent: function(event, spacer) {
    var dir = (Event.localPointer(event)[0]) < 33 ? 1 : -1;
    var jump = spacer.getWidth();
    var next = ((dir > 0) ? spacer.next() : spacer.previous());
    if (next) {
      var jump = jump + next.getWidth();
      FashionLoop.HScroll(dir * jump);
    }
  },

  cacheSnippets: function(){
    this._snippets = this.getSnippets();
  },
  
  register: function(object, last){
    var id = object.id;
    var idx = this.showrooms.length + 1;
    if (!last)
      var html = new Template('<div class="showroom" id="showroom_#{id}" visibility: hidden"><div class="container #{loadingBkClass}"><div class="full_image_wrapper"><img src="/images/empty.gif" class="full" alt="" /></div><div class="details" style="display: none"><a href="#" class="close">'+Gucci.getTerm('runway_close')+'</a><ol class="links-list"><li><a style="#{links[0].style}" title="#{links[0].name}" href="#{links[0].url}">#{links[0].name}</a></li><li><a style="#{links[1].style}" title="#{links[1].name}" href="#{links[1].url}">#{links[1].name}</a></li></ol><div class="scroller-container"><div class="style_list_top"></div><ol class="style-list"></ol><div class="style_list_bottom"></div><div class="scrollbar" style="display: none"><div class="handle"></div></div></div><p class="soldout-msg" style="display:none"></p></div></div><div class="shadow-bottom"><div class="start"> </div><div class="end"> </div></div><div class="shadow-right"> </div></div><div class="spacer" style="background-position: 0pt 0pt; visibility: hidden"> </div>');
    else
      var html = new Template('<div class="showroom" id="showroom_#{id}" style="visibility: hidden"><div class="container #{loadingBkClass}"><div class="full_image_wrapper"><img src="/images/empty.gif" class="full" alt="" /></div><div class="details" style="display: none"><a href="#" class="close">'+Gucci.getTerm('runway_close')+'</a><ol class="links-list"><li><a style="#{links[0].style}" title="#{links[0].name}" href="#{links[0].url}">#{links[0].name}</a></li><li><a style="#{links[1].style}" title="#{links[1].name}" href="#{links[1].url}">#{links[1].name}</a></li></ol><div class="scroller-container"><div class="style_list_top"></div><ol class="style-list"></ol><div class="style_list_bottom"></div><div class="scrollbar" style="display: none"><div class="handle"></div></div></div><p class="soldout-msg" style="display:none"></p></div></div><div class="shadow-bottom"><div class="start"> </div><div class="end"> </div></div><div class="shadow-right"> </div></div>');
    $('menu-right').insert({'before': html.evaluate({id: id, textColor: FashionLoop.data.textColor, loadingBkClass: FashionLoop.loadingBkClass, links: FashionLoop.shoppingLinks})});
    this.showrooms.push(new Gucci.Showroom('showroom_' + id, object));
  },
  
  getAllOpened: function(){
    return this.showrooms.map(function(obj){
      return (obj.isOpened) ? obj : null;
    }).compact();
  },
  
  getVisible: function(){
    var scrollLeftOffset = document.viewport.getScrollOffsets().left;
    var windowWidth = document.viewport.getWidth();
    
    return this.showrooms.map(function(showroom){
      var el = showroom.element;
      var elLeft = el.cumulativeOffset().left;
      var elRight = el.cumulativeOffset().left + el.getWidth();
      
      if(scrollLeftOffset < elLeft && (scrollLeftOffset + windowWidth) > elLeft) {
  			return showroom;
  		} else {
  			if(scrollLeftOffset < elRight && (scrollLeftOffset + windowWidth) > elRight) 
  			  return showroom;
  		}
    }).compact();
  },
  
  loadVisible: function() {
		if(this._loaderTimeout) clearTimeout(this._loaderTimeout);
		this._loaderTimeout = setTimeout(function(){
		  this.getVisible().invoke('load');
		}.bind(this), 250);
	},
	
	scrollAndOpen: function(event, index){
	  var e = event || window.event;
    this.showrooms[index-1].scrollAndOpen(e);
  }, 
  
  registerEvents: function() {
    Event.observe(window, 'scroll', this.loadVisible.bind(this));
    Event.observe(window, 'resize', this.loadVisible.bind(this));
    $$('div.spacer').each(function(spacer, i){
      spacer.observe('click', function(event){
        Showrooms.spacerEvent(event, spacer); 
      });
      spacer.observe('mousemove', function(event){
        var d = (Event.localPointer(event)[0]) < 33 ? '-65' : '-130';
        spacer.setStyle({backgroundPosition: d + 'px 0px'});
      });
      spacer.observe('mouseout', function(event){
        spacer.setStyle({backgroundPosition: '0 0'});
      });
    });
  }
};

Gucci.Showroom = Class.create();
Gucci.Showroom.prototype = {
  
  isOpened: false,
  isLoaded: false,
  hasStyles: false,
  
  initialize: function(id, data){
    this.data = Object.extend({}, data);
    this.hasStyles = data.styles.size() > 0;
    this.element = $(id);
    if(!this.element) throw "Required element not found";
    
    this.image = this.element.down('.container img');
    if(!this.image) throw "Required element not found";
  },
  
  load: function(){
    if(this.isLoaded) return;
    
    var _this = this;
    var element = this.element;
    var image = this.image;
    var data = this.data;
    var imgUrl = data.images.full;
    
    if (image.src == imgUrl) return;
		
		element.addClassName('loading');
		Loader.load(imgUrl, {
		  onComplete:function(img){
			  if (!img) return;
				image.setOpacity(0);
				
				(function(){
				  
				  _this.buildHTML(_this.data);
				  
				  image.src = img;
				  new Effect.Appear(image, {
				  	afterFinish: function(){
				  	  element.removeClassName('loading');
              _this.lookNumberOverlay.appear();
				  	  _this.registerEvents();
				  	}
					});
				}).delay(.1);
				
				this.isLoaded = true;
				
	    }.bind(this)
	  });
  },
  
  buildHTML: function(data){
	var content =  new Element('div', {className: 'content', title: Gucci.getTerm('view the look')}).update(Gucci.getTerm('view the look'));
	var end = new Element('div', {className: 'end'});
	var buttoninner = new Element('div', {className: 'rtw_button_inner'});
    this.hoverButton = new Element('div', {className: 'rtw_button'}).hide();
	buttoninner.appendChild(content);
	buttoninner.appendChild(end);
	this.hoverButton.appendChild(buttoninner);


    if(!this.hoverButton) throw "Required element not found";
    
    var lookNumber = parseInt(data.id, 10).toPaddedString(1);
    /* Building overlay with number */
    this.lookNumberOverlay = new Element('div', { className: 'showroom-number', 'style': 'color:' +  FashionLoop.data.textColor} ).update(lookNumber).setOpacity(0);
    this.image.up().insert({'bottom': this.lookNumberOverlay});
    this.image.up().insert({'bottom': this.hoverButton});
    
    /* Building style's list */
    var listEl = this.element.down('ol.style-list');
    if(!listEl) throw "DOM structure doesn't compatible with this method";
    
    /* Building style's number in details */
    // this.styleTitle = new Element('li', {className: 'look-number'}).update(new Element('h2').update((data.available == false) ? lookNumber + '<sup>*</sup>' : lookNumber));
    listEl.insert(this.styleTitle);
    
    var template = new Template('<li#{className}><span>#{description}</span><br /><em>#{sku}</em></li>');
    data.styles.each(function(style, idx){
      style.idx = idx+1;
      listEl.insert({'bottom': template.evaluate(style)});
    }.bind(this));
  },
  
  toggle: function(){
    if(!this.isOpened)
      this.scrollAndOpen();
    else
      this.close();
  },
  
  scrollAndOpen: function(event){
    if(Showrooms.isActive) return;
    if (!this.isLoaded) this.load(); 
    Showrooms.isActive = true;
    FashionLoop.scrollIntoView(this.element, {
      width: this.hasStyles ? 780 : 520,
      afterFinish: function(){
        setTimeout(function(){
          if(this.isOpened) return;
          this.open(event);
          this.isOpened = true;
        }.bind(this), 10);
      }.bind(this)
    });
  },
  
  open: function(event){
	var parthis = this;
    this.element.down('div.details').show();
    var imgUrl = this.data.images.zoom;

	Loader.load(imgUrl, {
  		  onComplete:function(){
		    parthis.zoomer = new Gucci.Zoomer(parthis.element, imgUrl, parthis.hasStyles ? 780 : 520);
		    parthis.zoomer.zoomIn(event);
	}});

    new Effect.Parallel([
      //new Effect.Morph(this.element.down('.container'), { style : {'width': this.hasStyles ? '780px' : '520px' } }),
      new Effect.Morph('snippets_container', { style : {'width': ($('snippets_container').getWidth() + (this.hasStyles ? 520 : 260)) + 'px'} }),
      new Effect.Fade(this.hoverButton)
      // new Effect.Opacity(this.lookNumberOverlay, {to: 0})
    ], {
      duration: 1.5,
      //transition: Effect.Transitions.linear,      
      beforeStart: function(){
        if(Prototype.Browser.IE) this.hoverButton.hide();
        if(!(Prototype.Browser.IE && (/MSIE 6\./.test(navigator.userAgent))))
          this.initScrollPanel(this.element.down('ol.style-list'), this.element.down('div.handle'), this.element.down('div.scrollbar'), this.element.down('ol.style-list').getHeight());
      }.bind(this),
      afterFinish: function(){
        if(Prototype.Browser.IE && (/MSIE 6\./.test(navigator.userAgent))) {
          this.initScrollPanel(this.element.down('ol.style-list'), this.element.down('div.handle'), this.element.down('div.scrollbar'), this.element.down('ol.style-list').getHeight());
          this.element.down('.shadow-bottom').setStyle({'width': this.element.getWidth() + 'px'});
        }  
        Showrooms.isActive = false;
        
        // failsafe ...
        var fullWidth = FashionLoop.getFullWidth();
        new Effect.Morph('snippets_container', { style : {'width': (fullWidth + 65) + 'px'} });
      }.bind(this)
    });
    
    // Optional animation FX after zoom in effect
    this.element.observe('zoomer:zoomedIn', function(event){
      var el = event.memo.element.down('img.zoomer-image');
      this.fx = new Effect.Morph(el, {
        style: { top: 504 - el.getHeight() + 'px' },
        duration: 2.5,
        afterFinish: function(fx){
             setTimeout(function() {
               new Effect.Morph(el, {style:{top: '0px'}, duration: 2.5});
             }, 1000);
        }.bind(this)
      });
    }.bind(this));
    
    this.element.observe('zoomer:dragged', function(event){
      // Cancel animation if user start dragging big image before the animation is finished
      if(this.fx) this.fx.cancel();
    }.bindAsEventListener(this));
    
    this.element.observe('zoomer:beforeZoomOut', function(event){
      // Syncing big and small images to animate smoothly
      var offsetTop = 0;
      
      if(this.fx) {
        offsetTop = this.fx.element.getStyle('top');
        this.fx.cancel();
      }
      
      this.zoomer._fullStyle = { 
		    left: ((this.zoomer.full.deltax) ? (this.zoomer.full.deltax * Gucci.Zoomer.FACTOR) : 0) + 0 + this.zoomer._zoomInRepositionOffsetX + 'px', 
		    top: parseInt(offsetTop) + this.zoomer._zoomInRepositionOffsetY + 'px'
		  };
    }.bindAsEventListener(this));
  },
  
  close: function(){
    if (Showrooms.active) return;
    Showrooms.active = true;
    this.zoomer.zoomOutAndDestroy({afterDestroy: function(){
      new Effect.Parallel([
       new Effect.Morph(this.element.down('.container'), { style : {'width': '260px'} }),
       new Effect.Opacity(this.lookNumberOverlay, {to: 1})
      ], {
        duration: .8,
        beforeStart: function(){
          if(Prototype.Browser.IE && (/MSIE 6\./.test(navigator.userAgent))) {
            this.element.down('.shadow-bottom').setStyle({'width': '260px'});
          }
        }.bind(this),
        afterFinish: function(){
          Showrooms.active = false;

          var fullWidth = FashionLoop.getFullWidth() + 65;
          new Effect.Morph('snippets_container', { style : {'width': (fullWidth) + 'px'}, 
            afterFinish: function(){
              var docWidth = document.viewport.getWidth();
              var docScrollLeft = document.viewport.getScrollOffsets()[0];
              //alert (docWidth);
              if ((fullWidth-docWidth)<docScrollLeft)
                FashionLoop.scrollToPosition(fullWidth-docWidth+65);
            } 
          }); 
          Showrooms.isActive = false;
          this.isOpened = false;
          this.zoomer.destroy();
          Showrooms.loadVisible();
        }.bind(this)
      });
    }.bind(this)
    });
    
    // Remove animation related event listeners
    this.element.stopObserving('zoomer:zoomedIn');
    this.element.stopObserving('zoomer:dragged');
    this.element.stopObserving('zoomer:beforeZoomOut');
  },
  
  initScrollPanel: function(panel, handle, track, scrollHeight) {
    var panelContainerHeight = panel.up().getHeight();
    if(panelContainerHeight < (scrollHeight || 372)) {
      $(track).show();
      this.scrollPanel = new Control.Slider(handle, track, { 
        axis: 'vertical',
        onSlide:function(v) {
          panel.setStyle('top: -' + v*(scrollHeight - panelContainerHeight) + 'px');
        },
        onChange:function(v) {
          panel.setStyle('top: -' + v*(scrollHeight - panelContainerHeight) + 'px');
        }
      });
      /* Mouse wheel for panels */
      var wheelCallback = function(e){
        var delta = Event.wheel(e);
        var factor = Prototype.Browser.WebKit ? 0.03 : 0.07;
        this.scrollPanel.setValueBy(delta > 0 ? -factor : factor);
      };
      Event.observe(panel, "mousewheel", wheelCallback.bindAsEventListener(this));
      Event.observe(panel, "DOMMouseScroll", wheelCallback.bindAsEventListener(this)); // Firefox
    } else
      $(track).hide(); //display none for scrollbar if not needed
  },
  
  registerEvents: function(){
    this.image.observe('click', this.mouseClickObserver.bind(this));
    this.image.observe('mouseover', this.mouseInObserver.bind(this));
    this.image.observe('mouseout', this.mouseOutObserver.bind(this));

    this.hoverButton.observe('click', this.mouseClickObserver.bind(this));
    this.hoverButton.observe('mouseover', this.mouseInObserver.bind(this));
    
    this.element.down('a.close').observe('click', function(e){
      e.stop();
      this.close();
    }.bind(this));
  },
  
  mouseClickObserver: function(event){
    if(!this.isOpened) {
      this.scrollAndOpen(event);
    } else return;
  },
  
  mouseInObserver: function(event){
    if(this.isOpened) return;
    if(!Prototype.Browser.IE) {
      if(this.fadeOutFx) this.fadeOutFx.cancel();
      this.fadeInFx = new Effect.Appear(this.hoverButton, {duration: .25});
    } else
      this.hoverButton.show();
  },
  
  mouseOutObserver: function(event){
    if(this.isOpened) return;
    if(!Prototype.Browser.IE) {
      if(this.fadeInFx) this.fadeInFx.cancel();
      this.fadeOutFx = new Effect.Fade(this.hoverButton, {duration: .5});
    } else
      this.hoverButton.hide();
  }
};

Gucci.Home = Class.create();
Gucci.Home.prototype = {
  
  isLoaded: false,
  thumbs: [],
  getThumbs: $$.curry('#home img.thumb'),
  
  initialize: function(data, texts){
    this.data = data;
    this.texts = texts;
    
    this.element = $('home');
    if(!this.element) throw "Required element not found";
    
    this.buildHTML();
    thumbs = this.getThumbs();
    this.load();
    
    this.element.down('div.panel').delegate('click', {
      'a.open': function(event){
        event.stop(); 
        Showrooms.scrollAndOpen(event, 1);
      }.bind(this)
    });
    
    this.element.down('div.panel').delegate('click', {
      'a.open': function(event){
        event.stop(); 
        Showrooms.scrollAndOpen(event, 1);
      }.bind(this)
    });
      
   },
  
  buildHTML: function(){
    var paneltemplate = {};
    if (this.texts.video) {
      paneltemplate =  new Template('<h1><a class="open" href="#open">#{title1}</a></h1><h2><a class="open" href="#open">#{title2}</a></h2><p><a href="#{video}">'+Gucci.getTerm('runwayvideo')+'</a></p><ol class="links-list"><li><a style="#{links[0].style}" title="#{links[0].name}" href="#{links[0].url}">#{links[0].name}</a></li><li><a style="#{links[1].style}" title="#{links[1].name}" href="#{links[1].url}">#{links[1].name}</a></li></ol>'); 
    } else {
      paneltemplate =  new Template('<h1><a class="open" href="#open">#{title1}</a></h1><h2><a class="open" href="#open">#{title2}</a></h2><p></p><ol class="links-list"><li><a style="#{links[0].style}" title="#{links[0].name}" href="#{links[0].url}">#{links[0].name}</a></li><li><a style="#{links[1].style}" title="#{links[1].name}" href="#{links[1].url}">#{links[1].name}</a></li></ol>'); 
    }
    if (FashionLoop.loadingBkClass)
      this.element.down('div.container').addClassName(FashionLoop.loadingBkClass)
    this.element.down('div.panel').insert({'bottom': paneltemplate.evaluate(this.texts)});
    
    $R(1,18).each(function(thumb, idx){
      var template = new Template('<img class="thumb" id="thumb_#{index}" src="/images/empty.gif" alt="" onclick="Showrooms.scrollAndOpen(event, #{index});" />');
      this.element.down().insert({'bottom': template.evaluate({index: parseInt(idx+1, 10).toPaddedString(2) })});
    }.bind(this));
  },
  
  load: function(){
    var imgUrl = "";
    var element = this.element;
    
    thumbs.each(function(thumb, idx){
      imgUrl = this.data.models[idx].thumb;
      if (thumb.src == imgUrl) return;
      
      Loader.load(imgUrl, {
  		  onComplete:function(img){
  			  if (!img) return;
  				thumb.setOpacity(0).writeAttribute('src', img).appear({ delay: idx*.05	});
  	    }
      });

	  }.bind(this));
  }
};

// 
Event._observeShortcuts = true;
Event.registerShortcut = function(shortcut, callback) {
  Event.observe(document,'keyup',function(event){
    if(!Event._observeShortcuts) return;
    if(/input|textarea|select|object|option/i.test(Event.element(event).tagName)) return;
    if(shortcut==event.keyCode) callback(shortcut);
  });
};

// Event listeners for numerous layout fixes
(function(){
  var events = [
    [window, 'scroll'], 
    [window, 'resize'],
    [document, 'dom:loaded'], 
    [document, 'layout:changed']
  ];
  var container = $('container');
  var header = $('header-content'); 
  
  // Flicker removing for IE6
  if(Prototype.Browser.IE6)
    try {
      document.execCommand('BackgroundImageCache', false, true);
    } catch(e) {}
  
  events.each(function(event){
    Event.observe(event[0], event[1], function(e){
      if(document.viewport.getHeight() <= container.getHeight()) {
        if(!container.hasClassName('absolute')) {
          container.addClassName('absolute');
        }
      } else {
        if(container.hasClassName('absolute')) {
          container.removeClassName('absolute');
          header.setStyle({
            marginLeft: '-130px',
            width: '100%'
          })
        }   
      }
      var isAbsolute = container.hasClassName('absolute');
      if(Prototype.Browser.IE6 || isAbsolute) {
        // Emulating position: fixed and max-width for IE6
        var docWidth = document.viewport.getWidth();
        var docScrollLeft = document.viewport.getScrollOffsets()[0];
        var containerWidth = container.getWidth() - 65;
        header.setStyle({
          marginLeft: (docScrollLeft) - (Prototype.Browser.IE6 && !isAbsolute ? 65 : 0)  + 'px',
          width: (docWidth) < containerWidth ? (docWidth - (Prototype.Browser.IE6 && !isAbsolute ? 65 : 130)) + 'px' : '100%'
        });
      } else {
        //var docWidth = document.viewport.getWidth();
        // Setting max-width for modern browsers
        // header.setStyle('max-width: ' + (docWidth - 65) + 'px');
      }
    })
  });
})();