window.onload = function () { var R = Raphael("paper", 200, 200); var z = Raphael("canvas", 525, 275); var circle1 = {stroke: "#25aae1","stroke-width": 4,"stroke-linejoin": "round"}; var circle2 = {stroke: "#25aae1","stroke-width": .5,"stroke-linejoin": "round"}; var circle3 = {stroke: "#25aae1","stroke-width": 1,"stroke-linejoin": "round"}; var bl1 = {stroke: "#25aae1","stroke-width": 2,"stroke-linejoin": "round"}; var bl2 = {stroke: "#25aae1","stroke-width": 1,"stroke-linejoin": "round"}; var bl3 = {stroke: "#25aae1","stroke-width": .5,"stroke-linejoin": "round"}; var bl4 = {stroke: "#25aae1","stroke-width": 3,"stroke-linejoin": "round"}; var bl5 = {stroke: "#25aae1","stroke-width": 1,"stroke-linejoin": "round"}; var bl6 = {stroke: "#25aae1","stroke-width": .5,"stroke-linejoin": "round"}; var bl7 = {stroke: "#25aae1","stroke-width": 1,"stroke-linejoin": "round"}; var s = R.set(); var w = z.set(); //Block 1 - 2px - 003a7a s.push(R.path("M112.113,43.563l6.65-30.725c0,0,33.473,5.464,54.645,35.861c0.141,0.199-28.016,16.167-28.088,16.082C130.939,46.498,112.113,43.563,112.113,43.563z").attr(bl1)); //Block 2 - 1px - 0056a8 s.push(R.path("M145.486,114.473l32.727,12.658c0,0,14.131-29.867-6.483-69.154c-0.146,0.07-26.494,12.739-32.201,15.122C152.562,94.331,145.486,114.473,145.486,114.473z").attr(bl2)); //Block 3 - .5px - 127dc2 s.push(R.path("M98.553,141.871c0,0,28.701,2.213,40.969-25.16c0.027-0.059,45.547,18.435,45.547,18.435s-19.879,52.315-84.518,53.922C100.045,189.078,98.553,141.871,98.553,141.871z").attr(bl3)); //Block 4 - 3px - 1990cf s.push(R.path("M53.958,111.453c0,0,9.793,38.869,53.996,35.719c0.861-0.063,4.61,34.135,4.61,34.135s-68.048,10.511-91.319-57.979C21.184,123.145,53.958,111.453,53.958,111.453z").attr(bl4)); //Block 5 - 1px - 00aeef s.push(R.path("M65.128,73.968c0,0-16.352,21.073-2.383,48.014c0.07,0.146-39.133,21.356-39.133,21.356s-30.481-40.828,0.223-92.715C23.933,50.465,65.128,73.968,65.128,73.968z").attr(bl5)); //Block 6 - .5px - 16c1f3 s.push(R.path("M87.445,42.762c0,0-25.991,5.438-38.457,29.904c-0.08,0.152-24.468-12.472-24.468-12.472S38.1,25.943,82.294,16.167L87.445,42.762z").attr(bl6)); //Block 7 - 1px - 6ecff6 s.push(R.path("M115.723,53.616c0,0,11.854-45.659,11.59-45.24c-16.059-5.073-41.703-4.098-55.418,1.527c-0.081,0.614,11.816,43.516,11.725,44.239C97.306,47.026,115.723,53.616,115.723,53.616z").attr(bl7)); //#26A9E0 - large circle - 1px - 25aae1 s.push(R.circle(100, 100, 53).attr(circle3)); //#D6DE23 - second cirlce - .5px - 25aae1 - fill d7df21 s.push(R.circle(100, 100, 36).attr(circle2)); //#8BC53F - center circle - 4px - 25aae1 - fill 8dc63f s.push(R.circle(100, 100, 24).attr(circle1)); s.animate({rotation: "360 100 100"}, 3000,function () { //bl1 s[0].toFront(); w.push(z.text(343, 53, "ECONOMIC\nDEVELOPMENT").attr({font: "bold 12px 'Cantarell',arial,serif", fill: "#FFFFFF", "text-anchor": "start"}).animate({fill: "#003a7a"}, 1000)); s[0].attr({fill: "#FFF"}).animate({fill: "#003a7a",stroke: "#003a7a"}, 1000,function () { //lbl2 w.push(z.text(364, 142, "MARKETING").attr({font: "bold 12px 'Cantarell',arial,serif", fill: "#FFFFFF", "text-anchor": "start"}).animate({fill: "#0056a8"}, 1000)); s[1].attr({fill: "#FFF"}).animate({fill: "#0056a8",stroke: "#0056a8"}, 1000,function () { //bl3 w.push(z.text(335, 232, "PLANNING").attr({font: "bold 12px 'Cantarell',arial,serif", fill: "#FFFFFF", "text-anchor": "start"}).animate({fill: "#127dc2"}, 1000)); s[2].attr({fill: "#FFF"}).animate({fill: "#127dc2",stroke: "#127dc2"}, 1000,function () { //bl4 w.push(z.text(105, 222, "RESEARCH").attr({font: "bold 12px 'Cantarell',arial,serif", fill: "#FFFFFF", "text-anchor": "start"}).animate({fill: "#1990cf"}, 1000)); s[3].toFront(); s[7].toFront(); s[3].attr({fill: "#FFF"}).animate({fill: "#1990cf",stroke: "#1990cf"}, 1000,function () { //bl5 w.push(z.text(65, 137, "STRATEGY").attr({font: "bold 12px 'Cantarell',arial,serif", fill: "#FFFFFF", "text-anchor": "start"}).animate({fill: "#00aeef"}, 1000)); s[4].attr({fill: "#FFF",stroke: "#00aeef"}).animate({fill: "#00aeef"}, 1000,function () { //bl6 w.push(z.text(90, 50, "INTERNATIONAL").attr({font: "bold 12px 'Cantarell',arial,serif", fill: "#FFFFFF", "text-anchor": "start"}).animate({fill: "#16c1f3"}, 1000)); s[5].attr({fill: "#FFF"}).animate({fill: "#16c1f3",stroke: "#16c1f3"}, 1000,function () { //bl7 s[6].attr({fill: "#FFF"}).animate({fill: "#6ecff6",stroke: "#6ecff6"}, 1000,function () { //center circle s[8].attr({fill: "#FFF"}).animate({fill: "#d7df21",stroke: "#d7df21"}, 1000,function () { //middle circle s[9].attr({fill: "#FFF"}).animate({fill: "#8dc63f",stroke: "#8dc63f"}, 1000); activate(); }); }); }); }); }); }); }); }); }); function activate(){ for(var i = 0; i<6; i++) { s[i].index=i; w[i].indexed=i; s[i].attr({"cursor": "pointer"}); w[i].attr({"cursor": "pointer"}); s[i].mouseover(function (e) { for(var x = 0; x<6; x++) { w[x].animate({fill: "#FFF"}, 200); } w[this.index].animate({fill: "#00aeef"}, 200); $j("#bl"+this.index).fadeIn(200); R.safari(); }); s[i].mouseout(function () { for(var x = 0; x<6; x++) { w[x].attr({fill: "#00aeef"}); } document.getElementById("bl"+this.index).style.display = "none"; R.safari(); }); //Called from Raphael buttons s[i].click(function () { pagename = $j("#bl"+this.index).attr("title"); window.location = pagename; }); //s[i].cursor = "pointer"; w[i].mouseover(function (e) { for(var x = 0; x<6; x++) { w[x].animate({fill: "#FFF"}, 200); } w[this.indexed].animate({fill: "#00aeef"}, 200); $j("#bl"+this.indexed).fadeIn(200); R.safari(); }); w[i].mouseout(function () { for(var x = 0; x<6; x++) { w[x].attr({fill: "#00aeef"}); } document.getElementById("bl"+this.indexed).style.display = "none"; R.safari(); }); //Called from Raphael buttons w[i].click(function () { pagename = $j("#bl"+this.indexed).attr("title"); window.location = pagename; }); } } };