//Toggle visibility 
function toggle( targetId )
{
    if (document.getElementById)
    {
        //Get the document object
	    target = document.getElementById( targetId );

        //Check if hidden
	    if (target.style.display == "none")
		    target.style.display = ""; //Show object
	    else
    		target.style.display = "none"; //Hide object
	}
}

function change(targetid, newimage)
{
    if(document.getElementById(targetid))
    {
        target = document.getElementById(targetid);
        target.src = newimage;
    }
}

function roundtop(frame, content, framewidth, stylecolor)
{
var w = 100;    
    if(!framewidth.NaN)
        w = framewidth;       
    
    if( document.getElementById(frame) != null && document.getElementById(content) != null )
    {
        var innerhtmlvalue = "<div style='margin-left: auto; margin-right: auto;text-align:center;width: "+(w).toString()+"px;'>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-10).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-6).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-4).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-3).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-2).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-1).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div id='" + content + "' class='"+stylecolor+"' style='width:" + (w).toString() + "px;'>";
        innerhtmlvalue += document.getElementById(content).innerHTML;        
        innerhtmlvalue += "<div style='clear:both;'></div>";
        innerhtmlvalue += "</div></div>";        
        
        document.getElementById(frame).innerHTML = innerhtmlvalue;
    }
}

//creates a rounded frame around content
function round(frame,content, framewidth, stylecolor)
{
    var w = 100;    
    if(!framewidth.NaN)
        w = framewidth;       
    
    if( document.getElementById(frame) != null && document.getElementById(content) != null )
    {
        var innerhtmlvalue = "<div style='margin-left: auto; margin-right: auto;text-align:center;width: "+(w).toString()+"px;'>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-10).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-6).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-4).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-3).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-2).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-1).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div id='" + content + "' class='"+stylecolor+"' style='width:" + (w).toString() + "px;'>";
        innerhtmlvalue += document.getElementById(content).innerHTML;        
        innerhtmlvalue += "<div style='clear:both;'></div>";
        innerhtmlvalue += "</div>";        
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-1).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-2).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-3).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-4).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-6).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-10).toString() + "px;'>&nbsp</div></div>";
        
        
        document.getElementById(frame).innerHTML = innerhtmlvalue;
    }
}

function border(frame, content, framewidth, bordercolor, stylecolor)
{
    var bw = 1;
        
    var w = 100;    
    if(!framewidth.NaN)
        w = framewidth;       
    
    if( document.getElementById(frame) != null && document.getElementById(content) != null )
    {
        var innerhtmlvalue = "<div style='margin:auto;text-align:center;width:"+w.toString()+"px;'>";
        innerhtmlvalue += "<div style='background-color:#"+bordercolor+"; height: "+bw.toString()+"px; width:"+(w-2*bw-6).toString()+"px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='"+stylecolor+"' style='height: 1px; width:"+(w-2*bw-6).toString()+"px; border-left: solid "+bw.toString()+"px #"+bordercolor+"; border-right: solid "+bw.toString()+"px #"+bordercolor+";'>&nbsp</div>";
        innerhtmlvalue += "<div class='"+stylecolor+"' style='height: 1px; width:"+(w-2*bw-4).toString()+"px; border-left: solid "+bw.toString()+"px #"+bordercolor+"; border-right: solid "+bw.toString()+"px #"+bordercolor+";'>&nbsp</div>";
        innerhtmlvalue += "<div class='"+stylecolor+"' style='height: 1px; width:"+(w-2*bw-3).toString()+"px; border-left: solid "+bw.toString()+"px #"+bordercolor+"; border-right: solid "+bw.toString()+"px #"+bordercolor+";'>&nbsp</div>";
        innerhtmlvalue += "<div class='"+stylecolor+"' style='height: 1px; width:"+(w-2*bw-2).toString()+"px; border-left: solid "+bw.toString()+"px #"+bordercolor+"; border-right: solid "+bw.toString()+"px #"+bordercolor+";'>&nbsp</div>";
        innerhtmlvalue += "<div class='"+stylecolor+"' style='height: 1px; width:"+(w-2*bw-1).toString()+"px; border-left: solid "+bw.toString()+"px #"+bordercolor+"; border-right: solid "+bw.toString()+"px #"+bordercolor+";'>&nbsp</div>";
        
        innerhtmlvalue += "<div id='" + content + "' class='"+stylecolor+"' style='width:"+(w-2*bw).toString()+"px; border-left: solid "+bw.toString()+"px #"+bordercolor+"; border-right: solid "+bw.toString()+"px #"+bordercolor+";'>";
        innerhtmlvalue += document.getElementById(content).innerHTML;        
        innerhtmlvalue += "<div style='clear:both;'></div>";
        innerhtmlvalue += "</div>";  
        
        innerhtmlvalue += "<div class='"+stylecolor+"' style='height: 1px; width:"+(w-2*bw-1).toString()+"px; border-left: solid "+bw.toString()+"px #"+bordercolor+"; border-right: solid "+bw.toString()+"px #"+bordercolor+";'>&nbsp</div>";
        innerhtmlvalue += "<div class='"+stylecolor+"' style='height: 1px; width:"+(w-2*bw-2).toString()+"px; border-left: solid "+bw.toString()+"px #"+bordercolor+"; border-right: solid "+bw.toString()+"px #"+bordercolor+";'>&nbsp</div>";
        innerhtmlvalue += "<div class='"+stylecolor+"' style='height: 1px; width:"+(w-2*bw-3).toString()+"px; border-left: solid "+bw.toString()+"px #"+bordercolor+"; border-right: solid "+bw.toString()+"px #"+bordercolor+";'>&nbsp</div>";
        innerhtmlvalue += "<div class='"+stylecolor+"' style='height: 1px; width:"+(w-2*bw-4).toString()+"px; border-left: solid "+bw.toString()+"px #"+bordercolor+"; border-right: solid "+bw.toString()+"px #"+bordercolor+";'>&nbsp</div>";
        innerhtmlvalue += "<div class='"+stylecolor+"' style='height: 1px; width:"+(w-2*bw-6).toString()+"px; border-left: solid "+bw.toString()+"px #"+bordercolor+"; border-right: solid "+bw.toString()+"px #"+bordercolor+";'>&nbsp</div>";
        innerhtmlvalue += "<div style='background-color:#"+bordercolor+"; height: "+bw.toString()+"px; width:"+(w-2*bw-6).toString()+"px;'>&nbsp</div>";
        
        innerhtmlvalue += "</div>";
        document.getElementById(frame).innerHTML = innerhtmlvalue;
    }
}

function roundbottom (frame, content, framewidth, stylecolor)
{
    var w = 100;    
    if(!framewidth.NaN)
        w = framewidth;       
    
    if( document.getElementById(frame) != null && document.getElementById(content) != null )
    {
        var innerhtmlvalue = "<div style='margin-left: auto; margin-right: auto;text-align:center;width: "+(w).toString()+"px;'>";
        innerhtmlvalue += "<div id='" + content + "' class='"+stylecolor+"' style='width:" + (w).toString() + "px;'>";
        innerhtmlvalue += document.getElementById(content).innerHTML;        
        innerhtmlvalue += "<div style='clear:both;'></div>";
        innerhtmlvalue += "</div>";        
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-1).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-2).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-3).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-4).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-6).toString() + "px;'>&nbsp</div>";
        innerhtmlvalue += "<div class='line "+stylecolor+"' style='width:" + (w-10).toString() + "px;'>&nbsp</div></div>";
        
        
        document.getElementById(frame).innerHTML = innerhtmlvalue;
    }
}

//puts a border around the round frame
function roundwborder(frame,content, framewidth, color, colorb)
{       
    var w = 88;
    if(!framewidth.NaN)
        w = framewidth - 12;         
    round(frame,content, w, color);    
    round(frame,frame,(w+12).toString(),colorb);
}

function loaddivs()
{
    round('hf', 'h', '700', 'grey');
    roundbottom('ff','f','700','grey');
    roundtop('mf','m','700','white');
}