//function opacity(id, opacStart, opacEnd, millisec) {
//    //speed for each frame
//    var speed = Math.round(millisec / 100);
//    var timer = 0;

//    //determine the direction for the blending, if start and end are the same nothing happens
//    if(opacStart > opacEnd) {
//        for(i = opacStart; i >= opacEnd; i--) {
//            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
//            timer++;
//        }
//    } else if(opacStart < opacEnd) {
//        for(i = opacStart; i <= opacEnd; i++)
//            {
//            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
//            timer++;
//        }
//    }
//}

//change the opacity for different browsers
function changeOpac(opacity, id,autoblend) {
    if (autoblend && !doAutoBlend)
        return;
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
} 

function shiftOpacity(id, millisec) {
    //if an element is invisible, make it visible, else make it ivisible
    if(document.getElementById(id).style.opacity == 0) {
        opacity(id, 0, 100, millisec);
    } else {
        opacity(id, 100, 0, millisec);
    }
} 

function blendimage(divid, imageid, imagefile, millisec) {
if (!doAutoBlend)
return;
    var speed = Math.round(millisec / 100);
    var timer = 0;
    
    //set the current image as background
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
     //make image transparent
   setTimeout("changeOpac(0, '"+imageid+"',true)",500);
   setTimeout("doImageBlend('"+divid +"', '" +imageid +"', '" +imagefile +"', " +millisec +")",1000);
}

function SetBlendControlText(divid, text, autoBlendOnly) {
 if (autoBlendOnly && !doAutoBlend)
 return;
    //set the current image as background
    var x = document.getElementById(divid+"Display");//.InnerHtml = text;
    if (x == null)
        alert("Schade " +divid.id+"Display");
          if (x.firstChild == null)
        alert("firstchild " +divid+"Display");
    x.firstChild.nodeValue = text;
    //var Ausrichtung = document.createAttribute("id");
//Ausrichtung.nodeValue = divid+"Display";

//x.setAttributeNode(Ausrichtung);
   
}


function doImageBlend(divid,imageid,imagefile,millisec) {
   var speed = Math.round(millisec / 100);
    var timer = 0;
    
    //if (document.getElementById(imageid).style.opacity != 0)
    //alert('dfsadfasdkfljfkle: ' +document.getElementById(imageid).style.opacity);
    
  // changeOpac(0, imageid,true);
    //make new image
    document.getElementById(imageid).src = imagefile;

    //fade in image
    for(i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "',true)",(timer * speed));
        timer++;
    }
}

//function currentOpac(id, opacEnd, millisec) {
//    //standard opacity is 100
//    var currentOpac = 100;
//    
//    //if the element has an opacity set, get it
//    if(document.getElementById(id).style.opacity < 100) {
//        currentOpac = document.getElementById(id).style.opacity * 100;
//    }

//    //call for the function that changes the opacity
//    opacity(id, currentOpac, opacEnd, millisec)
//} 


// automatic blending will be done as long as doAutoBlend is true
var doAutoBlend = true;
var image1;
var image2;
var image3;
var image4;

function clickLeft(imageid,dividControl)
    {
    doAutoBlend = false;
    var imagefile;
    var imageText;
    var oldimagefile = document.getElementById(imageid).src;
    if (oldimagefile.search(image1) != -1)
    {
        if (image4 == null)
        {
            imagefile = image3;
            imageText = "3 / 3";
        }
        else
        {
            imagefile = image4;
            imageText = "4 / 4";

        }
    }
    else if (oldimagefile.search(image2) != -1)
    {
        imagefile = image1;
        if (image4 == null)
        {
            imageText = "1 / 3";
        }
        else
        {
            imageText = "1 / 4";
        }
    }
    else if (oldimagefile.search(image3) != -1)
    {
        imagefile = image2;
        if (image4 == null)
        {
            imageText = "2 / 3";
        }
        else
        {
            imageText = "2 / 4";
        }
         
    }
       else if (oldimagefile.search(image4) != -1)
    {
        imagefile = image3;
              imageText = "3 / 4";
    }
    document.getElementById(imageid).src = imagefile;
    changeOpac(100, imageid,false);
  SetBlendControlText(dividControl,imageText,false);
    }
    
    function clickRight(imageid,dividControl)
    {
    doAutoBlend = false;
    var imagefile;
        var imageText;

    var oldimagefile = document.getElementById(imageid).src;
    if (oldimagefile.search(image1) != -1)
    {
        imagefile = image2;
        if (image4 == null)
            imageText = "2 / 3";
        else
            imageText = "2 / 4";
    }
    else if (oldimagefile.search(image2) != -1)
    {
        if (image4 == null)
            imageText = "3 / 3";
        else
            imageText = "3 / 4";
        imagefile = image3;
    }
      else if (oldimagefile.search(image3) != -1)
    {
        if (image4 == null)
        {
            imageText = "1 / 3";
            imagefile = image1;
        }
        else
        {
            imageText = "4 / 4";
            imagefile = image4;
        }
        
    }
    else if (oldimagefile.search(image4) != -1)
    {
    
            imageText = "1 / 4";
        imagefile = image1;
        }
    document.getElementById(imageid).src = imagefile;
    changeOpac(100, imageid,false);
      SetBlendControlText(dividControl,imageText,false);

    }
    
function runBlendLoop(divid, imageid, imagefile1, imagefile2, imagefile3,dividControl,millisec) {
    
    var i = 4000;
        image1 = imagefile1;
        image2 = imagefile2;
        image3 = imagefile3;
        image4 = null;
        setTimeout("SetBlendControlText('"+dividControl +"','1 / 3', true);",(1000));
		blendimage(divid, imageid, imagefile1, millisec);
		setTimeout("SetBlendControlText('"+dividControl +"','2 / 3',true);",(millisec+i+1000+1000));
		setTimeout("blendimage('"+divid +"', '" +imageid +"', '" +imagefile2 +"', " +millisec +")",(millisec+i+1000));
		setTimeout("SetBlendControlText('"+dividControl+"','3 / 3',true);",(2*millisec+2*i+1000+2000));
		setTimeout("blendimage('"+divid +"', '" +imageid +"', '" +imagefile3 +"', " +millisec +")",(2*millisec+2*i+2000));
		if (doAutoBlend)
		{
		    setTimeout("runBlendLoop('"+divid +"', '" +imageid +"', '" +imagefile1 +"', '"+imagefile2  +"', '"+imagefile3+"', '"+dividControl+ "',"  +millisec +")",(3*millisec+3*i+3000));
	    }
		
    }
    
        function runBlendLoop4(divid, imageid, imagefile1, imagefile2, imagefile3,imagefile4,dividControl,millisec) {
    
    var i = 4000;
        image1 = imagefile1;
        image2 = imagefile2;
        image3 = imagefile3;
        image4 = imagefile4;
        setTimeout("SetBlendControlText('"+dividControl +"','1 / 4', true);",(1000));
		blendimage(divid, imageid, imagefile1, millisec);
		
		setTimeout("SetBlendControlText('"+dividControl +"','2 / 4',true);",(millisec+i+1000+1000));
		setTimeout("blendimage('"+divid +"', '" +imageid +"', '" +imagefile2 +"', " +millisec +")",(millisec+i+1000));
		
		setTimeout("SetBlendControlText('"+dividControl+"','3 / 4',true);",(2*millisec+2*i+1000+2000));
		setTimeout("blendimage('"+divid +"', '" +imageid +"', '" +imagefile3 +"', " +millisec +")",(2*millisec+2*i+2000));
		
		setTimeout("SetBlendControlText('"+dividControl+"','4 / 4',true);",(3*millisec+3*i+1000+3000));
		setTimeout("blendimage('"+divid +"', '" +imageid +"', '" +imagefile4 +"', " +millisec +")",(3*millisec+3*i+3000));

		if (doAutoBlend)
		{
		    setTimeout("runBlendLoop4('"+divid +"', '" +imageid +"', '" +imagefile1 +"', '"+imagefile2  +"', '"+imagefile3+"', '"+imagefile4+"', '" +dividControl+ "',"  +millisec +")",(4*millisec+4*i+3000));
	    }
		
    }