var images = [];
var clicked = null;
var selected = null;

function onMouseOverTab(event) {
  var img = document.all ? event.srcElement : event.target;
  if (img.className == "topTab") {
      img.src = '/dion/images/' + img.id + ".png";
  }
}

function onMouseOutTab(event) {
    var img = document.all ? event.srcElement : event.target;
    if (img.className == "topTab" && img != clicked)
        img.src = "/dion/images/blank.gif";
}

function onClickTab(event) {
    var img = document.all ? event.srcElement : event.target;
    if (img.className == "topTab") {
        if (clicked) clicked.src = "/dion/images/blank.gif";
        clicked = img;
        img.src = '/dion/images/' + img.id + ".png";
        loadContent(img.id);
    }
}

function loadContent(id) {
  var content = $("content_for_" + id).innerHTML;
  $("content").innerHTML = content;
}

function preloadTabs() {
    var tabs = $$("#editor img");
    for (var i = 0; i < tabs.length; ++i) {
        var tab = tabs[i];
        if (tab.className == "topTab") {
            img = new Image();
            img.src = '/dion/images/' + tab.id + ".png";
            images.push(img);
        }
    }
}

function showInfo(el) {    
  var lis = el.getElementsByTagName("*");
  $A(lis).each(function(e) {
    if (e.className == 'info') {
      selected = e;
      selected.style.display = 'inline';
    }
  });    
}

function hideInfo(el) {
  if (selected) selected.style.display = 'none';
}


Event.observe(window, 'load', function() {
  preloadTabs(); // load the images
  
  onClickTab({srcElement: $('text'), target: $('text')}); // set tab
  
  Event.observe(document, 'keypress', function(e){
    var code;
    if (!e) var e = window.event;
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    var character = String.fromCharCode(code);
    if (character == 1) {
      onClickTab({srcElement: $('java'), target: $('java')});
    } else if (character == 2) {
      onClickTab({srcElement: $('javascript'), target: $('javascript')});
    } else if (character == 3) {
      onClickTab({srcElement: $('perl'), target: $('perl')});
    } else if (character == 4) {
      onClickTab({srcElement: $('rails'), target: $('rails')});
    } else if (character == 5) {
      onClickTab({srcElement: $('text'), target: $('text')});
    }
  });
});