Event.observe(window,'load',initBoxes,false);

function initBoxes(){

if ($('mainPage')){
  activate('security');
  drawBars('oanda', '1');
  drawBars('broker1', '6');
  drawBars('broker2', '12');
  drawBars('bank', '35');
}
}

function drawBars(id, number){
var orange = "orange";
var white = "white";

for (var i=0; i<number; i++){
  document.getElementById(id).innerHTML += "<div class="+orange+"><!-- --></div>";  
  document.getElementById(id).innerHTML += "<div class="+white+"><!-- --></div>";
}
}


function activate(id){

    var imgObjects = new Array('security','reliable', 'convenience');
    var txtObjects = new Array('security1','reliable1', 'convenience1');
    var buttonText = new Array('Security','Reliable Service', 'Convenience');
    
    for (var i=0; i<imgObjects.length; i++){
        document.getElementById(imgObjects[i]).setAttribute("class", "rollButtonInactiveImage"); 
        document.getElementById(txtObjects[i]).setAttribute("class", "rollButtonInactive"); 
        document.getElementById(imgObjects[i]).setAttribute("className", "rollButtonInactiveImage"); 
        document.getElementById(txtObjects[i]).setAttribute("className", "rollButtonInactive"); 
        document.getElementById(txtObjects[i]).innerHTML = "<div style='float:left; padding:4px;' >" + buttonText[i] + "</div>";
        document.getElementById(imgObjects[i]+"Text").style.display = "none";
    }
    
    document.getElementById(id).setAttribute("class", "rollButtonActiveImage"); 
    document.getElementById(id+"1").setAttribute("class", "rollButtonActive"); 
    document.getElementById(id).setAttribute("className", "rollButtonActiveImage"); 
    document.getElementById(id+"1").setAttribute("className", "rollButtonActive"); 
    document.getElementById(id+"Text").style.display = "";
    
    var text;
    
    if(id=="security"){ text = buttonText[0]; }
    else if(id=="reliable"){ text = buttonText[1]; }
    else if(id=="convenience"){ text = buttonText[2]; }
    document.getElementById(id+"1").innerHTML = "<div style='float:left; padding:4px;'>" + text + "</div><div style='float:right; padding:8px;'><img src='/fileadmin/images/fxgt/homepage/arrow_white.gif' /></div>";
}

function lightbox_closebutton(obj,state) {
    if (state == 'on') {
        obj.className = 'LIGHTBOX_CLOSEBUTTON_ON';
    } else if (state == 'off') {
        obj.className = 'LIGHTBOX_CLOSEBUTTON_OFF';
    } else if (state == 'close') {
        $('LANG_LIGHTBOX').style.display = 'none';
        $('LOGIN_LIGHTBOX').style.display = 'none';
        $('overlay').style.display = 'none';
    }
}

function button(obj,state) {
	
	var btn_left = $(obj).select('.BUTTON_LEFT')[0];
	var btn_middle = $(obj).select('.BUTTON_MIDDLE')[0];
	var btn_right = $(obj).select('.BUTTON_RIGHT')[0];
	var btn_text = $(obj).select('.BUTTON_TEXT')[0];
	var btn_link = $(btn_text).getElementsByTagName('a')[0];
	
	if ( state == 'on') {
		$(btn_left).className = 'BUTTON_LEFT BUTTON_LEFT_ON';
		$(btn_middle).className = 'BUTTON_MIDDLE BUTTON_MIDDLE_ON';
		$(btn_right).removeClassName('BUTTON_RIGHT_OFF'); $(btn_right).addClassName('BUTTON_RIGHT_ON');
		$(btn_text).className = 'BUTTON_TEXT BUTTON_TEXT_ON';
		
		
	} else if ( state == 'off' ) {
		$(btn_left).className = 'BUTTON_LEFT BUTTON_LEFT_OFF';
		$(btn_middle).className = 'BUTTON_MIDDLE BUTTON_MIDDLE_OFF';
		$(btn_right).removeClassName('BUTTON_RIGHT_ON'); $(btn_right).addClassName('BUTTON_RIGHT_OFF');
		$(btn_text).className = 'BUTTON_TEXT BUTTON_TEXT_OFF';
	}
}