/*
* HowStuffWorks Featured Articles module
* Written by Shawn Reed for HowStuffWorks
*
* Portions code from:
* Ultimate Fade-In Slideshow (v1.5): © 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 fadearray=new Array();
var fadeclear=new Array();

var dom=(document.getElementById);
var iebrowser=document.all;

function featuremodule(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder, color){
	this.pausecheck=pause;
	this.mouseovercheck=0;
	this.paused=0;
	this.delay=delay;
	this.degree=40; //initial opacity degree (10%)
	this.curimageindex=0;
	this.nextimageindex=1;
	this.chcolor = color;
	fadearray[fadearray.length]=this;
	this.slideshowid=fadearray.length-1;
	this.canvasbase="canvas"+this.slideshowid;
	this.curcanvas=this.canvasbase+"_0";
   if(displayorder == "") { displayorder = undefined; }
	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();
	for (p=0;p<theimages.length;p++){
		this.postimages[p]=new Image();
		this.postimages[p].src=theimages[p][0];
	}
	this.objid = Math.floor(Math.random()*999999+1);
	this.fader = undefined;

	var fadewidth=fadewidth+this.imageborder*2;
	var fadeheight=fadeheight+this.imageborder*2;

	if (iebrowser&&dom||dom)
	document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;background-image: url(/images/front-back2.jpg);"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;background-image: url(/images/front-back2.jpg);"></div></div>');
	else
	document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>');

	if (iebrowser&&dom||dom)
	this.startit();
	else{
		this.curimageindex++;
		setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay);
	}
	return this;
}

function fadepic(obj){
	if (obj.degree<100){
		obj.degree+=10;
		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{
		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;
		obj.fader = setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay);	
	}
}

featuremodule.prototype.togglePause=function() {
	var playpause = 'rotateaction_'+this.objid;
	clearTimeout(this.fader);			
	if(this.paused == 1) {		
		document.getElementById(playpause).innerHTML = 'pause';
		this.paused = 0;
		this.rotateimage();			
	} else {		
		this.paused = 1;
		document.getElementById(playpause).innerHTML = 'play';
	}
}

featuremodule.prototype.jumpToSlide=function(slideindex) {
	if(this.paused == 1) {
		this.togglePause();
	}
	slideindex--;
	this.curimageindex = slideindex;
	this.nextimageindex = ((slideindex+1)<this.postimages.length)?slideindex+1:0;
	clearTimeout(this.fader);
	clearInterval(fadeclear[this.slideshowid]);
	this.startit();
}

featuremodule.prototype.prevSlide=function() {
	var newslide;
	if(this.curimageindex == 0) {
		newslide = this.theimages.length - 1;
	} else {
		newslide = this.curimageindex - 1;
	}
	if(newslide < 1) { newslide = this.theimages.length; }
	this.jumpToSlide(newslide);
}

featuremodule.prototype.nextSlide=function() {
	var newslide;
	if(this.curimageindex<this.theimages.length) {
		newslide = this.curimageindex+1;
	} else {
		newslide = 1;
	}
	this.jumpToSlide(newslide);
}

featuremodule.prototype.populateslide=function(picobj, picindex){
	var slideHTML="";
	var slidelist="";
	var countertxt = (picindex+1)+' of '+this.theimages.length;
	var rotateaction_default = (this.paused == 1) ? 'play' : 'pause';
	if(this.theimages.length > 5) {
		slidelist = "&nbsp;"+(picindex+1)+" of "+this.theimages.length;
	} else {
		for(i=0;i<this.theimages.length;i++) {
			if(i == picindex) {
				slidelist += '<td><a class="activefeature" href="javascript:fm.jumpToSlide('+(i+1)+');" style="FONT-SIZE: 12px; font-weight:bold; color:#FF9400; text-decoration: none">&nbsp;•&nbsp;</a></td>';
			} else {
				slidelist += '<td><a class="inactivefeature" href="javascript:fm.jumpToSlide('+(i+1)+');" style="FONT-SIZE: 12px; font-weight:bold; color:#808080; text-decoration: none">&nbsp;•&nbsp;</a></td>';
			}
		}
	}
	if (this.theimages[picindex][1]!="") //if associated link exists for image
	slideHTML='<table border="0" cellpadding="0" width="100%" cellspacing="0"><tr><td rowspan="2" valign"top"><a href="'+this.theimages[picindex][1]+'"><img src="'+this.postimages[picindex].src+'" border="0" vspace="0" hspace="10">';
	if (this.theimages[picindex][1]!="") //if associated link exists for image
	slideHTML+='</a></td><td valign"top">'+this.theimages[picindex][3]+'</td></tr> <tr><td><table width="95%" cellpadding="0" cellspacing="3"><tr><td width="50%"><font face="Arial" size="1"><table border="0" width="100%"><tr>'+slidelist+'</tr></table></font></td><td align=right width="50%"><b><font face="Arial" style="FONT-SIZE: 10px"><a href="javascript:fm.nextSlide()" style="text-decoration: none"><font color="#808080">siguiente &gt;&nbsp;&nbsp;&nbsp;&nbsp;</font></a></font></b></td></tr></table></td></tr></table>';
	picobj.innerHTML=slideHTML;
}


featuremodule.prototype.rotateimage=function(){
	var playpause = 'rotateaction_'+this.objid;
  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+"])",50);
		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;
}

featuremodule.prototype.resetit=function(){
	this.degree=40;
	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=obj.degree/100;
}


featuremodule.prototype.startit=function(){
	var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas);
	this.populateslide(crossobj, this.curimageindex);
	this.rotateimage();
}