var time=50;

function boxClose (elemToClose, originTop, originLeft) {
    var verticalDirection='up';
    var horizontalDirection='right';
    var elem=document.getElementById(elemToClose);
    elem.innerHTML='';
    var width=elem.style.width;
    var height=elem.style.width;
    var top=elem.style.top;
    width=width.replace(/px/,"");
    height=height.replace(/px/,"");
    top=top.replace(/px/,"");
    top=top.replace(/pt/,"");
    var left=elem.style.left;
    left=left.replace(/px/,"");
    left=left.replace(/pt/,"");
    left=Math.abs(left);
    width=Math.abs(width);
    // find distance to origin
    var verticalDistance=top-originTop;
    if(verticalDistance < 0) {
        // it's a negative number
        verticalDirection='down';
    }
    verticalDistance=Math.abs(verticalDistance);
    // now look for vertical distance to origin
    var horizontalDistance=left-originLeft;
    if(horizontalDistance < 0) {
        // it's a negative number
        horizontalDirection='left';
    }
    horizontalDistance=Math.abs(horizontalDistance);
    // myAlert("Left: "+left+" and top: "+top);
    height=Math.abs(height);
    top=Math.abs(top);
    var time=50;
    elem.style.border="1px dashed #bbbbbb";
    while(width > 1) {
        time=time+50;
        width=width/2;
        height=height/2;
        verticalDistance=verticalDistance/2;
        horizontalDistance=horizontalDistance/2;
        if(verticalDirection=='down') {
            top=top+verticalDistance;
        } else {
            top=top-verticalDistance;
        }
        if(horizontalDirection=='left') {
            left=left+horizontalDistance;
        } else {
            left=left-horizontalDistance;
        }
        setTimeout('elementEffect("'+elemToClose+'", "width", "'+width+'")', time);
        setTimeout('elementEffect("'+elemToClose+'", "height", "'+height+'")', time);
        setTimeout('elementEffect("'+elemToClose+'", "left", "'+left+'")', time);
        setTimeout('elementEffect("'+elemToClose+'", "top", "'+top+'")', time);
    }
    setTimeout('clearStyle("'+elemToClose+'")', time);
    // setTimeout( function() { document.getElementById('open_box').innerHTML=''; /*alert('we closed the box');*/}, time);
    setTimeout( function() { clearBoxStatus(elemToClose); /*alert('we closed the box');*/}, time);
}

function clearStyle(elemToClear) {
    // get rid of borders, etc in an element
    var elem=document.getElementById(elemToClear);
    elem.style.display='none';
}

function myAlert(value) {
    document.getElementById('debug').innerHTML=value;
}

function elementEffect(element, attribute, position) {
    // I wish I knew variable variables in js
    var eToStyle=document.getElementById(element);
    if(attribute=='width') {
        document.getElementById(element).style.width=position;
    }
    if(attribute=='height') {
        document.getElementById(element).style.height=position;
    }

    if(attribute=='left') {
        document.getElementById(element).style.left=position;
    }

    if(attribute=='top') {
        document.getElementById(element).style.top=position;
    }
}

/*
var RollIt = {
    timeout : null,
    showPopup : function(){
        clearTimeout(this.timeout);
        if($('rollit').style.display == 'none'){
            this.timeout = setTimeout(function(){new Effect.BlindDown('rollit', {duration:.3, fps:40})},400);
        }
    },
    hidePopup : function(){
        if($('rollit').style.display == 'none'){
            clearTimeout(this.timeout);
        }else{
            this.timeout = setTimeout(function(){new Effect.BlindUp('rollit', {duration:.3, fps:40})},300);
        }
    }
}
*/

/*
function checkWhereTo(alertString, e) {
    alert(alertString);
    // and 'e' stands for event 
    // if no event we must be using exploder, define e as window.event.
    if (!e) var e = window.event;
    var relTarg = e.relatedTarget || e.toElement;
    myAlert(relTarg.id);
    return (relTarg.id);
}
*/

function you_really_suck (info) {
    var stuffs=document.getElementById(info);
    alert(info);
}

function testAction(elemName, e, triggerSize) {
    if (!e) var e = window.event;
    var tg = (window.event) ? e.srcElement : e.target;
    if (tg.nodeName != 'DIV') return (0);
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;

    while (reltg != tg && reltg.nodeName != 'BODY') {
        reltg= reltg.parentNode
	}
    if (reltg== tg) return (0);
    // Mouseout took place when mouse actually left layer
    // alert('you moused out?');
    // Handle event
    // see if it's too small to close
    var currentWidth=elemName.style.width;
    currentWidth=currentWidth.replace(/px/,"");
    currentWidth=Math.abs(currentWidth);
    // NOW test it against triggersize
    if(currentWidth < triggerSize) {
        // alert('nope! current is '+currentWidth+' and trigger is '+triggerSize);
        return (0);
    }
    return (1);
}
function testCloseWindow(retValue, elemToClose) {
    if(retValue==1) {
        var originTop=document.getElementById('coordinates_y').innerHTML;
        var originLeft=document.getElementById('coordinates_x').innerHTML;
        var openTimeout=null;
        openTimeout=setTimeout (function() { boxClose(elemToClose, originTop, originLeft); /*alert('closed in testCloseWindow');*/} , 1);
        document.getElementById(elemToClose).onmouseover=function() {clearTimeout(openTimeout);};
    } 
}

function bubChuck(e) {
    // not used but holds too much sentimental value to delete
    if (!e) var e = window.event;
    e.cancelBubble = true;
}

function find_open_box(thisBox) {
    // this is a a separate function so that someday we can dispense with holding coordinates in html
    if(document.getElementById('open_box').innerHTML != '' && document.getElementById('open_box').innerHTML !=thisBox) {
	    // You have an open box and it is different from the one you want to open 
        return 1;
    } else if (document.getElementById('open_box').innerHTML == thisBox) {
        // You are mousing over the area that opens the same box that's already open
        // alert('2');
        return 2;
    } else {
        // You have no boxes open at all
        return 0;
    }
}

function myBoxGrow(contentToDisplay, elemToGrow, maxWidth, maxHeight, originTop, originLeft, verticalDirection, horizontalDirection) {
    // take the mouseover from the originiating element so it doesn't cause a bunch of hiccups
    // javascript sucsk so bad. It can't handle the line break in this variable data.
    // var info='ElemToGrow: '+elemToGrow+' <br>maxWidth: '+maxWidth+' <br>maxHeight: '+maxHeight+' <br>originTop: '+originTop+' <br>originLeft: '+originLeft+' <br>verticalDirection: '+verticalDirection+' <br>horizontalDirection: '+horizontalDirection+' <br> and that is that';
    // alert(info);
    // myAlert(info);

    // this is so sad, but I don't know how to write variables from one function to another in JavaScript
    // find out if we have another open box

    var open_box=find_open_box(elemToGrow);
    if(open_box==1) {
        // we have another box open
        var boxToClose=document.getElementById('open_box').innerHTML;
		// debug // alert('closing '+boxToClose);
        testCloseWindow('1', boxToClose);
    }
    if(open_box ==1 || open_box==0) {
	    document.getElementById('coordinates_y').innerHTML=originTop;
	    document.getElementById('coordinates_x').innerHTML=originLeft;
	    document.getElementById('open_box').innerHTML=elemToGrow;
	    // this would work
        // but my php png transparency script for ie 6 doesn't work with it
        // document.getElementById(elemToGrow).style.background='url(graphics/backgrounds/background_a.png)';
        // tried something like this but it didn't work either
        // document.getElementById('debug').style.filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='graphics/backgrounds/background_a.png');
	    var toOpen=setTimeout (function() { boxGrow(contentToDisplay, elemToGrow, maxWidth, maxHeight, originTop, originLeft, verticalDirection, horizontalDirection); } , 1);
	    var toClose=setTimeout (function() { testCloseWindow('1', elemToGrow); }, 10000);
	    document.getElementById(elemToGrow).onmouseover=function() {clearTimeout(toClose);};
    }
    // alert(open_box);

}

function boxGrow (contentToDisplay, elemToGrow, maxWidth, maxHeight, originTop, originLeft, verticalDirection, horizontalDirection) {
    var height     =  1;
    var width      =  1;
    var maxArea=maxWidth*maxHeight;
    var curArea=height*width;
    var increment  =  40;
    var moveInc=increment/2;
    var vertMoveIncUp=moveInc;
    var vertMoveIncDown=1;
    var elem=document.getElementById(elemToGrow);
    var left       =  Math.abs(originLeft);
    var top        =  Math.abs(originTop);
    elem.style.display =  'block';
    elem.style.top =  originTop;
    elem.style.left=  originLeft;
    elem.style.border='1px solid black';
    // debug // myAlert(curArea+' and '+maxArea);
    while(curArea < maxArea) {
        // stretch the box
        time=time+2;
        if(height < maxHeight) {
            height=height+increment;
            // set height
            setTimeout('elementEffect("'+elemToGrow+'", "height", "'+height+'")', time);
            // move the element over according to its height
            if(verticalDirection=='up') {
                var moveToTop=Math.abs(top-vertMoveIncUp);
            } else if(verticalDirection=='down') {
                var moveToTop=Math.abs(top+vertMoveIncDown);
            } else {
                var moveToTop=top;
            }
            setTimeout('elementEffect("'+elemToGrow+'", "top", "'+moveToTop+'")', time);
            top=moveToTop;
        }
        if(width < maxWidth) {
            // set width
            width=width+increment;
            setTimeout('elementEffect("'+elemToGrow+'", "width", "'+width+'")', time);
            // move the element over according to its width
            if(horizontalDirection=='right') {
                var moveToLeft=Math.abs(left+moveInc);
            } else if(horizontalDirection=='left') {
                var leftMove=increment*1.5;
                var moveToLeft=Math.abs(left-leftMove);
            } else {
                var moveToLeft=Math.abs(left-moveInc);
            }
            // setTimeout('myAlert("'+left+'")', time);
            setTimeout('elementEffect("'+elemToGrow+'", "left", "'+left+'")', time);
            left=moveToLeft;
        }
        curArea=width*height;
    }
    setTimeout('loadContent(\''+contentToDisplay+'\', \''+elemToGrow+'\')', time);
}

function bubAlert() {
	alert('click!');
	/* event.cancelBubble=true; */
}

function clearBoxStatus(elem) {
    // store data in div sections
    var oldHTML=document.getElementById('open_box').innerHTML;
    var newHTML=elem;
    // only change the stuff if it is already the same
    if(oldHTML == newHTML) {
        // alert('changing');
        document.getElementById('coordinates_y').innerHTML='';
        document.getElementById('coordinates_x').innerHTML='';
        document.getElementById('open_box').innerHTML='';
    }
}

function loadContent(from, to) {
    document.getElementById(to).innerHTML=document.getElementById(from).innerHTML; 
	var myh='<a href="http://www.google.com">hello!</a><br><a href="http://www.google.com">hello!</a><br><a href="http://www.google.com">hello!</a><br><a href="http://www.google.com">hello!</a><br>';
    /* document.getElementById(to).innerHTML=myh; */
}