/********************************************************************
¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦
+-------------------------------------------------------------------+
¦  PrestaShop-Theme_Module                                          ¦
¦  Prestashop Version 1.2.0.1                                       ¦
¦  Wiznavslide 1.0.3 by Hieloiceberg                                ¦
¦  http://www.prestashop.com/forums/member/15185/hieloiceberg/      ¦
+-------------------------------------------------------------------+
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
¦ javascripts and style sheet use on this proyect:                  ¦
¦ Gradual Element Fader:                                            ¦
¦ http://www.dynamicdrive.com/dynamicindex11/gradualfader.htm       ¦
¦ Phatfusion:                                                       ¦
¦ http://www.phatfusion.net/imagemenu/                              ¦
¦ Only test it on IE7 and Mozila Firefox sorry!                     ¦
¦ I do not use anything else                                        ¦
_____________________________________________________________________
¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦
********************************************************************/

var ImageMenu = new Class({
	
	getOptions: function(){
		return {
			onOpen: false,
			onClose: Class.empty,
			openWidth: 200,
			transition: Fx.Transitions.quadOut,
			duration: 400,
			open: null,
			border: 0
		};
	},

	initialize: function(elements, options){
		this.setOptions(this.getOptions(), options);
		
		this.elements = $$(elements);
		
		this.widths = {};
		this.widths.closed = this.elements[0].getStyle('width').toInt();
		this.widths.openSelected = this.options.openWidth;
		this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1))
		
		
		this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});
		
		this.elements.each(function(el,i){
			el.addEvent('mouseenter', function(e){
				new Event(e).stop();
				this.reset(i);
				
			}.bind(this));
			
			el.addEvent('mouseleave', function(e){
				new Event(e).stop();
				this.reset(this.options.open);
				
			}.bind(this));
			
			var obj = this;
			
			el.addEvent('click', function(e){

				if(obj.options.onOpen){
					new Event(e).stop();
					if(obj.options.open == i){
						obj.options.open = null;
						obj.options.onClose(this.href, i);
					}else{
						obj.options.open = i;
						obj.options.onOpen(this.href, i);
					}
					
					
				}
				
			})
			
		}.bind(this));
		
		if(this.options.open){
			if($type(this.options.open) == 'number'){
				this.reset(this.options.open);
			}else{
				this.elements.each(function(el,i){
					if(el.id == this.options.open){
						this.reset(i);
					}
				},this);
			}
		}
		
	},
	
	reset: function(num){
		if($type(num) == 'number'){
			var width = this.widths.openOthers;
			if(num+1 == this.elements.length){
				width += this.options.border;
			}
		}else{
			var width = this.widths.closed;
		}
		
		var obj = {};
		this.elements.each(function(el,i){
			var w = width;
			if(i == this.elements.length-1){
				w = width+5
			}
			obj[i] = {'width': w};
		}.bind(this));
		
		if($type(num) == 'number'){
			obj[num] = {'width': this.widths.openSelected};
		}
				
		this.fx.start(obj);
	}
	
});
		window.addEvent('domready', function(){
		var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){location.replace(e);}});
});
ImageMenu.implement(new Options);
ImageMenu.implement(new Events);

var gradualFader={}

gradualFader.baseopacity=0.5 //set base opacity when mouse isn't over element (decimal below 1)
gradualFader.increment=0.15 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)

document.write('<style type="text/css">\n') //write out CSS to enable opacity on "gradualfader" class
document.write('.gradualfader{filter:progid:DXImageTransform.Microsoft.alpha(opacity='+gradualFader.baseopacity*100+'); -moz-opacity:'+gradualFader.baseopacity+'; opacity:'+gradualFader.baseopacity+';}\n')
document.write('</style>')

gradualFader.setopacity=function(obj, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
	var targetobject=obj
	if (targetobject && targetobject.filters && targetobject.filters[0]){ //IE syntax
		if (typeof targetobject.filters[0].opacity=="number") //IE6
			targetobject.filters[0].opacity=value*100
		else //IE 5.5
			targetobject.style.filter="alpha(opacity="+value*100+")"
		}
	else if (targetobject && typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
		targetobject.style.MozOpacity=value
	else if (targetobject && typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
		targetobject.style.opacity=value
	targetobject.currentopacity=value
}

gradualFader.fadeupdown=function(obj, direction){
	var targetobject=obj
	var fadeamount=(direction=="fadeup")? this.increment : -this.increment
	if (targetobject && (direction=="fadeup" && targetobject.currentopacity<1 || direction=="fadedown" && targetobject.currentopacity>this.baseopacity)){
		this.setopacity(obj, targetobject.currentopacity+fadeamount)
		window["opacityfader"+obj._fadeorder]=setTimeout(function(){gradualFader.fadeupdown(obj, direction)}, 50)
	}
}

gradualFader.clearTimer=function(obj){
if (typeof window["opacityfader"+obj._fadeorder]!="undefined")
	clearTimeout(window["opacityfader"+obj._fadeorder])
}

gradualFader.isContained=function(m, e){
	var e=window.event || e
	var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
	while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
	if (c==m)
		return true
	else
		return false
}

gradualFader.fadeinterface=function(obj, e, direction){
	if (!this.isContained(obj, e)){
		gradualFader.clearTimer(obj)
		gradualFader.fadeupdown(obj, direction)
	}
}

gradualFader.collectElementbyClass=function(classname){ //Returns an array containing DIVs with specified classname
	var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element
	var pieces=[]
	var alltags=document.all? document.all : document.getElementsByTagName("*")
	for (var i=0; i<alltags.length; i++){
		if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
			pieces[pieces.length]=alltags[i]
	}
	return pieces
}

gradualFader.init=function(){
	var targetobjects=this.collectElementbyClass("gradualfader")
	for (var i=0; i<targetobjects.length; i++){
		targetobjects[i]._fadeorder=i
		this.setopacity(targetobjects[i], this.baseopacity)
		targetobjects[i].onmouseover=function(e){gradualFader.fadeinterface(this, e, "fadeup")}
		targetobjects[i].onmouseout=function(e){gradualFader.fadeinterface(this, e, "fadedown")}
	}
}

/*************************************************************/