/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["../skin1/images/FrontPage/banner-823-feb11-sale.jpg", "../Kids-Outdoor-Gear/Kids-Ski-and-Snow-Kit/", ""]
fadeimages[1]=["../skin1/images/FrontPage/banner-823-winter-patagonia.jpg", "../Kids-Outdoor-Gear/Jackets-Skiwear/", ""]
fadeimages[2]=["../skin1/images/FrontPage/banner-823-jan11-ski.jpg", "../Kids-Outdoor-Gear/Kids-Ski-and-Snow-Kit/", ""] 
fadeimages[3]=["../skin1/images/FrontPage/banner-823-winter-sledge.jpg", "../Kids-Outdoor-Gear/Kids-Ski-Equipment-and-Sledges/", ""]
 
var fadebgcolor="white"

////NO need to edit beyond here/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
var pauseme = 0 
var timeoutid = 0
var degree_interval = 2.5


 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
{
document.write('<div id="container'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden; z-index:1;">')
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden; z-index:1;">')
document.write('<div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'; z-index:2"></div>')
document.write('<div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'; z-index:2"></div>')
document.write('</div>')
//document.write('<div id="slide_control_background" style="position:absolute; width:75px; height:24px; left:575px; top:221px; background-color:#000000; z-index:1; filter:alpha(opacity=25); -moz-opacity:.25; opacity:.25;"></div>')
document.write('<div id="slide_control_container" style="position:absolute; width:75px; height:24px; left:733px; top:321px; z-index:2">')
document.write('<div id="div_slide_button_b" style="position:absolute; width:20px; height:20px; left:3px; top:2px; z-index:2; cursor: pointer;"><img id="but_slide_button_1" src="../skin1/images/FrontPage/Slideshow/slide_back.gif" width="20px" height="20px" onclick="javascript:fadearray[0].previousimage()"/></div>')
document.write('<div id="div_slide_button_f" style="position:absolute; width:20px; height:20px; left:25px; top:2px; z-index:2; cursor: pointer;"><img id="but_slide_button_2" src="../skin1/images/FrontPage/Slideshow/slide_forward.gif" width="20px" height="20px" onclick="javascript:fadearray[0].nextimage()"/></div>')
document.write('<div id="div_slide_button_p" style="position:absolute; width:20px; height:20px; left:52px; top:2px; z-index:2; cursor: pointer;"><img id="but_slide_button_p" src="../skin1/images/FrontPage/Slideshow/slide_pause.gif" width="20px" height="20px" onclick="javascript:fadearray[0].pauseshow()"/></div>')
document.write('</div></div>')

}

else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=degree_interval
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
degree_interval = 2.5
clearTimeout(timeoutid)
timeoutid=0   
timeoutid=setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(interval){                            

var cacheobj=this
if (interval==undefined) interval=25
if (pauseme==1 && interval==25){
    setTimeout(function(){cacheobj.rotateimage()},25)
    return;
}
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",interval)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}


fadeshow.prototype.pauseshow=function(mustpause){
//pause the slideshow when user presses the pause button and display pause button
if (mustpause==undefined)
pauseme=!pauseme
else
pauseme=1

if(pauseme)
document.getElementById("div_slide_button_p").innerHTML ='<img id="but_slide_button_p" src="../skin1/images/FrontPage/Slideshow/slide_play.gif" onclick="javascript:fadearray[0].pauseshow()"/>'  
else
document.getElementById("div_slide_button_p").innerHTML ='<img id="but_slide_button_p" src="../skin1/images/FrontPage/Slideshow/slide_pause.gif" onclick="javascript:fadearray[0].pauseshow()"/>'
if (timeoutid==0)
 degree_interval = 2.5
 clearTimeout(timeoutid)
 timeoutid=0 
 timeoutid=setTimeout("fadearray["+this.slideshowid+"].rotateimage()", this.delay)  
}

fadeshow.prototype.nextimage=function(){
//pause the slideshow and move to next slide
this.pauseshow(1)

//stop any transition in progress
clearInterval(fadeclear[0])    
clearTimeout(timeoutid)
timeoutid=0
degree_interval = 25
//rotate to the next slide
this.rotateimage(1)
}

fadeshow.prototype.previousimage=function(){
//pause the slideshow and move to next slide
this.pauseshow(1)

//stop any transition in progress
clearInterval(fadeclear[0])    
clearTimeout(timeoutid)
timeoutid=0

//setup the images -jump back twoce to get to the correct image
this.curimageindex=(this.curimageindex>0)? this.curimageindex-1 : this.postimages.length-1
this.curimageindex=(this.curimageindex>0)? this.curimageindex-1 : this.postimages.length-1           


this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(this.tempobj, this.curimageindex)
degree_interval = 25
//rotate to the next slide
this.rotateimage(1)

}