var sBoxSet = new Array()
var nextBox = 0;

function sBox(Height,Width,PicBox,TranBox)
{
    this.height = Height;
    this.width = Width;
    this.picBox = PicBox;
    this.tranBox = TranBox;
}

function addSBox(Y,X,Main,Trans)
{
    sBoxSet[sBoxSet.length] = new sBox(Y,X,Main,Trans);
}

var imageSet = new Array()
var nextImage = 0;
function addImageToSet(path)
{
    imageSet[imageSet.length] = path;
}

function initSBoxes()
{
    for(bi=0;bi<sBoxSet.length;bi++)
    {
        sBoxSet[bi].picBox.style.backgroundImage = 'url(' + imageSet[nextImage] + ')';
        nextImage++;
    }
    
    setInterval('executeTransition(transitionType)',1500) //This is the interval for the animation in milliseconds
    
}
var boxSize = 0;

function incrementBox()
{
    if(nextBox + 1 != sBoxSet.length)
    {
        nextBox++;
    }
    else
    {
        nextBox = 0;
    }
}
function incrementImg()
{
    if(nextImage + 1 !=imageSet.length)
    {
        nextImage++;
    }
    else
    {
        nextImage = 0;
    }
    
}

var transitionType = 1

function incremenentTransition()
{
    if(transitionType < 4)
    {
        transitionType++;
    }
    else
    {
        transitionType = 1;
    }
}


function executeTransition(type)
{    
    boxSize = 0;
    
    switch(type)
    {
    case 1:
        sBoxSet[nextBox].tranBox.style.height = '0px';
        sBoxSet[nextBox].tranBox.style.backgroundImage = 'url(' + imageSet[nextImage] + ')';
        wipeUp(sBoxSet[nextBox]);
        break;
    case 2:
        sBoxSet[nextBox].tranBox.style.height = '0px';
        sBoxSet[nextBox].tranBox.style.backgroundImage = 'url(' + imageSet[nextImage] + ')';    
        wipeDown(sBoxSet[nextBox]);
        break;
    case 3:
        sBoxSet[nextBox].tranBox.style.width = '0px';
        sBoxSet[nextBox].tranBox.style.backgroundImage = 'url(' + imageSet[nextImage] + ')';
        wipeLeft(sBoxSet[nextBox]);
        break;
    case 4:
        sBoxSet[nextBox].tranBox.style.width = '0px';
        sBoxSet[nextBox].tranBox.style.backgroundImage = 'url(' + imageSet[nextImage] + ')';
        wipeRight(sBoxSet[nextBox]);
        break;
    default:
        alert('no type');
    }
    
    incremenentTransition();
  
}


function wipeDown(box)
{
    setTimeout("wDStep(sBoxSet[nextBox])", 5);     
}
function wDStep(Box)
{
    if(boxSize + 5 <= sBoxSet[nextBox].height)
	{
    	boxSize = boxSize + 5;
	}
	else
	{
		boxSize = sBoxSet[nextBox].height;
	}
    Box.tranBox.style.height = boxSize + 'px';
    if(boxSize < Box.height)
    {
        wipeDown(Box);
    }
    else
    {
        incrementBox();
        incrementImg();
        Box.picBox.style.backgroundImage = Box.tranBox.style.backgroundImage;
    }
}


function wipeUp(box)
{
    setTimeout("wUStep(sBoxSet[nextBox])",5);
}
function wUStep(Box)
{
    if(boxSize + 5 <= sBoxSet[nextBox].height)
	{
    	boxSize = boxSize + 5;
	}
	else
	{
		boxSize = sBoxSet[nextBox].height;
	}
    Box.tranBox.style.top = getYOffset(Box.picBox) + Box.height - boxSize + "px";
    Box.tranBox.style.height = boxSize + 'px';
    if(boxSize < Box.height)
    {
        wipeUp(Box)
    }
    else
    {
        incrementBox();
        incrementImg();
        Box.picBox.style.backgroundImage = Box.tranBox.style.backgroundImage;
    }
}

function wipeLeft(box)
{
    setTimeout("wLStep(sBoxSet[nextBox])",5);
}

function wLStep(Box)
{
    if(boxSize + 5 <= sBoxSet[nextBox].width)
	{
    	boxSize = boxSize + 5;
	}
	else
	{
		boxSize = sBoxSet[nextBox].width;
	}
    Box.tranBox.style.width = boxSize + 'px';
    if(boxSize < Box.width)
    {
        wipeLeft(Box);
    }
    else
    {
        incrementBox();
        incrementImg();
        Box.picBox.style.backgroundImage = Box.tranBox.style.backgroundImage;
    }
}

function wipeRight(box)
{
    setTimeout("wRStep(sBoxSet[nextBox])",5);
}
function wRStep(Box)
{
	if(boxSize + 5 <= sBoxSet[nextBox].width)
	{
    	boxSize = boxSize + 5;
	}
	else
	{
		boxSize = sBoxSet[nextBox].width;
	}
	Box.tranBox.style.left = getXOffset(Box.picBox) + Box.width - boxSize + "px";
    Box.tranBox.style.width = boxSize + 'px';
    if(boxSize < Box.width)
    {
        wipeRight(Box)
    }
    else
    {
        incrementBox();
        incrementImg();
        Box.picBox.style.backgroundImage = Box.tranBox.style.backgroundImage;
    }
}


function getXOffset(obj){
    var topValue= 0,leftValue= 0;
    while(obj){
	leftValue+= obj.offsetLeft;
	topValue+= obj.offsetTop;
	obj= obj.offsetParent;
    }    
    return leftValue;
}
function getYOffset(obj)
{
    var topValue = 0, leftValue = 0;
    while(obj){
        leftValue += obj.offsetLeft;
        topValue+= obj.offsetTop
        obj=obj.offsetParent;
    }
    return topValue;
}