/*
Class: RTW
Static "Class" to handle new ReadyToWear/Look pages. Similar Features to gucci-shop.js.
Still mixed DOM tree knowlege/manipulations with logic but (still) mutch slicker than a 2000 line Shop class.
*/

var RTW = {
  _requestingEle: null,
  _data: new Hash(),
  _DOMIdToDisplayGroup: new Hash(),
  _thumbs: new Hash(),
  _variationPanels:[],
  _activeStyleForDisplayGroup: new Hash() // stores the active style to a panel
};

// recalculates the width of the layout components and sets their width
RTW.adjustLayoutWidth = function() {
  var width = RTW.calcLayoutWidth() + 'px';
  $('wrapper').setStyle({ width: width });
  $('layout').setStyle({ width: width });
};

RTW.calcLayoutWidth = function() {
  // Formula: width of all rtws + width of all spacers + 2 menus
  var width = 0;
  
  // width of all rtws
  RTW.rtws.each(function(rtw) {
    width += rtw.getWidth();
  });
  
  // spacers
  width += (RTW.rtws.length) * 65;
  
  // menus
  width += 2 * 236;

  return width;
};

// Helper functions for variation panel

RTW.getThumbIdFromDisplayGroupId = function (displayGroup_Id) {
  var thumbId;
  RTW._DOMIdToDisplayGroup.each(function(pair) {
    if (pair.value.displayGroup_id == displayGroup_Id) {
      thumbId = pair.key;
    }
  });
  return thumbId;  
}

RTW.getDisplayGroupFromThumbId = function (thumbId) {
  var displayGroupInfo=RTW._DOMIdToDisplayGroup.get(thumbId);
  if (displayGroupInfo)
    return gucci.DataHelper.getLookDisplayGroup(displayGroupInfo.displayGroup_id);
}
// end of Helper

RTW.initialize = function() {
  //NOTE: ignore initalize call if the loaded page is a alter page.
  if ($$('div.lightbox').length > 0) return;
  this.rtws = $$('div.rtw');

  this.rtws.each(function(rtw) {
    var sid = rtw.id.gsub('rtw', '');
    RTW._data.set(rtw.id, new Hash());
    
    RTW._variationPanels[rtw.id] = new GUCCI.VariationPanel(RTW, rtw, RTW._data.get(rtw.id), {
		    DomIdToDisplayGroup: RTW._DOMIdToDisplayGroup, 
		    getDisplayGroupFromThumbId: RTW.getDisplayGroupFromThumbId,
		    getThumbIdFromDisplayGroupId: RTW.getThumbIdFromDisplayGroupId
	    });	  
  	;
    
    rtw.getKey = function(key) {
      return RTW._data.get(this.id).get(key);
    }.bind(rtw);

    rtw.setKey = function(key, value) {
      RTW._data.get(this.id).set(key, value);
    }.bind(rtw);

    rtw.isBusy = function() {
      return this.getKey('busy');
    }.bind(rtw);

    rtw.setBusy = function() {
      this.setKey('busy', true);
    }.bind(rtw);

    rtw.setIdle = function() {
      this.setKey('busy', false);
    }.bind(rtw);

    rtw.getChild = function(childname) {
      // performant way to get the childs of an rtw instead of walking the dom
      var id = this.id.gsub('rtw', '');
      if (childname == 'model') {
        return $(['thumbnail', id, '_model'].join(''));
      } else {
        return $([childname, id].join(''));
      };
    };
    rtw.getDetailWrapper = function() {
      return rtw.details;
    };
  });
  
  this.loadVisibleLookImages();

  this.getVisibleRtws().each(function(rtw) {
    RTW.setDefaultValues(rtw);
  });
  this.initializeThumbsFromProductList();

  this.registerEvents();
};

RTW.initializeThumbsFromProductList = function() {
  list = $H(gucci.DataHelper.getLooksDisplayGroups());
  var thumbs = $$('div.rtw div.container div.displaygroup img');
  RTW.thumbs = [];
    
  // care about the filled slots
  list = list.toArray();
  for (var index = 0; index < list.length; index++){
    var listitem = list[index];
    var displayGroup = listitem[1];
    var link_id = displayGroup.link_id;
    var thumb = $("thumbnail_"+displayGroup._parent.look_id+"_"+displayGroup.displayGroup_id);
    if ((displayGroup != null) && (thumb)) {
      RTW._DOMIdToDisplayGroup.set(thumb.id, {
        link_id: link_id,
        displayGroup_id: displayGroup.displayGroup_id,
        currentProduct: displayGroup.leadStyle,
        currentStyle: displayGroup.leadStyle.style_number,
        currentThumbIndex: 0
      });
  /*    RTW._thumbs.push({
        id:         displayGroup.leadStyle.style_number,
        stylegroup: displayGroup.link_id,
        thumburl:   displayGroup.leadStyle.images.panel_thumb
      }); */
    }
  }
};


RTW.registerEvents = function() {
  Event.observe(window, 'scroll', this.windowOnScrollEvent.bindAsEventListener(this));

  this.rtws.each(function(rtw) {
    var showroom = rtw.getChild('showroom');
    showroom.observe('mouseover', this.showButton.curry(rtw));
    showroom.observe('mouseout', this.hideButton.curry(rtw));
  }.bind(this));


  document.observe('click', function(event) {
    if (event.element().hasClassName('full') || event.element().hasClassName('rtw_button') || event.element().hasClassName('content')) {
      RTW.prepareExpand(event.element().up('div.rtw'));
    }
  });

};

RTW.windowOnScrollEvent = function(event) {
  this.getVisibleRtws().each(function(rtw) {
    RTW.setDefaultValues(rtw);
  });
  this.loadVisibleLookImages();
};

RTW.registerThumbnailAndListItemEventsForRtw = function(rtw) {
  rtw.select('img.thumb').each(function(thumb) {
    thumb.observe('click', function() { RTW.requestDisplayGroup(thumb); });
  });

  rtw.select('li.listItem').each(function(listItem) {
    if (Engine.isMSIE6) {
      listItem.setStyle({ zoom: 1 });
      listItem.onmouseenter = function() { listItem.setStyle({ background: '#C5B58F'}); };
      listItem.onmouseleave = function() { listItem.setStyle({ background: 'url(/images/empty.gif)'}); };
    };
    listItem.observe('click', function() { RTW.requestDisplayGroup(listItem); });
  });
};

RTW.showButton = function(rtw) {
  if(rtw.getKey('expanded')) return;
  var button = rtw.down('div.rtw_button');
  button.show();
};

RTW.hideButton = function(rtw) {
  if(rtw.getKey('expanded')) return;
  var button = rtw.down('div.rtw_button');
  button.hide();
};

RTW.checkScrolling = function(detailcontainer) {	
  if (typeof detailcontainer != 'object') return;
  var vardesc = detailcontainer.down('div.description-variation');
  if (typeof vardesc != 'undefined') {
  	var scrollheight = vardesc.down('div.scrollbar').getHeight();
	  if (vardesc.getHeight()-10 > scrollheight) {
		vardesc.setStyle({height: scrollheight + 'px'});
		Gucci.scrollPanel(
			vardesc,
		  	vardesc.down('div.handle'),
		  	vardesc.down('div.scrollbar'),
		  	vardesc.getHeight()
		);
	  }
  }
};

/*
Property: activateScrollPanel
  Wrapper for Gucci.scrollPanel. Should be called after apperiance of scrollabel div to garanty
  it works with scrollweel.
*/
RTW.activateScrollPanel = function(element, elementScroll) {
  Gucci.scrollPanel(element, elementScroll.down('div.handle'), elementScroll, element.getHeight());
};

/*
Property: getIds
  Trys to determine look_id and style_number via some identifiers (= a dom element) id.

Parameters:
  identifier - DOMElement - some element (hopefully) inside a div.rtw element, or the div.rtw element itself.

Returns:
  ids - Object
  ids.look_id - String - look_id of current Look
  ids.style_number (optional) - String - style_number of current Product
*/
RTW.getIds = function(identifier) {
  var ids = {};
  var temp = identifier.id.split("_");
  ids.look_id = temp[1];
  ids.displayGroup_id = temp[2] || null;
  //HACK: klemens = fix this soon man!!!
  //if (ids.style_number) ids.link_id = 'cl_slg_' + ids.style_number.replace(/(.{6})(.{5})(.{4})/, '$1'+'_'+'$2'+'_'+'$3');
  return ids;
};

/*
Property: getRtwElement
  Trys to determine the parent div.rtw element

Parameters:
  identifier - DOMElement - some element (hopefully) inside a div.rtw element, or the div.rtw element itself.

Returns:
  rtw - DOMElement - (bool false if not found)

See Also:
  <getLookElements>, <getIds>
*/
RTW.getRtwElement = function(identifier) {
  var temp = $(identifier);
  if (Object.isElement(temp)) {
    var rtw = temp.hasClassName('rtw') ? temp : temp.up('div.rtw');
  } else {
    var rtw = $('rtw_'+identifier);
    if (!rtw) return false;
  }
  return rtw;
};

/*
Property: getLookElements
  Fetches all needed DOMElements inside a div.rtw

Parameters:
  identifier - DOMElement - some element (hopefully) inside a div.rtw element, or the div.rtw element itself.

Returns:
  elements - Object - full of DOMElements
  elements.look_id - String
  elements.rtw - DOMElement
  elements.alter - DOMElement
  ...
*/
RTW.getLookElements = function(identifier) {
  var elements = {};
  elements.rtw = this.getRtwElement(identifier);
  elements.look_id = elements.rtw.id.split('_')[1];
  elements.alter = elements.rtw.getChild('alter');
  elements.displaygroups = elements.alter.down('div.displaygroups');
  elements.model_thumb = elements.rtw.getChild('model');
  elements.showroom = elements.rtw.getChild('showroom');
  elements.rtw_button = elements.showroom.down('div.rtw_button');
  elements.getfull_image_wrapper = function () {
     return elements.showroom.down('div.full_image_wrapper');
   }
  elements.getactive_full_image = function () {
     return elements.showroom.down('img');
  } 
  elements.details = elements.rtw.getChild('details');
  elements.collection_overview = elements.details.down('div.collection_overview');
  elements.details_for_product = elements.details.down('div.details_for_product');
  elements.personal_shopper_form = elements.rtw.getChild('personal_shopper_form');
  elements.personal_shopper_collection = elements.details.down('div.personal_shopper_collection');
  elements.getCurrentDetail = function() {
    var displayGroupInfo = RTW._DOMIdToDisplayGroup.get(elements.rtw.getKey('activeDisplayGroup').id);
    if (displayGroupInfo && displayGroupInfo.currentStyle) {
       return $('details_' + elements.look_id + "_" + displayGroupInfo.currentStyle);
    } else {
       return elements.details_for_product;  // in case of modelview
    }
  }   
  
  return elements;
};

/*
Property: setDefaultValues
  The div.rtw elements has its own state setter getter methods for its current state.

Parameters:
  rtw - DOMElement - div.rtw

See Also:
  <initalize>
*/
RTW.setDefaultValues = function(rtw) {
  var currentRTW = RTW._data.get(rtw.id);
  if(currentRTW.get('initialized')) return;
  currentRTW.set('initialized', true);
  currentRTW.set('defaultFullImageSrc', rtw.getChild('showroom_image').src);      // model image (image which appears when alters are closed)
  currentRTW.set('activeDisplayGroup', rtw.getChild('model'));                    // current selected display group
  //currentRTW.set('activeFullImage', rtw.getChild('showroom_image'));              // current shown full image
  currentRTW.set('activeDetails', false);
  currentRTW.set('modelSelected', true);                                // is model thumb selected?
  currentRTW.set('openCount', 0);                                       // how often a panel was opened
  currentRTW.set('personalShopper', false);                             // is personal_shopper div visible
  currentRTW.set('showDisplayGroup_active', false);                     // is method showDisplayGroup currently "working"
  currentRTW.set('expand_active', false);                               // is method expand currently "working"
  currentRTW.set('expanded', false);

  currentRTW.set('busy', false);

  currentRTW.set('currentDisplayGroup', false);
  currentRTW.set('currentProduct', false);
  currentRTW.set('currentSku', false);
  currentRTW.set('currentLook', gucci.Data.looks[rtw.id.split('_')[1]]);
  
  // variations init
  currentRTW.set('open', false);
  currentRTW.set('activeProduct',null);
};

RTW.loadVisibleLookImages = function() {
  var visibleRtws = RTW.getVisibleRtws();
  visibleRtws.each(function(rtw, index) {
    if (rtw.getKey('defaultFullImageLoaded')) return;
    var rtwId = rtw.id.gsub('rtw_', '');
    var look = gucci.Data.looks[rtwId];
    var imageSrc = look['images'].full360 ? look['images'].full360[0] : look['images'].full;
    rtw.setKey('defaultFullImageSrc', imageSrc);
    Loader.load(imageSrc, {
      onComplete: function(url) {
        var imageCode = '<img id="'+ 'showroom_image_'+rtwId+'" class="full" src="'+url+'" style="opacity:0;filter:alpha(opacity=0)"/>';
        rtw.getChild('showroom_image').up().update(imageCode);
        rtw.getChild('showroom_image').morph('opacity:1', {
          delay: index/4
        });
        //rtw.setKey('activeFullImage', rtw.getChild('showroom_image'));
     }});
     rtw.setKey('defaultFullImageLoaded', true);
  });
};

/*
Property: prepareExpand
  Prepare expand of a specific div.rtw element (from one 260px block to three)

Parameter:
  rtw - DOMElement - div.rtw

See Also:
  <collapse>
*/
RTW.prepareExpand = function(rtw, fromDeepLink) {
  if (rtw.hasClassName('open')) {
    if (fromDeepLink) {
      Effect.HScrollToElement(rtw);
    }
    return; //ignore if this look is already expanded
  }
  if (rtw.getKey('expand_active')) {
    if (fromDeepLink) {
      Effect.HScrollToElement(rtw);
    }
    return; //ignore if this look is already expanding
  }
  rtw.setKey('expand_active', true);

  if (!fromDeepLink) {
    RTW.setDeepLink(rtw);
  }

  var look = gucci.Data.looks[rtw.id.gsub('rtw_', '')];
 
 if (typeof CmCustom != 'undefined') {
	(function() { 
		CmCustom.productView('RTW LOOK ' + look.look_id);
	}).defer();
  }
  
  RTW.renderLookTemplates(look, RTW.expand, {rtw: rtw, fromDeepLink: fromDeepLink});
};


/* 
Function: expand
  after preparation of expand all elements are within the DOM tree. 
  Animation and opening can proceed.

  Parameter: 
    rtw: DOM Element
    fromDeeplink: was opened via direct link
    look: look object.
*/

RTW.expand = function(rtw, fromDeepLink, look) {
  rtw.setKey('activeDetails', rtw.down('div.collection_overview'));
  if (typeof salenav != 'undefined' && salenav) {
	if (rtw.down('div.collection_overview').down('div.personal_shopper'))
		rtw.down('div.collection_overview').down('div.personal_shopper').update();
  }
  //model thumbnail
  rtw.getChild('model').src = look['images'].panel_thumb;

  //each product thumbnail
  Object.keys(look.displayGroups).each(function(displayGroup_id, i) {
    var displayGroup = look.displayGroups[displayGroup_id];
    var thumbnail = $('thumbnail_'+look.look_id+'_'+displayGroup_id);
    
    if (displayGroup.leadStyle.images.panel_thumb!="") {
      thumbnail.src = displayGroup.leadStyle.images.panel_thumb;
    } else {
      RTW.changeThumbnail(thumbnail,0); // displays image unavailable ...
    }

  });

  var alter = rtw.getChild('alter');
  
  // corrects width of every 3rd displaygroup in a 3x3 alter, to ensure a correct width of 260px
 if (alter.hasClassName('alter_3x3') || alter.hasClassName('alter_3x4') ) {
    alter.select('.displaygroup').each(function(displaygroup, i) {
      if (i % 3 == 0) displaygroup.setStyle({ width: '86px' });
      var thumb = displaygroup.down('img');
      if (thumb) {
        thumb.width = 87;
        thumb.height = 113;
        if (Prototype.Browser.IE) { //make ie render scaled images smoothly
          var originalSrc = thumb.src;
          thumb.src = '/images/empty.gif';
          thumb.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+originalSrc+"',sizingMethod='scale');";
        }
      }
    });
  }
  var ele = RTW.getLookElements(rtw);
  var ids = RTW.getIds(rtw);

  if (Engine.isMSIE6) ele.rtw_button.hide();
  ele.showroom.setStyle({ cursor: 'default' });

  RTW.activateScrollPanel($(ele.rtw.id+'_styles'), $(ele.rtw.id+'_styles_scrollbar'));
  if ($(ele.rtw.id+'_styles').down('ul.styles').offsetHeight < 350) $(ele.rtw.id+'_styles_scrollbar').hide();

  if (!Engine.isMSIE6) {
    new Effect.Opacity(ele.rtw_button, {
      from: 1, to: 0,
      afterFinish: function(effect) {
        if (Engine.isMSIE6) effect.element.setOpacity(0).show();
      }
    });
  }

  new Effect.Parallel([
    new Effect.Morph(ele.rtw, { style: 'width: 780px', sync: true }),    
    new Effect.Morph(ele.rtw.down('div.container'), { style: 'width: 780px', sync: true }),
    new Effect.Morph(ele.alter, { style: 'width: 259px', sync: true }),
    new Effect.Morph(ele.details, { style: { width: '259px', left: '520px' }, sync: true })
    //TODO: klemens: show rotate buttons for model
  ].concat(Gucci.scaleLayout(520)), {
    beforeStart: function() {
      ele.showroom.setStyle({
      });
    },
    duration: 0.8,
    transition: Gucci.cubic,
    afterFinish: function() {
      if (Engine.isMSIE7) {
        [ele.collection_overview, ele.personal_shopper_collection].each(function(container) {
          container.down('div.personal_shopper').setStyle({
            position: 'absolute',
            top: '435px'
          }).show();
        });
    }

    Effect.HScrollToElement(rtw); //move opened rtw into view

    ele.rtw_button.hide();
    ele.details.setStyle({width: '260px'});
    ele.alter.setStyle({width: '260px'});
    ele.rtw.addClassName('open');

    ele.rtw.rotator = new Gucci.Rotator({
      wrapperElement: ele.showroom,
      imagesObj: gucci.Data.looks[ids.look_id]['images']
    });
        
    /*if (!ele.showroom.down('.zoomer-360').hasClassName('model'))
      ele.showroom.down('.zoomer-360').addClassName('model');*/


    RTW.setInitialModelThumb(ele.rtw, function(rtw) {
      rtw.setKey('expand_active', false);
      rtw.setKey('modelSelected', true);              // is model thumb selected?
    });

    ele.rtw.setKey('openCount', ele.rtw.getKey('openCount') + 1);
    
    // it is expanded after all animaions ...
    ele.rtw.setKey('expanded', true);
    }
  });
  
  RTW.registerThumbnailAndListItemEventsForRtw(rtw);
};


/*
Property: collapse
  Hides all neccessary elements such as Variation panel, rotator or zoomer, and then executes excuteCollapse

Parameter:
  rtw - DOMElement - div.rtw

See Also:
  <expand>
*/
RTW.collapse = function(rtw) {
	var RTWObj = this.getLookElements(rtw);
	if (RTWObj.rtw.isBusy() || RTWObj.rtw.getKey('showDisplayGroup_active')) return;
	
	RTW._variationPanels[RTWObj.rtw.id].closeVariations({
	  afterFinish: function() {
    	if (RTWObj.rtw.rotator) RTWObj.rtw.rotator.destroy();
    	if (RTWObj.rtw.zoomer && RTWObj.rtw.zoomer.active) 
    		RTWObj.rtw.zoomer.zoomOutAndDestroy({
    			afterDestroy: function(){ RTW.executeCollapse(rtw) }.bind(this)
    		});
    	else
    		RTW.executeCollapse(rtw);
    }.bind(this) });
};

/*
Property: executeCollapse
	Collapses a specific div.rtw element (from three 260px block to one)

Parameter:
  rtw - DOMElement - div.rtw

See Also:
  <collapse>
*/

RTW.executeCollapse = function(rtw){
	var RTWObj = this.getLookElements(rtw);

	if (!rtw.getKey('modelSelected')) {
		this.showDefaultFullImage(RTWObj);
	}
	
	RTWObj.details.setStyle({width: '259px'});
	RTWObj.alter.setStyle({width: '259px'});
	new Effect.Parallel([
		new Effect.Morph(RTWObj.alter, { style: {width: '0px'}, sync: true  }),
		new Effect.Morph(RTWObj.details, { style: {width: '0px', left: '260px'}, sync: true  }),
		new Effect.Morph(RTWObj.rtw.down("div.container"), { style: {width: '260px'}, sync: true  }),
		new Effect.Morph(RTWObj.rtw, { style: {width: '260px'}, sync: true  })    
		].concat(Gucci.scaleLayout(-520)), {
			duration: 1.0,
			transition: Gucci.cubic,
			afterFinish: function() {
				RTWObj.rtw.removeClassName('open');
				if (!rtw.getKey('modelSelected')) // If the model view is enabled on closing, we will not re-initialize RTW in order to keep model rotation intact
			    this.reInitRtw(RTWObj);
				  
				RTW.loadVisibleLookImages(); // as a saveguard if images did float in from right...
				RTWObj.model_thumb.setStyle({marginLeft: ''});
				RTWObj.rtw_button.setStyle({opacity: 1});
				RTWObj.showroom.setStyle({ cursor: 'pointer' });

				RTWObj.rtw.setKey('expanded', false);

			}.bind(this)
	});
};

RTW.renderLookTemplates = function(look, onComplete, onCompleteArguments) {
  if (look._templatesRendered) {
    onComplete(onCompleteArguments.rtw, onCompleteArguments.fromDeepLink, look);
    return;
  }

  var details = $('details_'+look.look_id);
  setTimeout( function() {
    details.update(
      gucci.Partials.renderTemplate(look.templates.look_description_template, look)
    );
    $('personal_shopper_form_'+look.look_id).update(
      gucci.Partials.renderTemplate(look.templates.personalshopper_template || look.templates.personalshopper_form_template, look)
    );
    onComplete(onCompleteArguments.rtw, onCompleteArguments.fromDeepLink, look);
  }, 1);
  look._templatesRendered = true;
};

/*
Property: reInitRtw
  Concept: div.rtw shouldn't rememeber states, manipulated dom (and some other stuff) after collapsing it
  -> "ctrl-z" for rtw

Parameter:
  ele - Array - DOMElement - [div.rtw, div.showroom, ...]

See Also:
  <collapse>
*/
RTW.reInitRtw = function(ele) {
 var activeDisplayGroup = ele.rtw.getKey('activeDisplayGroup');
 var activeFullImage = ele.getactive_full_image(); //  ele.rtw.getKey('activeFullImage');

 ele.details_for_product.hide();
 ele.details_for_product.setStyle({opacity: 0});
 ele.collection_overview.show();
 ele.collection_overview.setStyle({opacity: 1});
 ele.collection_overview.relativize();
 
 var rotatorContainer = ele.showroom.down('.zoomer-360');
 if (rotatorContainer) {
   rotatorContainer.hide();
 }
 
 var ids = this.getIds(activeDisplayGroup);
 var look = gucci.Data.looks[ids.look_id];

 var modelImageUrl = look.images.full360[0] || look.images.full;
 var anim=false;
 var full_image_wrapper=ele.getfull_image_wrapper();

 if (modelImageUrl!=activeFullImage.src) {
   anim=true;
   for (i=0;i<full_image_wrapper.childNodes.length; i++) {
     full_image_wrapper.childNodes[i].hide();
   }
   //activeFullImage.setStyle({opacity: '0'});
   //full_image_wrapper.down('img.default_image').setStyle({opacity: '0'});   
 } else {
   activeFullImage.setStyle({opacity: '', display: ''});
 }

 activeDisplayGroup.setStyle({marginLeft: ''});
 ele.model_thumb.setStyle({marginLeft: ''});

 Loader.load(modelImageUrl, { onComplete: function() {
   if (full_image_wrapper.down('img.default_image'))
     full_image_wrapper.down('img.default_image').remove();
   activeFullImage.src = modelImageUrl;
   activeFullImage.addClassName('full');
   if (anim) {
     activeFullImage.setStyle({width: '260px', left: '0px', opacity: '0.01', cursor: '', display: 'none'});
     new Effect.Opacity(activeFullImage, {from: 0.01, to: 1, duration: 1.2,
       beforeStart: function () {
         activeFullImage.show();
       }, 
       afterFinish: function () {
           full_image_wrapper.setStyle({position: 'relative', width: '260px', height: ''});
           RTW.loadVisibleLookImages(); // as a saveguard if images did float in from right...
       }});
   }
   RTW.setDefaultValues(ele.rtw);
 }.bind(this)});
 
 // reset selected style
 Object.keys(look.displayGroups).each(function (key) {
   RTW._activeStyleForDisplayGroup.set(key,null); 
   displayGroupInfo=RTW._DOMIdToDisplayGroup.get(RTW.getThumbIdFromDisplayGroupId(key));
   displayGroupInfo.currentProduct=look.displayGroups[key].leadStyle;
   displayGroupInfo.currentStyle=look.displayGroups[key].leadStyle.style_number;
   displayGroupInfo.currentThumbIndex=0;
   });
};

/*
Property: getVisibleRtws
  Find RTWs which are currently in the viewport
*/
RTW.getVisibleRtws = function() {
  var visibles = [];
  var w = Position.getPageSize().window.width;
  var rtws = this.rtws;
  for (var i = 0; i < rtws.length; i++) {
    var rtw = rtws[i];
    var x = Position.page(rtw)[0];
    if (x >= 0 && x < w) {
      visibles.push(rtw);
    } else {
      if ( (x + 780) >= 0 && (x + 780) < w ) {
        visibles.push(rtw);
      }
    }
  }
  return visibles;
};

/*
Property: setInitialModelThumb
  When <expand>ing the div.rtw the model_thumb behaves
  different (opacity fades out) than in an still opened div.rtw (thumb fades out of mask).

Parameters:
  rtw - DOMElement - div.rtw
  alfterFinish - Function - setInitialModelThumb triggers this function in afterFinish of the model_thumb effect.
*/
RTW.setInitialModelThumb = function(rtw, afterFinish) {
  var ele = this.getLookElements(rtw);
  new Effect.Opacity(ele.model_thumb, {
    duration: 1.2,
    delay: 0.5,
    from: 1,
    to: 0,
    afterFinish: function(effect) {
      effect.element.setStyle({
        marginLeft: ele.model_thumb.getWidth() + 'px',
        opacity: 1
      });
      afterFinish(ele.rtw);
      ele.rtw.setKey('activeDisplayGroup', ele.model_thumb);
    }
  });
};

RTW.showDefaultFullImage = function(ele) {
  var activeFullImage = ele.getactive_full_image(); // rtw.getKey('activeFullImage');
  if (!ele.rtw.down('img.default_image')) {
    var defaultImage = new Element('img', {
      src: ele.rtw.getKey('defaultFullImageSrc'),
      className: 'default_image full'
    }).setStyle({
      opacity: 0,
      marginLeft: -260 + 'px'
    });
    var full_image_wrapper=ele.getfull_image_wrapper();
    full_image_wrapper.insert(defaultImage);
  } else {
    var defaultImage = ele.rtw.down('img.default_image');
  }
  Effect.Crossfade(activeFullImage, defaultImage);
};


RTW.openPersonalShopper = function(link) {
  var ele = this.getLookElements(link);
  var activeDetails = ele.rtw.getKey('activeDetails');
  
  if (ele.rtw.down('div.variants')) {
    new Effect.Parallel(Gucci.scaleLayout(-ele.rtw.down('div.variants').offsetWidth), {
      transition: Gucci.cubic,
      duration: 1.7,
      queue: Shop.queueLast
    }); 
  }
  RTW._variationPanels[ele.rtw.id].closeVariations();

  if (ele.rtw.zoomer) {
    ele.rtw.zoomer.zoomOutAndPause();
  }
  [ele.showroom, ele.details, ele.personal_shopper_form].invoke('setStyle', { zIndex: 2 });

  var rotatorContainer = ele.showroom.down('.zoomer-360');
  new Effect.Fade(activeDetails, {
    duration: Engine.isMSIE6 ? 0 : 0.7,
    delay: 0.15,
    afterFinish: function() {
      new Effect.Parallel([
        new Effect.Morph(ele.showroom, {style: {marginLeft: '-260px'}, sync: true}),
        new Effect.Morph(ele.details, {style: {left: '260px'}, sync: true}),
        new Effect.Morph(ele.personal_shopper_form, {style: {left: '520px'}, sync: true})
      ], {
        transition: Gucci.cubic,
        duration: Engine.isMSIE6 ? 0 : 0.8,
        beforeStart: function() {
          var context = ele.rtw.getKey('currentDisplayGroup') || ele.rtw.getKey('currentLook');
          var template = context.templates.personalshopper_template;
          var shopperTemplate = gucci.Partials.renderTemplate(template, context);
          ele.personal_shopper_form.update(shopperTemplate);
          var details = ele.getCurrentDetail();
          if (details.down('div.personal_shopper_container'))
            details.down('div.personal_shopper_container').hide();
        },
        afterFinish: function() {
          ele.personal_shopper_form.down('div.content').appear({delay: 0.1, duration: 0.6});
          if (ele.rtw.getKey('modelSelected')) {
            ele.personal_shopper_collection.appear({delay: 0.1, duration: Engine.isMSIE6 ? 0 : 0.6,
              beforeStart: function() {
                if (ele.personal_shopper_collection.down('ul.styles').offsetHeight < 350) $(ele.rtw.id+'_styles_scrollbar_ps').hide();
              },
              afterFinish: function() {
                RTW.activateScrollPanel($('rtw_'+ele.look_id+'_styles_ps'), $('rtw_'+ele.look_id+'_styles_scrollbar_ps'));
              }
            });
          } else {
            RTW.togglePersonalShopperView(ele);
            activeDetails.appear({
              delay: 0.1, duration: Engine.isMSIE6 ? 0 : 0.6,
              beforeStart: function() {
                if (ele.personal_shopper_collection.down('ul.styles').offsetHeight < 350) $(ele.rtw.id+'_styles_scrollbar_ps').hide();
              },
              afterFinish: function() {
                RTW.activateScrollPanel($('rtw_'+ele.look_id+'_styles_ps'), $('rtw_'+ele.look_id+'_styles_scrollbar_ps'));
              }
            });
          }
        }
      });
    }
  });
  currentSku = ele.rtw.getKey('currentSku');
  if (!currentSku && ele.rtw.getKey('currentProduct').skus)
    currentSku = (ele.rtw.getKey('currentProduct').skus.length>0) ? ele.rtw.getKey('currentProduct').skus[0] : null;
};

RTW.closePersonalShopper = function(link) {
  var ele = this.getLookElements(link);
  var activeDetails = ele.rtw.getKey('activeDetails');
  activeDetails.fade({ duration: Engine.isMSIE6 ? 0 : 0.7 });

  var effects = [
    new Effect.Morph(ele.showroom, {style: {marginLeft: '0px'}, sync: true}),
    new Effect.Morph(ele.details, {style: {left: '520px'}, sync: true}),
    new Effect.Morph(ele.personal_shopper_form, {style: {left: '780px'}, sync: true})
  ];

  if (!Prototype.Browser.IE) effects.push(new Effect.Fade(ele.personal_shopper_collection, { sync: true }));

  new Effect.Parallel(effects, {
    duration: 0.8,
    transition: Gucci.cubic,
    afterUpdate: function() {
      if (!Prototype.Browser.IE)
        ele.details.setStyle({ marginLeft: 10*this.position + 'px' });
    },
    beforeStart: function() {
      if (ele.personal_shopper_collection.visible()) {
        if (Prototype.Browser.IE) {
          ele.personal_shopper_collection.hide();
        }
      }
    },
    afterFinish: function() {
      if (!ele.rtw.getKey('modelSelected')) {
        RTW.togglePersonalShopperView(ele);
      }
      activeDetails.appear({ delay: 0.3, duration: Engine.isMSIE6 ? 0 : 0.7,
        beforeStart: function() {
          var details = ele.getCurrentDetail();
          if (details.down('div.personal_shopper_container'))
            details.down('div.personal_shopper_container').show();
          if (Engine.isMSIE7 && ele.personal_shopper_collection)
            ele.personal_shopper_collection.down('div.personal_shopper').hide();
        },
        afterFinish: function() {
          if (ele.rtw.zoomer) {
            ele.rtw.zoomer.unpause();
          }
          RTW._variationPanels[ele.rtw.id].prepareAndOpenVariations(ele.rtw.getKey("activeDisplayGroup").id);
        
          RTW.activateScrollPanel($('rtw_'+ele.look_id+'_styles'), $('rtw_'+ele.look_id+'_styles_scrollbar'));
          }
        });
      }
    });

  [ele.showroom, ele.details, ele.personal_shopper_form].invoke('setStyle', { zIndex: 1 });
};

//modifies product details for personal shopper, and reverts this changes after closing personal shopper
RTW.togglePersonalShopperView = function(ele) {
  ele.rtw.setKey('personalShopper', !ele.rtw.getKey('personalShopper'));
  var details = ele.getCurrentDetail();
  var sizes_select = details.down('select.sizes-select');
  if (ele.rtw.getKey('personalShopper')) {
    details.down('div.personal_shopper_title').update(Gucci.getTerm('consult a personal shopper')).show();
    details.down('ul.functions').hide();
    if (sizes_select) {
      sizes_select.hide();
      if (details.down('a.size-guide-link'))
	      details.down('a.size-guide-link').hide();
      details.down('div.size_selected').show();
    }
    details.down('div.show_on_sizeselect').hide();
    details.getElementsBySelector('option').each(function(item){
      item.hide();
    });
  } else {
    details.down('div.personal_shopper_title').hide();
    details.down('ul.functions').show();
    if (sizes_select) {
      sizes_select.show();
      if (details.down('a.size-guide-link'))
        details.down('a.size-guide-link').show();
      details.down('div.size_selected').hide();
    }
    details.down('div.show_on_sizeselect').show();
    details.getElementsBySelector('option').each(function(item){
      item.show();
    });
  }
};

RTW.selectAllCheckboxes = function(link) {
  var rtw = this.getRtwElement(link);
  link.hide();
  link.next().show();
  this.setAllCheckboxes(rtw, true);
};

RTW.unselectAllCheckboxes = function(link) {
  var rtw = this.getRtwElement(link);
  link.hide();
  link.previous().show();
  this.setAllCheckboxes(rtw, false);
};

RTW.setAllCheckboxes = function(rtw, state) { //state can be: true, false
  rtw.select('div#'+rtw.id+'_styles_ps ul.styles li input[type="checkbox"]').each(function(checkbox) {
    checkbox.checked = state;
  });
};

RTW.close = function(link) {
  var rtw = this.getRtwElement(link);
  RTW.collapse(rtw);
};

RTW.requestDisplayGroup = function(thumbnail, fromDeepLink) {
  var ids = this.getIds(thumbnail);
  var ele = this.getLookElements(thumbnail);

  if (ele.rtw.getKey('expand_active')) {
    if (fromDeepLink) {
      setTimeout(function() {
        RTW.requestDisplayGroup(thumbnail, fromDeepLink);
      }, 200);
    }
    return;
  }

  if (ele.rtw.getKey('showDisplayGroup_active')) return;
  ele.rtw.setKey('showDisplayGroup_active', true);
	
  if (ele.rtw.zoomer) {
    ele.rtw.zoomer.zoomOutAndDestroy();
    /*var deleteme = ele.showroom.down('div.zoomer-360');
    if (deleteme) {
      deleteme.remove();
    }*/
    var full_image_wrapper=ele.getfull_image_wrapper();
    full_image_wrapper.morph({width: '260px' }, {
      transition: Gucci.cubic
    });
  }
 
  if (thumbnail.hasClassName('model')) {
    this.showDisplayGroup(thumbnail);
  } else {
    RTW._requestingEle = ele;
    var options = Object.clone(ids);
    options.fromDeepLink = fromDeepLink;
    options.onDataUpdated = this.afterRequestDisplayGroup;
    this.getDetailsForProduct(options);
  }
};

RTW.afterRequestDisplayGroup = function(displayGroup, fromDeepLink) {
  if (RTW._requestingEle) {
    var currentStyle=null;
    var currentIndex=0;

    // do we have a variation selected or do we use the ? 
    if (fromDeepLink && RTW.deepLinkVariation)  
        currentStyle=RTW.deepLinkVariation;
    else 
        currentStyle=RTW._activeStyleForDisplayGroup.get(displayGroup.displayGroup_id);

  	var currentProduct = null; 
  	if (currentStyle) {
  	   currentProduct = displayGroup.getProduct(currentStyle);
  	   if (displayGroup.variations.length>1) {
  	      currentIndex= displayGroup.variations.indexOf(currentProduct);
	     }
    }
    currentProduct = currentProduct || displayGroup.leadStyle;
    displayGroupInfo=RTW._DOMIdToDisplayGroup.get(RTW.getThumbIdFromDisplayGroupId(displayGroup.displayGroup_id));
    displayGroupInfo.currentStyle = currentProduct.style_number;
    displayGroupInfo.currentProduct = currentProduct;
    displayGroupInfo.currentThumbIndex = currentIndex;
  }
  RTW.showDisplayGroup($('thumbnail_'+displayGroup._parent.look_id+'_'+displayGroup.displayGroup_id), fromDeepLink);    
};

RTW.showDisplayGroup = function(thumbnail, fromDeepLink) {
  var ele = this.getLookElements(thumbnail);
  var ids = this.getIds(thumbnail);
  
  //states
  var activeProduct = ele.rtw.getKey('activeDisplayGroup');
  var activeFullImage = ele.getactive_full_image(); // ele.rtw.getKey('activeFullImage');
  var displayGroup = RTW.getDisplayGroupFromThumbId(thumbnail.id);
  var displayGroupInfo = RTW._DOMIdToDisplayGroup.get(thumbnail.id);
  var currentProduct = displayGroupInfo ? displayGroupInfo.currentProduct : null;
	
  //set state
  ele.rtw.setKey('modelSelected', thumbnail.hasClassName('model'));
  ele.rtw.setKey('currentSku', null); 

  var newFullImage = new Element('img');
  var look = gucci.Data.looks[parseInt(ids.look_id,10)];

  if (ele.rtw.rotator) ele.rtw.rotator.destroy();
   
  //console.log(ele.rtw.getKey('modelSelected'))

  if(ele.rtw.getKey('modelSelected')) {
    var newFullImageSouce = look.images.full360[0] || look.images.full;
  } else {
    var displayGroup = look.displayGroups[ids.displayGroup_id];
    var newFullImageSouce = currentProduct.images.full;

    var thumbnail = $('thumbnail_'+look.look_id+'_'+ids.displayGroup_id);

    if (thumbnail.src!=currentProduct.images.panel_thumb) { // in case of a deep link
      thumbnail=this.changeThumbnail(thumbnail);    
      //thumbnail.src = currentProduct.images.panel_thumb;
    };
    
    var availability = null;
    if (currentProduct.skus.length < 2)
    	availability = (currentProduct.skus.length>0) ? currentProduct.skus[0].status : Shop._defaultAvail;
    

	if (typeof CmCustom != 'undefined') {
		(function() { 
			CmCustom.productView(currentProduct.style_number);
		}).defer();
	}
  }

  var slideInFx;
  var full_image_wrapper=ele.getfull_image_wrapper();
  
  var sizeGuide = ele.details.down('div.size-guide');
  if (sizeGuide && ele.details_for_product.getStyle('left') == '-260px') {
	ele.personal_shopper_form.show();
	ele.details_for_product.setStyle({left: '0px',display: 'none'});
	ele.details_for_product.setStyle({overflow: 'hidden'});
  }

  if (!Engine.isMSIE7) {
    slideInFx = [
      new Effect.Morph(activeProduct, { style: { marginLeft: 0 + 'px' }, sync: true }),
      new Effect.Morph(full_image_wrapper, { style: { marginLeft: -activeFullImage.getWidth() + 'px' }, sync: true })
    ];
  }
  else {
    slideInFx = [
      new Effect.Morph(activeProduct, { style: { marginLeft: 0 + 'px' }, sync: true }),
      new Effect.Morph(full_image_wrapper, { style: { width: 0 + 'px' }, sync: true }),
      new Effect.Morph(activeFullImage, { style: { marginLeft: '-260px' }, sync: true })
    ];
  }

  var unavail = full_image_wrapper.down('div.product-image-unavailable');
  if (unavail) unavail.remove();

  new Effect.Parallel(slideInFx, {
    duration: 1.1,
    transition: Gucci.cubic,
	beforeStart: function(){
		// If the next selected product has only one variation hide the variation panel in advance
		if(displayGroup && displayGroup.variations.length <= 1) {
			RTW._variationPanels[ele.rtw.id].closeVariations();
		}
	},
    afterFinish: function() {
      activeFullImage.setOpacity(0);
      if (Engine.isMSIE7) newFullImage.setStyle({ marginLeft: '-260px' });
      Loader.load(newFullImageSouce, { onComplete: function() {
        activeFullImage.remove();
        newFullImage.src = (newFullImageSouce == '' || !newFullImageSouce) ? Shop.FULL_PHOTO_UNAVAILABLE_URL : newFullImageSouce;

        full_image_wrapper.insert(newFullImage);
        
        if (newFullImageSouce == '' || !newFullImageSouce)
          full_image_wrapper.insert('<div  class="product-image-unavailable">' + Gucci.getTerm('photo unavailable') + '</div>');          

        var slideOutFx;
        if (!Engine.isMSIE7) {
          slideOutFx = [
            new Effect.Morph(thumbnail, { style: { marginLeft: thumbnail.getWidth() + 'px' }, sync: true }),
            new Effect.Morph(full_image_wrapper, { style: { marginLeft: 0 + 'px' }, sync: true })
          ];
        }
        else {
          slideOutFx = [
            new Effect.Morph(thumbnail, { style: { marginLeft: thumbnail.getWidth() + 'px' }, sync: true }),
            new Effect.Morph(full_image_wrapper, { style: { width: 260 + 'px' }, sync: true }),
            new Effect.Morph(newFullImage, { style: { marginLeft: 0 + 'px' }, sync: true })
          ];
        }

        new Effect.Parallel(slideOutFx, {
          duration: 1.1,
          transition: Gucci.cubic,
          beforeStart: function(){
            RTW.initZoomer(ele, displayGroup, currentProduct);
            if (ele.rtw.getKey('modelSelected') && look['images'].full360) {
              ele.rtw.rotator = new Gucci.Rotator({
                          wrapperElement: ele.showroom,
                          imgElement: full_image_wrapper.down('img'),
                          imagesObj: look['images']
                        });
            };
            ele.rtw.setKey('showDisplayGroup_active', false);
          }
        });
      }});
    }
  });

  if (ele.rtw.getKey('modelSelected')) {

    ele.details_for_product.absolutize();
    ele.collection_overview.setStyle({
      position: 'absolute',
      opacity: 0,
      display: 'block',
      zoom: 1
    });

	if (Engine.isMSIE) {
    	var crossfadeFx = [
	      new Effect.Opacity(ele.details_for_product, { from: 1, to: 0, sync: true }),
	      new Effect.Opacity(ele.collection_overview, { from: 0, to: 0.999, sync: true })
	    ];
	}
	else {
		var crossfadeFx = [
	      new Effect.Opacity(ele.details_for_product, { from: 1, to: 0, sync: true }),
	      new Effect.Opacity(ele.collection_overview, { from: 0, to: 1, sync: true })
	    ];
	}
    new Effect.Parallel(crossfadeFx, {
      duration: Engine.isMSIE6 ? 0 : 0.5,
      beforeStart: function() {
        if (Engine.isMSIE6)
          ele.getCurrentDetail().down('select.sizes-select').hide();
      },
      afterFinish: function() {
        ele.details_for_product.hide();
        ele.collection_overview.relativize();
    }});

    ele.rtw.setKey('activeDetails', ele.collection_overview);
  } else {

    ele.collection_overview.absolutize();
    ele.details_for_product.absolutize();

    if (ele.collection_overview.getOpacity() > 0.001) {
      new Effect.Opacity(ele.collection_overview, {
        from:1,
        to:0,
        duration: Engine.isMSIE6 ? 0 : 0.5,
        transition: Gucci.cubic,
        afterFinish: function() {
          ele.collection_overview.hide();
        }
      });
    }

    new Effect.Opacity(ele.details_for_product, {
      from: 1,
      to: 0,
      transition: Gucci.cubic,
      duration: Engine.isMSIE6 ? 0 : 0.55,
      beforeStart: function(effect) {
		RTW._variationPanels[ele.rtw.id].clearVariations();
        if (Engine.isMSIE6) {
          var dropdown = $(effect.element.id).down('.sizes-select');
          if (dropdown) dropdown.hide();
        }
      },
      afterFinish: function() {
        //HACK: klemens: "fix" html for Zoomer
        ele.details.setStyle({left:'520px', position: 'absolute'});
        full_image_wrapper.setStyle({position:'relative',width:'260px',height:'504px'});

        ele.details_for_product.show();
        ele.details_for_product.relativize();

        RTW.renderDetailTemplate(displayGroup);

        var displayGroupInfo = RTW._DOMIdToDisplayGroup.get(thumbnail.id); 
        var productDetail = ele.getCurrentDetail() || ele.details_for_product; 
        var sizes_select = null; 
      
        if ((currentProduct.skus.length==0)) { // if skus are disabled 
          RTW.removeSizeTemplate(ele);
        } else {
          sizes_select = productDetail.down('.sizes-select');
        }
        
        productDetail.show();

        RTW._activeStyleForDisplayGroup.set(displayGroup.displayGroup_id,displayGroupInfo.currentStyle);
        new Effect.Opacity(ele.details_for_product, {
          from: 0, to: 1, duration: Engine.isMSIE6 ? 0 : 0.55, transition: Gucci.cubic,
        beforeStart: function() {
		  RTW.checkScrolling(productDetail);
          if (productDetail.down('div.personal_shopper_container'))
            productDetail.down('div.personal_shopper_container').hide(); 
          },
        afterFinish: function() {
            RTW._variationPanels[ele.rtw.id].prepareAndOpenVariations(thumbnail.id);
          }    
        });
        if (sizes_select && (currentProduct.skus.length>1)) {
				for(var j=1; j < sizes_select.options.length; j++){
			  	      var size = sizes_select.options[j].value;
			  				var availtemp = currentProduct.skus[j-1].status;
			  	       		if(!availtemp || availtemp=="" || availtemp=="unavailable")
			  	        		RTW.disableOption(sizes_select, j);
			  	       		else
			  	          		RTW.enableOption(sizes_select, j);
			  	}
          sizes_select.observe('change', function(event) {
            RTW.onSizeUpdate(ele, ids, event);
          });
        }
        else {
          ele.rtw.setKey('currentSku',currentProduct.skus.first());
          var availability = RTW.getAvailabilityInformation(currentProduct.skus.first());
          var showElement = productDetail.down('.show_on_sizeselect');
          RTW.updateAvailablityInformation(showElement, availability);
        }
        if (fromDeepLink) {
          RTW.gotoDeepLinkSku(ele.rtw);
        }
      }
    });
    ele.rtw.setKey('activeDetails', ele.details_for_product);
  }
  ele.rtw.setKey('activeDisplayGroup', thumbnail);
  //ele.rtw.setKey('activeFullImage', newFullImage);

  if (displayGroup) {
    ele.rtw.setKey('currentDisplayGroup', displayGroup);
    ele.rtw.setKey('currentProduct', currentProduct);
  } else {
    ele.rtw.setKey('currentDisplayGroup', false);
    ele.rtw.setKey('currentProduct', false);
    RTW._variationPanels[ele.rtw.id].closeVariations();
  }

  
  RTW.setDeepLink(ele.rtw);
};

RTW.disableOption = function(theSelect, j) {
  theSelect.options[j].disabled = true;
  theSelect.options[j].style.color = "Gainsboro";
};

RTW.enableOption = function(theSelect, j) {
  theSelect.options[j].disabled = false;
  theSelect.options[j].style.color = "#000000";
};

RTW.initZoomer = function(ele, displayGroup, variation) {
  if (!displayGroup) return;
  
  if (ele.rtw.zoomer)
    ele.rtw.zoomer.destroy();
    
  var newStyle=variation || displayGroup.leadStyle; 
  if(!(newStyle.images.zoom) ) return;
  if((newStyle.images.zoom.size && newStyle.images.zoom.size()==0)) return;
  
  // We'll use a separate Rotator class for rotation
  ele.rtw.rotator = new Gucci.Rotator({
    wrapperElement: ele.showroom,
    imagesObj: newStyle.images
  });

  //set Zoomer
  ele.rtw.zoomer = new Gucci.Zoomer(
    ele.showroom,
    ele.showroom.down('img'),
    new Date().getTime(),
    newStyle.images.zoom, 
	{
		rotator: ele.rtw.rotator
	}
  );

  //ele.rtw.zoomer.setViews(newStyle.images); //left 360
  ele.showroom.down('.full_image_wrapper img').setStyle({
    position: 'relative'
  });
};

RTW.onSizeUpdate = function(ele, ids, event) {
  //update size

  var formSelect = event.target;

  //handle IE and other browsers that don't respect option disabled
  //this is cloned from shop.selectSize
  if($(formSelect.selectedIndex)==0 || (formSelect.options[$(formSelect.selectedIndex)].disabled && (!Engine.isKHTML || Engine.isWebKit3))) {
    formSelect.selectedIndex = formSelect.oldSelectedIndex;
    return;
  }
  formSelect.oldSelectedIndex = formSelect.selectedIndex;

  var detail = ele.getCurrentDetail();
  ele.rtw.setKey('currentSku', ele.rtw.getKey('currentProduct').getSku(formSelect.value));
  

  RTW.setDeepLink(ele.rtw);

  var availability = RTW.getAvailabilityInformation(ele.rtw.getKey('currentSku'));
  
  detail.down("div.size_selected").update(formSelect.options[formSelect.selectedIndex].text);

  var showElements = detail.down('.show_on_sizeselect');
  var hideElements = detail.down('.hide_on_sizeselect');

  showElements.down('div.checkout').hide();
  showElements.down('p.availability').update(availability.info);
  showElements.down('div.addtobag').removeClassName('busy').setStyle({ height: '24px' })[availability.addtobag ? 'show' : 'hide']().down('.content').update(Gucci.getTerm('add to bag'));
  showElements.down('div.backorder').removeClassName('busy').setStyle({ height: '24px' })[availability.backorder ? 'show' : 'hide']().down('.content').update(Gucci.getTerm('register for wait list'));
  showElements.next('div.personal_shopper_container')[availability.shopper ? 'show' : 'hide']();

  if (showElements.visible() || !hideElements.visible()) return;

  //trigger effects
  var effects = [];
  effects.push(new Effect.Opacity(showElements, {
    from: 0, to: 1,
    beforeStart: function() { showElements.setOpacity(0).show(); },
      sync: true
  }));
  effects.push(new Effect.Opacity(hideElements, {
    from: 1, to: 0,
    afterFinish: function() {
      hideElements.hide();
      detail.down('div.show_on_sizeselect').setStyle({marginTop: '0'});
    },
    sync: true
  }));
  new Effect.Parallel(effects, { duration: Engine.isMSIE6 ? 0 : 1 });
  
};

RTW.getDetailsForProduct = function(options) {
  gucci.Data.looks[options.look_id].displayGroups[options.displayGroup_id].getDetails(options.onDataUpdated, options.fromDeepLink);
};

RTW.renderDetailTemplate = function(displayGroup) {
  var detailsTemplate = gucci.Partials.renderTemplate(displayGroup.templates.displaygroup_template, displayGroup);
  $('details_for_product_' + displayGroup._parent.look_id).update(detailsTemplate);
};

RTW.print = function(link) {
  var ele = this.getLookElements(link);
  if (!ele.rtw.getKey('currentProduct')) {
    return;
  } else {
    RTW.printItems = ele.rtw.getKey('currentProduct');
  }
  var url = "/" + Cookie.get('site') + "/templates/print_rtw.html";
  RTW.printWindow = window.open(url,'printStyle', 'height=515,width=820,location=no,menubar=no');
};

RTW.printCallback = function() {
  var w = RTW.printWindow;
  var d = w.document.getElementById("mainDescription");
  d.innerHTML = this.printItems.text.grpdesc;
  d = w.document.getElementById("productShot");
  d.src = this.printItems.images.full;
  var variations = this.printItems.variations;
  d = w.document.getElementById("variationDescription0");
  d.innerHTML = this.printItems.text.vardesc;
  d = w.document.getElementById("style0");
  d.innerHTML = this.printItems.style_number;
  d = w.document.getElementById("price0");
  var p = this.printItems.priceNum;
  if (p) {
    d.innerHTML = new Template(Gucci.getTerm('price-template')).evaluate({price:p});
  } else {
    d.innerHTML = "";
  }
  d = w.document.getElementById("group0");
  d.style.display = "block";
};

RTW.goToNextItem = function(look_id, displayGroup_id) {
  var nextThumbnail = $('thumbnail_'+look_id+'_'+displayGroup_id).up().next('div.displaygroup');
  if(nextThumbnail) {
    nextThumbnail = nextThumbnail.down();
  } else {
    nextThumbnail = $('thumbnail_'+look_id+'_'+displayGroup_id).up(1).down().next().down();
  }
  this.requestDisplayGroup(nextThumbnail);
};

RTW.showSizeGuide = function(link) {
  var ele = this.getLookElements(link);
  ele.details_for_product.setStyle({overflow: ''});
  ele.personal_shopper_form.hide();
  new Effect.Morph( ele.details_for_product ,{
    duration:0.7,
    transition:Gucci.cubic,
    style: {left: '-260px'}
  });
};

RTW.hideSizeGuide = function(link) {
  var ele = this.getLookElements(link);
  ele.personal_shopper_form.show();
  new Effect.Morph( ele.details_for_product ,{
    duration:0.7,
    transition:Gucci.cubic,
    style: {left: '0px'},
    afterFinish: function (){
      ele.details_for_product.setStyle({overflow: 'hidden'});
    }
  });
};

RTW.addToMinibag = function(trigger) {
  var ele = this.getLookElements(trigger);
  if (ele.rtw.isBusy()) return;
  ele.rtw.setBusy();

  trigger.addClassName('busy');
  trigger.setStyle('height: 13px;');

  var callbacks = {
    onSuccess: RTW.addToBagSuccessful,
    onFailure: RTW.addToBagFailure,
    args: {element: ele, sizepanel: trigger.up(), trigger: trigger}
  };

  gucci.Minibag.addProduct(ele.rtw.getKey('currentSku') || ele.rtw.getKey('currentProduct').skus.first(), callbacks);
 
};

RTW.submitBackorder = function(trigger) {
  RTW.addToMinibag(trigger);
};

RTW.addToBagSuccessful = function(args, sku) {
  var ele = args.element;
  var c =   args.sizepanel;
  var trigger = args.trigger;
  RTW.addToBagEffect(ele, sku);

  //var activeStyle = Shop.lightboxToActiveStyle.get(lightbox.id);
  //var c = lightbox.down('div#details_' + lightbox.id + '_' + activeStyle +' div.configuration-info');
  //var c = ele.getCurrentDetail().down('div.show_on_sizeselect');

  var term = sku.status == "backorder" ? Gucci.getTerm('waitlistitem added') : Gucci.getTerm('item added');
  c.down('p.availability').update(term);
  c.down('div.addtobag').hide();
  c.down('div.backorder').hide();
  c.down('div.checkout').show().down('div.content').update(Gucci.getTerm('checkout'));
  trigger.removeClassName('busy');
  trigger.setStyle({height: null});

  //TODO klemens
  //c.down('div.checkout').show().down('div.content').update(Gucci.getTerm('checkout'));
  //c.down('p.info').hide();

  ele.rtw.setIdle();

  //instead of picking the added product out of the cookies, just initialize the Minibag again.
  //-> lot easier and straight forward
  gucci.Minibag.initialize();
};

RTW.hideAvailabilityInformation = function(availContainer) {
  if (!availContainer) {
    return;
  }
  availContainer.down('p.availability').update(" ");
  availContainer.down('div.checkout').removeClassName('busy').hide();
  availContainer.down('div.addtobag').removeClassName('busy').hide();
  availContainer.down('div.backorder').removeClassName('busy').hide();
  var shopper = availContainer.down('div.personal_shopper_container') || availContainer.next('div.personal_shopper_container');  
  shopper.hide();
};



RTW.addToBagFailure = function(ele, sku) {
  //TODO klemens
};

RTW.addToBagEffect = function(ele, sku) {
  var product = sku._parent;
  //Use "image unavailable"-image as fallback
  var miniThumbURL = product.images.miniThumb || Shop.MINI_THUMB_PHOTO_UNAVAILABLE_URL;
  //if the sku status is 'backorder' its for waitlist.
  var container = $((sku.status == 'backorder' ? 'waitlist' : 'minibag') + '-products');

  /*
  //TODO klemens zoom out!
  if (lightboxObject.zoomer) {
    lightboxObject.zoomer.zoomOut();
    delay = Gucci.Zoomer.ZOOM_OUT_SPEED*1000 + 10;
  }
  */

  var minibagProduct = (
    '<div class="product" onmouseover="this.firstChild.style.visibility = \'visible\';" onmouseout="this.firstChild.style.visibility = \'hidden\';" style="display: none;">'+
      '<a href="#" onclick="Shop.deleteFromMinibag(this); return false" class="remove" style="visibility:hidden">Remove</a>'+
      '<a href="#" onclick="Shop.goToAndOpen(\'/' + Cookie.get('site') + '/' + Cookie.get('language') + '/' + Cookie.get('site') +  product._parent.path + '#' + sku.deep_link + '\'); return false;">'+
        '<img src="' + miniThumbURL + '"/>'+
      '</a>'+
    '</div>'
  );
  container.insert({top: minibagProduct});

  var productDiv = container.down('div.product');
  productDiv.setStyle({
    position: 'relative',
    opacity: 0,
    width: '1px',
    top: '64px'
  }).show();

  //TODO klemens remove loading bar
  //lightbox.down('div.product-image').removeClassName('loading');

  var moveProductInView = function() {
    new Effect.Parallel([
      new Effect.Move(productDiv, { y: -64,  sync: true }),
      new Effect.Opacity(productDiv, { from: 0.1, to: 1.0, sync: true })
    ], {
      transition: Gucci.cubic,
      duration: 1.8,
      beforeSetup: function() {
        productDiv.setOpacity(1);
      },
      afterFinish: function() {
        productDiv.setStyle({
          position: 'static',
          top: 'auto'
        });
      }
    });
  };
  productDiv.sku = sku.sku;
  productDiv.morph({
    width: '45px'
  }, {
    duration: 0.5,
    afterFinish: moveProductInView
  });

  Shop.redrawMinibag();
};

RTW.removeSizeTemplate = function(RTWObj) {
  var productDetail = RTWObj.getCurrentDetail() || ele.details_for_product; 
  var sizes_select = productDetail.down('.sizes-select');

  if (sizes_select) {  
    productDetail.down('div.sizes').remove();
    productDetail.down('div.hide_on_sizeselect').remove();
  }  
}

RTW.selectStyle = function(thumbImg, style_number, options) {
	options = options || {};

	var thumbId = options.thumbId || thumbImg.up('div').id || thumbImg.id;
	var rtw = thumbImg.up('div.rtw');
	
	var displayGroup = RTW.getDisplayGroupFromThumbId(thumbId);
	var displayGroupInfo = RTW._DOMIdToDisplayGroup.get(thumbId);
	var lookId = RTW.getIds(thumbImg).look_id;
	var product = displayGroup.getProduct(style_number);
	
	// Reading the active product style from hash
	var oldDetails = $('details_' + lookId + '_' + RTW._activeStyleForDisplayGroup.get(displayGroup.displayGroup_id));
	if (oldDetails) oldDetails.hide();
	
	var newDetails = $('details_' + lookId + '_' + style_number).show();
	
	// Storing the active product style in the hash
	RTW._activeStyleForDisplayGroup.set(displayGroup.displayGroup_id, style_number);

	var initialSkuWasSet = false;
  
	if (product.skus) {
		if (product.skus.length > 1) {

			var dropdown = newDetails.down('select.sizes-select');

			for(var j=1; j < dropdown.options.length; j++){
				var size = dropdown.options[j].value;

				var availtemp = product.skus[j-1].status;

		       	if(!availtemp || availtemp=="" || availtemp=="unavailable") {
		        	Shop.disableOption(dropdown, j);
		        }
		       	else {
		       		if(availtemp=="possibly unavailable") {
						if(Shop.getPossiblyAvailableShopper()) {
							Shop.enableOption(dropdown, j);
						}
						else {
							Shop.disableOption(dropdown, j);
						}			
					}
		       		else {
		          		Shop.enableOption(dropdown, j);
		          	}
		        }
			}
			if (displayGroupInfo.initialSku) {
				setTimeout(function() {
					dropdown.value = displayGroupInfo.initialSku;
					displayGroupInfo.initialSku = null;
					initialSkuWasSet = true;
					}, 5);
				} else {
					dropdown.selectedIndex = 0;  
				}
				if (oldDetails) {
					this.hideAvailabilityInformation(oldDetails.down('div.show_on_sizeselect'));
				}
				this.hideAvailabilityInformation(newDetails.down('div.show_on_sizeselect'));
			} else {
				var sku = product.skus.first();
				var skudata = sku ? sku.sku : null;

        if (!skudata) 
          RTW.removeSizeTemplate(RTW.getLookElements(rtw));  // if we do not have skus we can't have size selectors.

				this.updateAvailabilityInformationBySku(rtw, displayGroup.displayGroup_id, skudata);

				// capture availability status for hitbox, only record non sized items
				var availstatus;
				var availability = sku;

				if(!availability) {
					availability = Shop.getDefaultAvailability();
				}
				availstatus = availability.status.replace(/\s/g,'_');

				
				if (typeof CmCustom != 'undefined') {
					(function() { 
						CmCustom.productView(style_number);
					}).defer();
				}
		}
	}

  // Updates for new product 
  var ele = RTW.getLookElements(rtw);

  var sizes_select = ele.getCurrentDetail().down('.sizes-select');

  if (sizes_select && (displayGroup.leadStyle.skus.length>0)) {
		for(var j=1; j < sizes_select.options.length; j++){
	    var size = sizes_select.options[j].value;
			var availtemp = displayGroup.leadStyle.skus[j-1].status;
			if(!availtemp || availtemp=="" || availtemp=="unavailable")
			  RTW.disableOption(sizes_select, j);
			else
				RTW.enableOption(sizes_select, j);
		}
    sizes_select.observe('change', function(event) {
      RTW.onSizeUpdate(ele, ids, event);
    });
  }
  else {
    ele.rtw.setKey('currentSku',sku);
  }

  rtw.setKey("currentProduct",product);

	RTW.updateZoomer(rtw, product);
  
	if (!initialSkuWasSet) {
		var ids=product.deep_link.split("-");
		Gucci.setPageFragmentIdentifier({
			panelId: ids[0], 
			displayGroupId: displayGroupInfo.displayGroup_id,
			styleNumber: style_number
		});
	} 
};


RTW.selectSize = function(identifier) {

};

RTW.updateAvailabilityInformationBySku = function(rtw, displayGroup_id, sku) {
	var activeStyle = RTW._activeStyleForDisplayGroup.get(displayGroup_id);
	var displayGroup = gucci.DataHelper.getLookDisplayGroup(displayGroup_id);
	var skuData = displayGroup.getProduct(activeStyle).getSku(sku);
	var availability = RTW.getAvailabilityInformation(skuData);
  var productDetail = $('details_' + displayGroup._parent.look_id + "_" + activeStyle);
	
	if(!availability) {
		availability = RTW.getDefaultAvailability(skuData);
	}
  var showElement = productDetail.down('.show_on_sizeselect');
  RTW.updateAvailablityInformation(showElement, availability);
};

RTW.getDefaultAvailability= function() {
  return RTW.getAvailabilityInformation(Shop.getDefaultAvailability);
}

RTW.getAvailabilityInformation = function(avail) {
  var addtobag  = false;
  var backorder = false;
  var shopper   = true;
  var info      = "";
  
  if (!avail) {
    info = Gucci.getTerm(Shop._defaultAvail);
    shopper = false;
  } else {
    info = avail.info;
    switch (avail.status) {
      case 'available':
        addtobag = true;
        break;

      case 'available soon':
        addtobag = true;
        break;

      case 'backorder':
        backorder = true;
        break;

      case 'in transit':
        addtobag = true;
        break;

      case 'in transit soon':
        addtobag = true;
        break;

      case 'warehouse transfer':
        addtobag = true;
        break;

      case 'store transfer':
        addtobag = true;
        break;

      case 'possibly available':
        break;

      case 'jewelry possibly available':
        break;

      case 'unavailable':
        shopper = false;
        break;

      case 'no threshold':
        shopper = false;
        break;

      case 'unknown sku':
        shopper = false;
    }
  }

  if (typeof salenav!="undefined" && salenav)
	shopper = false;
  
  return {
    addtobag: addtobag,
    backorder: backorder,
    shopper: shopper,
    info: info
  };
};

RTW.updateAvailablityInformation = function (showElement, availability) {
  showElement.setStyle({ marginTop: '0px', display: '', opacity: 1 });
  showElement.down('p.availability').update(availability.info);
  showElement.down('div.addtobag')[availability.addtobag ? 'show' : 'hide']().down('.content').update(Gucci.getTerm('add to bag'));
  showElement.down('div.backorder')[availability.backorder ? 'show' : 'hide']().down('.content').update(Gucci.getTerm('register for wait list'));
  showElement.down('div.checkout').hide();
  var shopper = showElement.down('div.personal_shopper_container') || showElement.next('div.personal_shopper_container');
  shopper[availability.shopper ? 'show' : 'hide']();
}

RTW.setDeepLink = function(rtw) {
  var deepLink = "#" + rtw.id.split('_')[1];
  var displayGroup = rtw.getKey("currentDisplayGroup");
  if (displayGroup) {
    deepLink += "-" + displayGroup.displayGroup_id;

    var product = rtw.getKey("currentProduct");
    if (product) {
      deepLink += "-" + product.style_number;

      var sku = rtw.getKey("currentSku");
      if (sku) {
        deepLink += "-" + sku.sku;
      }
    }
  }
  var href = window.location + "";
  window.location = href.split('#')[0] + deepLink;
};

RTW.gotoDeepLink_deprecated = function(deepLink) {
  var displayGroup = gucci.DataHelper.getLookDisplayGroupByStyleNumber(deepLink.gsub("_", ""));
  if(displayGroup) {
    var rtw = $('rtw_' + displayGroup._parent.panel_id);
    if (rtw) {
      RTW.prepareExpand(rtw, true);
      RTW.requestDisplayGroup($('thumbnail_' + displayGroup._parent.panel_id + '_' + displayGroup.displayGroup_id), true);
    }
  }
};

RTW.gotoDeepLink = function(deepLink) {
  var splittedDeepLink = deepLink.split('-');
  if (splittedDeepLink[0]) { //panel
    var rtw = $('rtw_' + splittedDeepLink[0]);
    if (rtw) { //can find the dom node with the id rtw_{panel_id}
      Effect.HScrollToElement(rtw, null, {afterFinish: function(){
		RTW.prepareExpand(rtw, true); 
	    if (splittedDeepLink[1]) { //displayGroup
	      RTW.deepLinkSku = splittedDeepLink[3];
	      RTW.deepLinkVariation = splittedDeepLink[2];
	      RTW.requestDisplayGroup($('thumbnail_' + splittedDeepLink[0] + '_' + splittedDeepLink[1]), true);
	    }
	 }});
    } else { //if its not there try the old version of deepLinks
      RTW.gotoDeepLink_deprecated(deepLink);
    }
  }
};

RTW.gotoDeepLinkSku = function(rtw) {
  var sku_number = RTW.deepLinkSku;
  RTW.deepLinkSku = ''; // reset;
  RTW.deepLinkVariation = ''; //reset 
  if (sku_number) {
    ele = RTW.getLookElements(rtw);
    var sizes_select = ele.getCurrentDetail().down('select.sizes-select');
    if (sizes_select) {
      for (var i = 0; i < sizes_select.options.length; i++) {
        if (sizes_select.options[i].value == sku_number) {
          sizes_select.selectedIndex = i;
          RTW.onSizeUpdate(ele, RTW.getIds(rtw),{target: sizes_select});
          break;
        }
      }
    }
  }
};

RTW.goToShoppingBag = function(link){
  location.href = getSecureBaseURL() + '/checkout/shopping_bag.asp';
};

RTW.gotoAndOpen = function(href) {
  var newHref = href.split('#');
  var oldHref = (window.location + "").split('#');
  if (oldHref[0].charAt(oldHref.length-1) != '/') {
    oldHref[0] += '/';
  }
  if (oldHref[0].indexOf(newHref[0]) != -1) {
    RTW.gotoDeepLink(newHref[1]);
  } else if (oldHref[0].replace(/%2D/g, "-").indexOf(newHref[0].replace(/%2D/g, "-")) != -1) {
    RTW.gotoDeepLink(newHref[1]);
  } else {
    window.location = href;
  }
};

RTW.submitShopper = function(form) {
  var rtw = form.up('div.rtw');

  var sku = rtw.getKey('currentSku');
  var product = rtw.getKey('currentProduct');
  var displayGroup = rtw.getKey('currentDisplayGroup');
  var look = rtw.getKey('currentLook');

  var requestParams = $(form).serialize(true);

  if (displayGroup) {
    requestParams.status = sku ? ( sku.status || "" ) : '';
    requestParams.sku = sku ? ( sku.sku || "" ) : '';
    requestParams.size = sku ? ( sku.sizename || "" ) : '';
    requestParams.description = product ? ( product.text.grpdesc || "" ) : '';
    requestParams.variationDescription = product ? ( product.text.vardesc || "" ) : '';
    requestParams.price = product ? ( product.priceNum || "" ) : '';
    requestParams.style = product ? ( product.formatStyleNumber(" ") || "" ) : '';
    requestParams.sale = product ? ( product.priceSale || "" ) : '';
    requestParams.path = displayGroup ? ( displayGroup.path || "" ) : '';
    requestParams.collection = product ? ( product.collection || "" ) : '';
    requestParams.department = product ? ( product.department || "" ) : '';
    requestParams.productLink = product ? ( product.formatStyleNumber("_") || "" ) : '';
    requestParams.imageLink = product ? ( product.images.thumb || "" ) : '';
    requestParams.miniThumbLink = product ? ( product.images.miniThumb || "" ) : '';
    requestParams.shown = product ? ( product.images.miniThumb ? 1 : 0 ) : 0;
  } else {
    requestParams.isLookFrom = 1;
    requestParams.panel_id = look.panel_id;
    var displayGroup_ids = Object.keys(look.displayGroups);
    var index = 1;
    for (var i = 0; i < displayGroup_ids.length; i++) {
      var inputField = $('checkbox_' + look.panel_id + '_' + displayGroup_ids[i]);
      if (inputField && inputField.checked) {
        displayGroup = look.displayGroups[displayGroup_ids[i]];
        product = look.displayGroups[displayGroup_ids[i]].leadStyle;

        requestParams['style_' + index] = product ? ( product.formatStyleNumber(" ") || "" ) : "";
        requestParams['description_' + index] = product ? ( product.text.grpdesc || "" ) : '';
        requestParams['variationDescription_' + index] = product ? ( product.text.vardesc || "" ) : '';
        requestParams['panelThumbLink_' + index] = product ? ( product.images.panel_thumb || "" ) : '';

        if (product && product.deep_link) {
          var link = window.location + "";
          link = link.split("#")[0] + "#" + product.deep_link;
          requestParams['deepLink_' + index] = link;
        }

        index++;
      }
    }
  }
  requestParams.formType = 'contact';

  new Ajax.Request('/' + Cookie.get('site') + '/contact_item.asp', {
    onSuccess: function(request) {
      //update personal shopper form with responseBody
      var personal_shopper_form = rtw.down('div.personal_shopper_form');
      personal_shopper_form.update(request.responseText.gsub(/\\"/,'"').gsub(/\\'/,"'"));
    },
    onException: function(transport, exception) {
       Shop.lastException = $H(exception);
    },
    parameters: requestParams
  });
};
  
RTW.changeThumbnail = function(thumb, variation) {
  var thumbContainer = thumb.up();
  var oldid = thumb.id;
  var displayGroupInfo = RTW._DOMIdToDisplayGroup.get(thumb.id);
  var displayGroup = gucci.DataHelper.getLookDisplayGroup(displayGroupInfo.displayGroup_id);
  if (!variation)
    variation=displayGroup.getProduct(displayGroupInfo.currentStyle);
  var thumbSrc = variation.images.panel_thumb;
  var oldThumb = thumbContainer.down('div.panel-thumb-unavailable') || thumbContainer.down('img');
  var newThumb = null;
  if (!thumbSrc || thumbSrc == '') {
    newThumb = new Element('div', {
      id: oldid,
      className: 'panel-thumb-unavailable'
    }).setStyle({
      background: 'url('+ Shop.photoUnavailableThumbUrlForLightbox(thumbContainer.up('div.rtw')) +')',
      marginLeft: oldThumb.getStyle('margin-left')
    }).update(Gucci.getTerm('photo unavailable'));
  } else {
    oldHeight = oldThumb.getHeight();
    newThumb = new Element('img',{
	    id:  oldid,
      className: "thumb",
      src: thumbSrc
    }).setStyle({
      marginLeft: oldThumb.getStyle('margin-left') || 0,
      width: oldThumb.getStyle('width'),
      height: oldHeight     
    });
  }

  var thumbIndex;
  var thumbUrls = displayGroup.getAllThumbUrls();
  for (var i = 0; i < thumbUrls.length; i++) {
    if (thumbUrls[i] == thumbSrc) {
      thumbIndex = i;
      break;
    }
  }

	var rtw = oldThumb.up('div.rtw');
	ele = this.getLookElements(rtw);

  oldThumb.stopObserving('click');
  oldThumb.remove();

  thumbContainer.insert({ top: newThumb });
  
  // NOT YET IMPLEMENTED: update variation slider 
  //thumbContainer.down('.tooltip').update((thumbIndex+1)+'/'+thumbUrls.length); 
  
  displayGroupInfo.currentThumbIndex = thumbIndex;
  displayGroupInfo.currentStyle = displayGroup.getStyleNumbersWithLeadStyleFirst()[thumbIndex];

  ele.rtw.setKey("activeDisplayGroup",newThumb);    

  newThumb.observe('click', function() { RTW.requestDisplayGroup(newThumb); });

  return newThumb;
};
   
   
RTW.updateZoomer = function(rtw, product) {
  //var look = gucci.Data.looks[rtw.id.split('_')[1]];
  //var fullUrl = look['images'].full360 ? look['images'].full360[0] : look['images'].full;
  var images = product.images;
  var zoomUrl = null;

  if (images.is360)
    zoomUrl = images.zoom[0];
  else {
    zoomUrl = images.zoom;
    if (images.zoom == "undefined" && images.zoom.size && images.zoom.size()==0)
      zoomUrl = null;
  }
  
  var fullUrl = images.full;
    
  var delay = 0;
  
  var productImageWrapper = rtw.down('.full_image_wrapper');
  var productImage = productImageWrapper.down('img') || productImageWrapper.down('div.panel-thumb-unavailable');
  
  productImageWrapper.addClassName('loading');

  rtw.setBusy();

  if (rtw.zoomer && rtw.zoomer._zoomed) {
    rtw.zoomer.zoomOutAndDestroy();
    delay = Gucci.Zoomer.ZOOM_OUT_SPEED + 0.01;
  } else if (rtw.zoomer) {
    rtw.zoomer.destroy();
  }

	// If rotator instance exist, destroy it
	if (rtw.rotator) rtw.rotator.destroy();

  // TODO add/remove image unavailable notice in the right time
  new Effect.Opacity(productImage, {
    delay: delay,
    from: 1,
    to: 0,
    transition: Gucci.cubic,
    afterFinish: function() {
		var availstatus = '';
		var thumb = RTW._data.get(rtw.id).get("activeDisplayGroup");
		var displayGroup = RTW.getDisplayGroupFromThumbId(thumb.id);
		var activeStyle = RTW._activeStyleForDisplayGroup.get(displayGroup.displayGroup_id);
		if (activeStyle != null) {
			var producttemp = displayGroup.getProduct(activeStyle);
			var pricetemp = producttemp.price;
			var skutemp = (producttemp.skus.length > 1) ? producttemp.getSku(RTW.getSkuFromSelectedSize(rtw, activeStyle).get('sku')).status : (producttemp.skus.length>0) ? producttemp.skus[0].status : Shop._defaultAvail;

			if (!skutemp) {
				availstatus = '';
			} else {
				availstatus = '/' + skutemp.replace(/\s/g,'_');
			}
		}

      if (!zoomUrl) { //TODO: check if unavailable
        var fullProductImage = (fullUrl == '' || !fullUrl) ? Shop.FULL_PHOTO_UNAVAILABLE_URL : fullUrl;
        Loader.cacheOrLoad(fullProductImage, {
          onComplete: function() {
            var imageTag = '<img src="' + fullProductImage + '" style="cursor: url(/images/zoom-in.cur), -moz-zoom-in; left: 0px; position: relative; opacity:0;filter:alpha(opacity=0);"/>';
    
            productImage.remove();
            productImageWrapper.insert(imageTag);
            
            new Effect.Opacity(productImageWrapper.down('img'), {
              from: 0,
              to: 1 ,
              transition: Gucci.cubic,
              afterFinish: function() {
                if(fullUrl == '' || !fullUrl) {
                  productImageWrapper.insert('<div  class="product-image-unavailable">' + Gucci.getTerm('photo unavailable') + '</div>');
                }
              }
            });
            productImageWrapper.removeClassName('loading');
          }
        });
        
/*
        if (Engine.isMSIE6 || Engine.isMSIE) { //HACK ie
          var fullProductImage = (fullUrl == '' || !fullUrl) ? Shop.FULL_PHOTO_UNAVAILABLE_URL : fullUrl;
          var imageTag = '<img src="' + fullProductImage + '" style="cursor: url(/images/zoom-in.cur), -moz-zoom-in; left: 0px; position: relative;"/>';
          
          productImage.remove();
          productImageWrapper.insert(imageTag);
          
          new Effect.Opacity(productImage, {
            from: 0,
            to: 1 ,
            transition: Gucci.cubic,
            afterFinish: function() {
              if (!fullUrl) {
                productImageWrapper.insert('<div class="product-image-unavailable">' + Gucci.getTerm('photo unavailable') + '</div>');
              }
            }
          });
          productImageWrapper.removeClassName('loading');
        } */
        rtw.setIdle();
        return;
      } else {
        var unavail = productImageWrapper.down('div.product-image-unavailable');
        if (unavail) unavail.remove();
      }
      Loader.cacheOrLoad(fullUrl, {
        onComplete: function() {
          var imageTag = '<img src="' + fullUrl + '" style="opacity:0;filter:alpha(opacity=0)"/>' 
			+ ((fullUrl == '' || !fullUrl) ? ('<div class="product-image-unavailable">' + Gucci.getTerm('photo unavailable') + '</div>') : '');
          productImageWrapper.update(imageTag);
          productImage = productImageWrapper.down('img');
          
          new Effect.Opacity(productImage, {
            from: 0,
            to: (fullUrl == '' || !fullUrl) ? 0.5 : 1,
            transition: Gucci.cubic,
            beforeStart: function() {
                   var displayGroupInfo = RTW._DOMIdToDisplayGroup.get(thumb.id);
                   var variation = displayGroup.getProduct(displayGroupInfo.currentStyle);
                   RTW.initZoomer(RTW.getLookElements(rtw), displayGroup, variation);
                   rtw.setIdle();
                 },
            afterFinish: function() {
              productImageWrapper.removeClassName('loading');
            }
          });
        }
      });
    }
  });
};
    
RTW.getSkuFromSelectedSize = function(rtw, style){
  ele = this.getLookElements(rtw);
  var select = ele.getCurrentDetail().down('select.sizes-select');
  if (!select) {
    return null;
  }
  return $H({
    sku: $F(select),
    size: select.options[select.selectedIndex].value
  });
};    

Effect.Crossfade = function(from, to, options) {
  new Effect.Parallel([
    new Effect.Opacity(from, { from: 1, to: 0, sync: true }),
    new Effect.Opacity(to, { from: 0, to: 1, sync: true })
  ], options || {});
};

var base = '/javascripts';
var swfBase = "http://images.gucci.com/chiodo";

/// Timepieces injection code ---
function initializeOverlay(){
  var OverlayLoader = {
		scriptTags: [],
		require: function(file) {
				['control_modal', 'swfobject', 'overlay'].each(function(file){
					var scri = document.createElement('script');
					scri.type = 'text/javascript';
					scri.src = 	base + '/'+ file +'.js';
					document.body.appendChild(scri);
				});
		},
		loadStyle: function(){
		    //		document.write('<style type="text/css">#modal_overlay{background-color:#211404;}</style>');
		},
		load: function(callback) {
				OverlayLoader.require();
				if (Engine.isMSIE) {OverlayLoader.loadStyle();};
		   }
		};
		OverlayLoader.load();
		setTimeout(function() {
	           loadOverlay();		  
		}, 1300);

};

function loadOverlay(){
	try {
	  Overlay.initialize({
			shopOnlineUrl: 'http://gucci.com'
		});
	} catch (err){
    setTimeout(function(){
		  loadOverlay();
    }, 100);
		return;
	};
};

function getId () {
	if(typeof(Gucci.id) == 'undefined'){
	setTimeout(function() {
	getId();
	}, 1000);
	} else {
    if(Gucci.id == "timepieces" || 
    	   Gucci.id == "spring summertimepieces" ||
    	   Gucci.id == "fall wintertimepieces" ||
		   Gucci.id == "cruisetimepieces"){
	setTimeout(function() {
	initializeOverlay();
	}, 500);
	};
	};
};

setTimeout(function(){
	getId();
}, 500);