var iniciargaleria = new slideshowObject("iniciargaleria", "slideimage", "slideimagebelow", "featured-list", "button-active");
iniciargaleria.imagenes=["images/content/featured-latest-design.jpg", "images/content/featured-mascot-design.jpg", "images/content/featured-logo-design.jpg","images/content/featured-web-design.jpg", "images/content/featured-misc-design.jpg"];
iniciargaleria.IMGlinks=["web-design.php", "mascot-design.php", "logo-design.php", "web-design.php","misc-design.php"];

function slideshowObject(thisObjectName, idfront, idbelow, slidebuttons, activebutton) 
{
this.lastactive = 1; //last image position showed
this.last;   //last button element active
this.slidebuttonsEle; //buttons IDs
this.imagenes; //imgs of the slideshow
this.autopos=0; //autoslide counter
this.idfront=idfront; //front/current <img> id
this.idbelow=idbelow; //below/next <img> id
this.sld; //autoslide timer
this.t; //opacity timer
this.activebutton=activebutton; //active button class
this.slidebuttons=slidebuttons; //IDs from HTML
this.delay; //10seconds by default
this.autoON = false;
this.IMGlinks;

this.slideauto = function()
{
	this.trans(this.autopos+1); 
	this.autopos++;
	if (this.autopos==(this.slidebuttonsEle.length))
	{
 	 this.autopos=0;
	 }
}	

this.auto= function(delay) 
{ 
this.autoON=true;
this.delay=delay;
this.sld=setInterval(thisObjectName+".slideauto();", this.delay); 

}




this.iniSlide= function() 
{
 this.slidebuttonsEle=getEle(this.slidebuttons).getElementsByTagName("a");
 this.last=this.slidebuttonsEle[0];
}

this.changeSlideImg= function(pos)
{
this.trans(pos);
if (this.autoON)
{
clearInterval(this.sld);
this.sld = setTimeout(thisObjectName+".auto("+thisObjectName+".delay);",this.delay); //this.delay plus .auto(delay) = delay*2
}
}


this.trans = function(pos)
{ 
  img=this.imagenes[pos-1];
  bot=this.slidebuttonsEle[pos-1];
  IMGlink=this.IMGlinks[pos-1];
	
	if (pos!=this.lastactive) //if the last transition is still active
	{
		clearInterval(this.sld); //reseting autoslide 
		getEle(this.idbelow).src=getEle(this.idfront).src; 
		getEle(this.idfront).src=img;
		getEle(this.idfront).parentNode.href=IMGlink;
		clearInterval(this.t); //stopping previous fade
		transop(this.idfront,0);
		addClass(bot, this.activebutton);
		removeClass(this.last, this.activebutton);
		this.lastactive=pos;
		this.last=bot; 
	if (this.autoON)
	{
		this.sld = setTimeout(thisObjectName+".auto("+thisObjectName+".delay);",(this.delay)*2);
   	this.autopos = pos-1;	
	}
	}
}




}//OBJECT END


//auxiliary functions
function getEle(id) //shortcut to document.getElementById();
{
 return document.getElementById(id);
} 
  
	




function setIdByElements(idroot, elements) //aux funct
{
 for (n=0;n<elements.length;n++)
 {
 		elements[n].id=idroot+(n+1);
 }
}



function opacity(ele, num) //set "num" opacity to "id"
{
ele.style.opacity=num/100; //Firefox
ele.style.filter = "alpha(opacity:"+num+")"; //IE

}

function transop(id, n) //fade from n to 100%
{
 	 if (n<100)  
	 {
	 n=n+10; 
 	 opacity(getEle(id), n);
	 this.t=setTimeout('transop("'+id+'",'+n+')',10); //only ID accepted
	 }	 																				 
}
function ini() 
{
 iniciargaleria.iniSlide(); //starting slide
 iniciargaleria.auto(3000); //if autoslide
}