if(typeof Product=='undefined') {
    var Product = {};
}

/********************* IMAGE SWITCHER ***********************/

Product.Switcher = Class.create();
Product.Switcher.prototype = {
    initialize: function(imageEl, option_list, settings, productName){
	this.imageEl = imageEl;
	this.productName = productName;
	this.option_list = option_list;
	this.settings = settings;
	this.preLoadedImage = new Image(); 
	this.preLoadedImage.onload = this.onImageLoaded.bind(this);
	this.preLoadImage = this.preLoadImage.bind(this);
	this.preLoadImageFadeOutEndFn = this.preLoadImageFadeOutEndFn.bind(this);
	this.preLoadImageFadeOutEnd=true;
    },
    reloadPrice: function(){
	if (typeof this.options =='undefined')
		this.options = $$('#' + this.option_list + ' input')
	for (var i = 0; i<this.options.length; i++) 
	{
	    if (this.options[i].checked)
	    {
		if($(this.imageEl).src == this.settings[this.options[i].value]['small_url'])
			return ;
		if (this.preLoadImageFadeOutEnd==false)
		{
			this.nextImg = this.settings[this.options[i].value]['small_url'];
			this.oldFNReloadPrice();
			return;
		}
		this.preLoadImageLoaded = false;
		this.imageFadeIn = false;
		this.preLoadImageFadeOutEnd = false;
		this.preLoadedImage.src = this.settings[this.options[i].value]['small_url'];
		Effect.FadeIn($(this.imageEl),{afterFinishInternal: this.preLoadImage});
	    }
	}
	this.oldFNReloadPrice();
    },
    onImageLoaded: function(){
	this.preLoadImageLoaded = true;
	if (this.imageFadeIn==false)
	{
		return ;
	}
	$(this.imageEl).src = this.preLoadedImage.src;
	Effect.FadeOut($(this.imageEl),{afterFinishInternal: this.preLoadImageFadeOutEndFn});
	this.preLoadImageLoaded = false;
	this.imageFadeIn = false;
    },
    preLoadImage: function(){
	this.imageFadeIn = true;
	if (this.preLoadImageLoaded==false)
	{
		return ;
	}
	$(this.imageEl).src = this.preLoadedImage.src;
	Effect.FadeOut($(this.imageEl),{afterFinishInternal: this.preLoadImageFadeOutEndFn});
	this.preLoadImageLoaded = false;
	this.imageFadeIn = false;
    },
    preLoadImageFadeOutEndFn: function(){
	if (this.nextImg)
	{
		this.preLoadedImage.src = this.nextImg;	
		this.nextImg = false;
		Effect.FadeIn($(this.imageEl),{afterFinishInternal: this.preLoadImage});
		return;
	}
	this.preLoadImageFadeOutEnd = true;
    },
    enlargeImage: function(){
	if (!(typeof this.enlargeImageContainer == 'undefined'))
	if (this.enlargeImageContainer!=null)
		return;
	if (typeof this.options =='undefined')
		this.options = $$('#' + this.option_list + ' input')
	for (var i = 0; i<this.options.length; i++) 
	{
	    if (this.options[i].checked)
	    {
		container = document.createElement('div');
		hlpOverlay = document.createElement('div');
		hlpOverlay.onclick = this.closeEnalargeImage.bind(this);
		closeButton = document.createElement('a');
		hlpOverlay.id = "hlp-overlay";
		$(hlpOverlay).setStyle({'height':$(document.body).getDimensions().height + 'px'});
		n = document.createTextNode('Close');
		closeButton.href = "javascript:opImageSwitcher.closeEnalargeImage();";
		closeButton.appendChild(n);
		image = document.createElement('img');
		image.src = this.settings[this.options[i].value]['big_url'];
		image.onclick = this.closeEnalargeImage.bind(this);
		container.className = 'enlargeImageContainer';
		image.className = 'enlargeImage';
		hr = document.createElement('hr');
		hr['size'] = "5";
		hr['color'] = "#f60";
		span = document.createElement('span');
		productNameNode= document.createTextNode(this.productName + ' ' + this.settings[this.options[i].value]['label']);
		span.appendChild(productNameNode);
		container.appendChild(span);
		container.appendChild(closeButton);
		container.appendChild(hr);
		container.appendChild(image);
		document.body.appendChild(container);
		elements = document.getElementsByTagName('select');
		for(i=0;i<elements.length;i++){
			elements[i].style.visibility='hidden';
		}
		/*iframeContainer = document.createElement('div');
		iframe= '<!--[if lte IE 6]><iframe frameborder="0" style="position:absolute;width:'+container.offsetWidth+'px; height:'+container.offsetHeight+'px;left:'+container.offsetLeft+'px;top: '+ container.offsetTop+'px;z-index:999;"></iframe><![endif]-->';
		iframeContainer.innerHTML = iframe;
		document.body.appendChild(iframeContainer);*/
		
		document.body.appendChild(hlpOverlay);
		Effect.FadeOut($(image),{duration: 1});
		this.enlargeImageContainer = container;
		this.enlargeImageHlpOverlay = hlpOverlay;
		this.elements = elements;
	    }
	}
    },
    closeEnalargeImage:function()
    {
	document.body.removeChild(this.enlargeImageContainer);
	this.enlargeImageContainer = null;
	document.body.removeChild(this.enlargeImageHlpOverlay);
	this.enlargeImageHlpOverlay = null;
	/*elements = document.getElementsByTagName('select');*/
	for(i=0;i<this.elements.length;i++){
			this.elements[i].style.visibility='visible';
		}
	this.elements = null;	
    },
    onInputsLoaded:function()
    {
	if (typeof this.options =='undefined')
		this.options = $$('#' + this.option_list + ' input')
	if (this.options.length)
	this.options[0].checked = true;
    }
};

Effect.FadeOut = function(element) {
  element = $(element);
  var oldOpacity = element.getInlineOpacity();
  var options = Object.extend({
  from: 0.0,
  duration: 0.5,
  to:   element.getOpacity() || 1.0
  }, arguments[1] || {});
  element.setOpacity(0.0).show();
  return new Effect.Opacity(element,options);
}

Effect.FadeIn = function(element) {
  element = $(element);
  var oldOpacity = element.getInlineOpacity();
  var options = Object.extend({
  from: element.getOpacity() || 1.0,
  duration: .5,
  to:   0.0}, arguments[1] || {});
  return new Effect.Opacity(element,options);
}