/// <reference name="MicrosoftAjax.js"/>

// add rollover effect to the category spheres
Sys.Application.add_load(
    function() {
    	var categoryDetail, categoryDetailBody, categoryInfo, addRollover, removeRollover, addRolloverEffect;
    	categoryDetail = $get("category_detail");
    	categoryDetailBody = $get("category_detail_body");
    	categoryInfo = $get("category_info");

    	addRollover = function(evt) {
    		var divs, detail, desc, img;
    		divs = this.parentNode.getElementsByTagName("div");
    		for (var index = 0; index < divs.length; index++) {
    			var current = divs[index];
    			if (current.className == "text_detail") {
    				detail = current;
    			}
    			else if (divs[index].className == "text_desc") {
    				desc = current;
    			}
    		}
    		img = this.getElementsByTagName("img")[0];
    		if (img.src.indexOf("_roll") === -1) {
    			img.src = img.src.replace(".png", "_roll.png");
    		}
    		categoryDetail.className = this.id;
    		categoryDetailBody.innerHTML = detail.innerHTML;
    		categoryInfo.innerHTML = desc.innerHTML;
    	};

    	removeRollover = function(evt) {
    		var img = this.getElementsByTagName("img")[0];
    		if (img.src.indexOf("_roll") !== -1) {
    			img.src = img.src.replace("_roll", "");
    		}
    	};

    	addRolloverEffect = function(id) {
    		$addHandlers($get(id), { "mouseover": addRollover, "mouseout": removeRollover });
    	};

    	addRolloverEffect("content_provider");
    	addRolloverEffect("language_school");
    	addRolloverEffect("teacher");
    }
);