$(document).ready(function() {

	var colors = ["#ff2e99", "#ff8a2d", "#ffe12a", "#caff2a", "#1fb5ff", "#5931ff", "#b848ff"]

function colorize(text) {
    var colorized = ""
    var bracket_color = ""
    for (i = 0; i < text.length; i++) {
        var index = Math.floor(Math.random()*7)
        if (text[i] == "(")
            bracket_color = colors[index]
    
        color = (bracket_color.length && (text[i] == "(" || text[i] == ")")) ? bracket_color : colors[index]
        colorized = colorized + '<span style="color: '+color+' !important">' + text.charAt(i) + '</span>'
    }
    return colorized
}


    $(".colorize").bind("mouseenter", function(){
        $(this).data("text", $(this).text());
		$(this).html(colorize($(this).text()));
	}).bind("mouseleave", function(){
		$(this).html($(this).data("text"));
	});
	
	
	
	
	$("div#nav li").click(function(){
		
			$("div#nav li").removeClass("active");
			$(this).addClass("active");
		
	 });
	
	
	$("div#nav li:first").addClass("active");


	$("div#nav li.switch-vert").click(function(){
		
		$(this).removeClass("switch-vert").addClass("switch-hoz").html("").html("HOZ");;
		$("body").toggleClass("vertical");


	
    });
	
	$("div#nav li.switch-hoz").click(function(){
		
		$(this).removeClass("switch-hoz").addClass("switch-vert").html("").html("VERT");;
		$("body").toggleClass("vertical");

	
    });
	
	
  

});