var yPosNeedsHack= document.all || navigator.userAgent.indexOf("Konqueror") >= 0;
var container= document.getElementById("container");
var posX, poxY;

var imageWidth= 200, imageHeight=150, sliderWidth=900;
var offset= 0;
var numImgs= 22;
var speed= 3;
var totalWidth= imageWidth*numImgs;
var running= false;
var borderWidth= 0;


function initScroll() {
    posX= container.offsetLeft;
    posY= container.offsetTop;
    var content= document.getElementById("content");

    for(i=0; i< numImgs; i++) {
        var elem= document.getElementById("d"+i);
        elem.style.position= 'absolute';
        elem.style.left= (offset+imageWidth*i)+'px';
        elem.style.height= imageHeight+'px';
        elem.style.width= imageWidth+'px';

        elem= document.getElementById("i"+i);
        elem.style.left= findPosX(content)+'px';
        elem.style.top= findPosY(content)+'px';
        elem.style.width= content.offsetWidth+'px';
        elem.style.height= content.offsetHeight+'px';
    }
    if (!running) {
        running= true;
        move();
    }
}


function move() {
	if (running) {
        offset+= speed;
	    if (offset >= totalWidth)
		    offset -= totalWidth;

	    for(i=0; i< numImgs; i++) {
            var elem= document.getElementById("d"+i);
            var pos= -offset+(i*imageWidth);
		    if(pos< -imageWidth)
			    pos+= totalWidth;
            var clipLeft= pos<0 ?  -pos : 0;
            var clipRight= pos>container.offsetWidth-imageWidth ? -pos +container.offsetWidth : imageWidth;
            var tmp= (clipLeft>0 ?  imageWidth-clipLeft : clipRight);
            elem.style.width= (tmp<0 ? 0 : tmp)+'px';
            elem.style.backgroundPosition= -clipLeft+'px';
            opacity(elem, (clipLeft>0 ? imageWidth-clipLeft : clipRight)/imageWidth);
            if (clipLeft>0)
                pos += clipLeft;

            if ( pos > sliderWidth)
                elem.style.width= '0px';
            else
	            elem.style.left= (posX+pos)+'px';
//document.getElementById("output").innerHTML= elem.style.width+"; "+clipLeft;
    	}
    }
    timeOut=setTimeout('move()', 25);
}

function focusOn(n) {
	running= false;
	var elem= document.getElementById("d"+n);
    opacity(elem, "0.66");
    elem.style.border= borderWidth+"px solid #808080";
    document.getElementById("i"+n).style.visibility="visible";
    document.getElementById("content").style.visibility="hidden";
}

function unfocusOn(n) {
   	running= true;
	var elem= document.getElementById("d"+n);
    opacity(elem, "1.0");
    elem.style.border= "0px";
    document.getElementById("i"+n).style.visibility="hidden";
    document.getElementById("content").style.visibility="visible";
}

function opacity(elem, n)  {
    elem.style.opacity= n;
    elem.style.filter= "alpha(opacity='"+n*100+"')";
}

function findPosX(obj) {
    var curleft = 0;
    if (obj.offsetParent) {
        while (obj.offsetParent) {
            curleft += obj.offsetLeft
            obj = obj.offsetParent;
        }
    } else if (obj.x)
        curleft += obj.x;
    return curleft;
}

function findPosY(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        while (obj.offsetParent) {
            curtop += obj.offsetTop
            obj = obj.offsetParent;
        }
    }
    else if (obj.y)
        curtop += obj.y;
    if (yPosNeedsHack)
        curtop += obj.offsetTop;
    return curtop;
}