/**
 * ImageRoller
 */
var ImageRoller=function(width,height,textHeight,cssName){
    this.width=width;
    this.height=height;
    this.textHeight=textHeight;
    this.cssName=cssName;
};

ImageRoller.prototype={
    size:function(){
        return this.imgs.length;
    },
    addImage:function(url,text,href){
        var imgs=this.imgs=this.imgs||[];
        var alt=text;
        if(text.toString().length>15){
            text=text.toString().substr(0, 14)+"...";
        }
        var img=[url,text,href,alt];
        imgs[imgs.length]=img;
    },
    start:function(interval,target_img,target_text){
        this.target_img=target_img;
        this.target_text=target_text;
        this.interval=interval;

        var thisObj=this;
        this.index=0;
        this.run();
        this.timer=setInterval(function(){
            thisObj.run.call(thisObj)
        },interval);





    },
    run:function(){
        var target_img=this.target_img;
        var target_text=this.target_text;
        var divimg=document.getElementById(target_img);
        var divtext=document.getElementById(target_text);
        var imgs=this.imgs=this.imgs||[];
        var cache=this.cache=this.cache||{};
        var num=imgs.length;

        this.index=this.index%num;
        var img=imgs[this.index]
        var url=img[0];
        var text=img[1];
        var href=img[2];
        var alt=img[3];
        var imgElem;
        var a;
        if(cache[url]){
            imgElem=cache[url];
        }else{
            imgElem=new Image();
            imgElem.src=url;
            cache[url]=imgElem;
        }
        while(divimg.firstChild){
            divimg.removeChild(divimg.firstChild);
        }
        a=document.createElement("a");
        a.style.display="block";
        a.className="roller-img";
        a.title=a.alt=alt;
        a.style.width=this.width;
        a.style.height=this.height;
        a.style.backgroundImage="url('"+imgElem.src+"')";
        a.style.backgroundPosition="center center";
        a.style.backgroundRepeat="no-repeat";
        //a.appendChild(imgElem);
        //imgElem.style.border="none";
        a.href=href;
        divimg.appendChild(a);
        if(target_text && divtext){
            var textElem=document.createElement("div");
            textElem.innerHTML=text;

            while(divtext.firstChild){
                divtext.removeChild(divtext.firstChild);
            }

            divtext.appendChild(textElem);
        }
        if(this.onchange)
            this.onchange(this.index);
        this.index++;
    },
    pause:function(){
        clearInterval(this.timer);
    },
    resume:function(i){
        this.pause();
        if(!isNaN (i)){
            this.index=i;
            this.run();

        }

        var thisObj=this;
        this.timer=setInterval(function(){
            thisObj.run.call(thisObj)
        },this.interval);
    }
}

/*
onload=function(){

    roller.addImage("http://www.mozillamessaging.com/img/thunderbird/download/step3-vista.png","text1","#1");
    roller.addImage("http://www.mozillamessaging.com/img/thunderbird/download/step2-vista.png","text2","#2");
    roller.onchange=function(index){
        for(var i=0;i<2;i++){
            document.getElementById("roller_button_"+i).className="roller_button";
        }
        document.getElementById("roller_button_"+index).className="roller_button roller_button_over";
    }
    roller.start(2000,"roller-img","roller-text");

}
<style>
a.roller_button{
	width:25px;
	height:20px;
	margin:2px;
	line-height:20px;
	text-align:center;
	display:block;
	float:left;
	border:1px solid gray;
	background:white;

}
a.roller_button:hover, a.roller_button_over{
	background:#aa1111;
	color:white;
}
</style>
<div id="roller" style="background:white" onmouseover="roller.pause()" onmouseout="roller.resume()">
<div style="position:absolute;margin-top:171px;line-height:26px;width:270px;height:26px;filter:alpha(opacity=70);opacity:0.7;background-color:white">
	<a id="roller_button_0" onmouseover="roller.resume(0);" class="roller_button">1</a>
	<a id="roller_button_1" onmouseover="roller.resume(1);" class="roller_button">2</a>
	<div id="roller-text" style="float:right;padding-right:10px;"></div>
</div>
<div id="roller-img" style="height:200px;width:400px;overflow:hidden"></div>


</div>
*/