dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.StackContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.dijit"); // optimize: load dijit layer dojo.require("dojox.image.SlideShow"); dojo.require("dojo.data.ItemFileReadStore"); dojo.require("dijit.Tooltip"); dojo.require("dijit.Dialog"); dojo.require("dojox.layout.ContentPane"); dojo.require("dojo.parser"); //global variables var firstrun; // catalogs //end global variables dojo.addOnLoad(function() { dojo.parser.parse(); var buildUI = function() { var filestore = new dojo.data.ItemFileReadStore({ url: "../../../data/context/index.json" }); var slideshow = new dojox.image.SlideShow({ slideShowInterval: 10, loop: true, autoLoad: true, id: 'defaultslideshow', autoStart: false, noLink: true, dynamicScale: true }).placeAt(dojo.body()); dojo.style(dijit.byId("defaultslideshow").domNode, { "position": "absolute", "left": "0px", "top": "0px", "width": "100%", "height": "100%", "text-align": "left", "margin": "0px", "padding": "0px", "z-index": "0", "border": "none" }); slideshow.setDataStore( filestore, { query: {}, count: 1 }, { imageThumbAttr: "thumb", imageLargeAttr: "large" } ); var statuscheck = function() { var footerscript = function() { //detect layouting fail and correct the problem if (dijit.byId("outer")._contentBox.h === 0) { location.reload(); } }; var footerscript_trigger = function() { return (dijit.byId("bottom_region").isLoaded === true) ? footerscript: dojo.connect(dijit.byId("bottom_region"), "onLoad", footerscript); }; footerscript_trigger(); var headerscript = function() { //detect layouting fail and correct the problem if (dijit.byId("outer")._contentBox.h === 0) { location.reload(); } }; headerscript(); }; // do all the layout etc statuscheck(); //lets make our hidden content visible again, fading it in dojo.style(dojo.query(".soria")[0], "opacity", 0); dojo.style(dojo.query(".soria")[0], "visibility", "visible"); dojo.animateProperty({ node: dojo.query(".soria")[0], duration: 500, properties: { opacity: { end: 1 } } }).play(); //after all the rest is done, we assume the content in the central CP is loaded and proceed with drawing our shapes to the screen //we start by hiding some content which is there for SEO dojo.query(".buttonTxt").forEach(function(n) { dojo.style(n, "display", "none"); }); dojo.query(".homeTxt").forEach(function(n) { dojo.style(n, "display", "none"); }); //we extend Raphael to be able to output some additional information regarding its objects Raphael.fn.getCenterX = function(obj) { var xcenter = obj.getBBox().x + (obj.getBBox().width / 2); return xcenter; }; Raphael.fn.getCenterY = function(obj) { var ycenter = obj.getBBox().y + (obj.getBBox().height / 2); return ycenter; }; //we create objects which will contain sizes of different elements and palce them in a global scope relative to this function //lets keep our paper in global scope var paper = new Object; //this is the container in which the paper is placed. all coordinates will be relative to, and inside, this element var container = dojo.query(".centered")[0]; var containerproperties = new Object; //we define the original size of the area we have drawn our shapes on. var graphicalobjectsvirtualcanvas = new Object; graphicalobjectsvirtualcanvas.w = 690; graphicalobjectsvirtualcanvas.h = 690; //we also need an object for the size of the area which reppresents the canvas var contentCp = new Object; //more vars... var originalcanvasratio; var sifrmunchr; //finally we declare the different shapes, with the coords relative to the canvas size specified above var graphicalobjects = []; graphicalobjects[0] = { shape: "circle", centerx: 175, centery: 182, radius: 130, fill: "#1d1d1d", scalable: true, scalefactorx: 1.2, scalefactory: 1.2, textfragmentcolor: ["#B3B3B3"], textfragmentcontentid: ["circle1"], textfragmentfonthead: ["chalkboard"], textfragmentfontsize: [15], href: "/design.html" }; graphicalobjects[1] = { shape: "circle", centerx: 506, centery: 182, radius: 130, fill: "#1d1d1d", scalable: true, scalefactorx: 1.2, scalefactory: 1.2, textfragmentcolor: ["#B3B3B3"], textfragmentcontentid: ["circle2"], textfragmentfonthead: ["chalkboard"], textfragmentfontsize: [15], href: "/sculptures.html" }; graphicalobjects[2] = { shape: "circle", centerx: 175, centery: 513, radius: 130, fill: "#1d1d1d", scalable: true, scalefactorx: 1.2, scalefactory: 1.2, textfragmentcolor: ["#B3B3B3", "#FF0"], textfragmentcontentid: ["circle3_1", "circle3_2"], textfragmentcoords: [["90", "125"], ["150", "125"]], textfragmentfonthead: ["chalkboard", "chalkboard"], textfragmentfontsize: [15, 15], href: "/weight.html" }; graphicalobjects[3] = { shape: "circle", centerx: 506, centery: 513, radius: 130, fill: "#1d1d1d", scalable: true, scalefactorx: 1.2, scalefactory: 1.2, textfragmentcolor: ["#B3B3B3"], textfragmentcontentid: ["circle4"], textfragmentfonthead: ["chalkboard"], textfragmentfontsize: [15], href: "/events.html" }; graphicalobjects[4] = { shape: "rect", centerx: 490, centery: 170, width: 24, height: 468, fill: "#1d1d1d", rotation: 45 }; graphicalobjects[5] = { shape: "rect", centerx: 160, centery: 170, width: 24, height: 468, fill: "#1d1d1d", rotation: -45 }; function getsizes() { //we figure out the height available to the area in which the paper is to be drawn //we have 80 pixels margin on the side, so we actually go ahead and fix this contentCp.w = dojo.style(container, "width") - 80 - 80; //Why the hell - 25?? contentCp.h = dojo.style(container, "height") - 25; if (dojo.isIE) { //OH SHIT! ITS IE! for some reason dojo.style returns a bogus value. so we use marginBox. fuck you ie. contentCp.h = dojo.marginBox(container).h; } originalcanvasratio = graphicalobjectsvirtualcanvas.w / graphicalobjectsvirtualcanvas.h; }; function createpaper() { if (firstrun == null) { firstrun = 1; paper = Raphael("paper", contentCp.w, contentCp.h); } else { paper.remove(); paper = Raphael("paper", contentCp.w, contentCp.h); }; }; function determinesides_and_run() { //we determine which side is the important side in this case, //thus having an aspect ratio correct rendering of scaled elements //we consider the smallest side if (originalcanvasratio < contentCp.w / contentCp.h) { iterate_objects("width"); } else { iterate_objects("height"); }; }; function iterate_objects(side) { //This is the main loop. we iterate around all the objects defined above and then run some functions on them. for (var i = graphicalobjects.length - 1; i >= 0; i--) { if (side == "width") { graphicalobjects[i].scalingreference = "width"; convertcoords_width(i); } else { graphicalobjects[i].scalingreference = "height"; convertcoords_height(i); }; //connect event handlers to the shapes add_texts(i); setup_eventhandlers(i); }; }; function convertcoords_height(i) { //we convert the coordinates to the new state, and try to avoid geomatrical deformation somewhat. glitches present. //the width is the reference //we determine the new total height of the objects to draw, within the current canvas graphicalobjects[i].tempheight = Math.ceil((graphicalobjectsvirtualcanvas.h * contentCp.w) / graphicalobjectsvirtualcanvas.w); // could make this calculation only once, but for 6 iterations it doesnt matter //we need to center the stuff too xoffset = (contentCp.w - (Math.ceil((graphicalobjectsvirtualcanvas.w * contentCp.w) / graphicalobjectsvirtualcanvas.w))) / 2 ; //we convert the x center coordinates to the new size of the paper, scaling the coords graphicalobjects[i].tempcenterx = Math.ceil((graphicalobjects[i].centerx * contentCp.w) / graphicalobjectsvirtualcanvas.w) + xoffset ; //convert the y center coords to the new recalculated height, scaling coords graphicalobjects[i].tempcentery = Math.ceil((graphicalobjects[i].centery * graphicalobjects[i].tempheight) / graphicalobjectsvirtualcanvas.h); //detection of different shapes. It's left in here to avoid extreme function clutter. if (graphicalobjects[i].shape == "circle") { //a circle only has a radius to convert graphicalobjects[i].tempradius = (graphicalobjects[i].radius * contentCp.w) / graphicalobjectsvirtualcanvas.w; //if the object in question is already scaled, it needs to be rescaled once redrawn. if (graphicalobjects[i].scaled == true) { removestaleitems(i); drawcircle(i); scaleobject(i, graphicalobjects[i].scalefactorx, graphicalobjects[i].scalefactory); } else { removestaleitems(i); drawcircle(i); }; } else if (graphicalobjects[i].shape == "rect") { graphicalobjects[i].temprectwidth = Math.ceil((graphicalobjects[i].width * graphicalobjects[i].tempheight) / graphicalobjectsvirtualcanvas.h); graphicalobjects[i].temprectheight = Math.ceil((graphicalobjects[i].height * contentCp.w) / graphicalobjectsvirtualcanvas.w); if (graphicalobjects[i].scaled == true) { removestaleitems(i); drawrect(i); scaleobject(i, graphicalobjects[i].scalefactorx, graphicalobjects[i].scalefactory); } else { removestaleitems(i); drawrect(i); }; } else {}; }; function convertcoords_width(i) { //the width is the reference //we determine the new total width of the objects to draw, within the current canvas graphicalobjects[i].tempwidth = Math.ceil((graphicalobjectsvirtualcanvas.w * contentCp.h) / graphicalobjectsvirtualcanvas.h); // could make this calculation only once, but for 6 iterations it doesnt matter //we need to center the stuff too xoffset = (contentCp.w - (Math.ceil((graphicalobjectsvirtualcanvas.w * graphicalobjects[i].tempwidth) / graphicalobjectsvirtualcanvas.w))) / 2 ; console.log("xoffset: " + xoffset); //we convert the x center coordinates to the new recalculated height, scaling the coords graphicalobjects[i].tempcenterx = Math.ceil((graphicalobjects[i].centerx * graphicalobjects[i].tempwidth) / graphicalobjectsvirtualcanvas.w) + xoffset; //convert the y center coords to the new size of the paper, scaling coords graphicalobjects[i].tempcentery = Math.ceil((graphicalobjects[i].centery * contentCp.h) / graphicalobjectsvirtualcanvas.h); if (graphicalobjects[i].shape == "circle") { graphicalobjects[i].tempradius = (graphicalobjects[i].radius * contentCp.h) / graphicalobjectsvirtualcanvas.h; if (graphicalobjects[i].scaled == true) { removestaleitems(i); drawcircle(i); scaleobject(i, graphicalobjects[i].scalefactorx, graphicalobjects[i].scalefactory); } else { removestaleitems(i); drawcircle(i); }; } else if (graphicalobjects[i].shape == "rect") { graphicalobjects[i].temprectwidth = Math.ceil((graphicalobjects[i].width * contentCp.h) / graphicalobjectsvirtualcanvas.h); graphicalobjects[i].temprectheight = Math.ceil((graphicalobjects[i].height * graphicalobjects[i].tempwidth) / graphicalobjectsvirtualcanvas.w); if (graphicalobjects[i].scaled == true) { removestaleitems(i); drawrect(i); scaleobject(i, graphicalobjects[i].scalefactorx, graphicalobjects[i].scalefactory); } else { removestaleitems(i); drawrect(i); }; } else {}; //new shapes here; }; function removestaleitems(i) { if (graphicalobjects[i].raphaelshape) { graphicalobjects[i].raphaelshape.remove(); } }; function drawcircle(i) { graphicalobjects[i].raphaelshape = paper.circle(graphicalobjects[i].tempcenterx, graphicalobjects[i].tempcentery, graphicalobjects[i].tempradius).attr({"fill": graphicalobjects[i].fill, "stroke": "none"}); }; function drawrect(i) { graphicalobjects[i].raphaelshape = paper.rect(graphicalobjects[i].tempcenterx, graphicalobjects[i].tempcentery, graphicalobjects[i].temprectwidth, graphicalobjects[i].temprectheight).attr({"fill": graphicalobjects[i].fill, "stroke": "none"}); if (graphicalobjects[i].rotation) { graphicalobjects[i].raphaelshape.rotate(graphicalobjects[i].rotation, graphicalobjects[i].tempcenterx, graphicalobjects[i].tempcentery); }; }; function scaleobject(i, factorx, factory) { graphicalobjects[i].raphaelshape.scale(factorx, factory); }; function togglebubbling(i, force) { if ((graphicalobjects[i].scaled == false) || (graphicalobjects[i].scaled === undefined) || (force === true)) { graphicalobjects[i].raphaelshape.animate({ scale: 1.2 }, 500); graphicalobjects[i].scaled = true; } else { graphicalobjects[i].raphaelshape.animate({ scale: 1.0 }, 500); graphicalobjects[i].scaled = false; }; }; function converttextcoords(i, arraypos) { //we convert the coordinates of the texts considering the side which is smallest in the canvas if (graphicalobjects[i].scalingreference == "width") { graphicalobjects[i].textfragmentcoordsconverted[arraypos][0] = Math.ceil((graphicalobjects[i].textfragmentcoords[arraypos][0] * graphicalobjects[i].tempwidth) / graphicalobjectsvirtualcanvas.w) + graphicalobjects[i].raphaelshape.getBBox().x; graphicalobjects[i].textfragmentcoordsconverted[arraypos][1] = Math.ceil((graphicalobjects[i].textfragmentcoords[arraypos][1] * contentCp.h) / graphicalobjectsvirtualcanvas.h) + graphicalobjects[i].raphaelshape.getBBox().y; } else { graphicalobjects[i].textfragmentcoordsconverted[arraypos][0] = Math.ceil((graphicalobjects[i].textfragmentcoords[arraypos][0] * contentCp.w) / graphicalobjectsvirtualcanvas.w) + graphicalobjects[i].raphaelshape.getBBox().x; graphicalobjects[i].textfragmentcoordsconverted[arraypos][1] = Math.ceil((graphicalobjects[i].textfragmentcoords[arraypos][1] * graphicalobjects[i].tempheight) / graphicalobjectsvirtualcanvas.h) + graphicalobjects[i].raphaelshape.getBBox().y; }; }; function generatepaths(i, arraypos, type) { //we generate a SVG path by iterating over the glyphs contained in the printed object, and assemble the single paths to a single one if (type == "have_coordinates") { tempstorage = paper.print(graphicalobjects[i].textfragmentcoordsconverted[arraypos][0], graphicalobjects[i].textfragmentcoordsconverted[arraypos][1], dojo.byId(graphicalobjects[i].textfragmentcontentid[arraypos]).innerHTML, graphicalobjects[i].textfragmentfonthead[arraypos], graphicalobjects[i].textfragmentfontsize[arraypos]); } else { tempstorage = paper.print(Raphael.fn.getCenterX(graphicalobjects[i].raphaelshape), Raphael.fn.getCenterY(graphicalobjects[i].raphaelshape), dojo.byId(graphicalobjects[i].textfragmentcontentid[arraypos]).innerHTML, graphicalobjects[i].textfragmentfonthead[arraypos], graphicalobjects[i].textfragmentfontsize[arraypos]); }; temppath = ""; for (var i = tempstorage.length - 1; i >= 0; i--) { // a nice undocumented feauture of raphael. The paths of each glyph are stored there. temppath = temppath + tempstorage[i].attrs.path; //this adds a "," between all glyphs except after the last one if (i >= 1) { temppath = temppath + "," }; }; return temppath; }; function resetmunchonsifr(){ if (sifrmunchr == 0) { sifrmunchr = 1; if (dojo.query(".teh_text")) { console.log("i exist!"); for (var j = dojo.query(".teh_text").length - 1; j >= 0; j--) { dojo._destroyElement(dojo.query(".teh_text")[j]); }; }; }; }; function munch_on_sifr_optimizesize(i, arraypos) { // we have to match size of the overlayed text to the actual text which is below, otherwise its no fun // perhaps it should even be a few pixels larger // RESUME FROM HERE!!!!! ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// tobedeleted = dojo.create('div', {'id': "tobedeleted"}); dojo.style(tobedeleted, {position: "absolute", left: "-9999px", top: "-9999px"}); tobedeleted.appendChild(graphicalobjects[i].textobject[arraypos].textnode); dojo.body().appendChild(tobedeleted); //THIS DONT WORK!!! if ((dojo.style(graphicalobjects[i].textobject[arraypos].textnode), "width" ) -4 > graphicalobjects[i].textobject[arraypos].getBBox().w ) { console.log("larger"); } else if ((dojo.style(graphicalobjects[i].textobject[arraypos].textnode), "width" ) - 4 < graphicalobjects[i].textobject[arraypos].getBBox().w ) { console.log("smaller"); } console.log(dojo.style(graphicalobjects[i].textobject[arraypos].textnode, "width")); dojo._destroyElement(tobedeleted); // graphicalobjects[i].textobject[arraypos].getBBox().w }; function munch_on_sifr(i, arraypos) { // lets beat the shit out of SIFR. // we want to have a selectable freefont. //lets delete out old text nodes created during previous runs resetmunchonsifr(); graphicalobjects[i].textobject[arraypos].textnode = dojo.create('div', { 'class': "teh_text", innerHTML: dojo.byId(graphicalobjects[i].textfragmentcontentid[arraypos]).innerHTML }); dojo.style(graphicalobjects[i].textobject[arraypos].textnode, {position:"absolute", left:graphicalobjects[i].textobject[arraypos].getBBox().x+"px", top:graphicalobjects[i].textobject[arraypos].getBBox().y+"px", color:"transparent" }); munch_on_sifr_optimizesize(i, arraypos); dojo.byId("paper").appendChild(graphicalobjects[i].textobject[arraypos].textnode); }; function add_texts(i) { //lets add in the Texts to the objects which specify one, and position them centered to the various elements if (graphicalobjects[i].textfragmentcontentid) { for (var arraypos = (graphicalobjects[i].textfragmentcontentid.length) - 1; arraypos >= 0; arraypos--) { //did we specify coordinates for our text fragments? if not, autocenter the text to the center of the associated element if (graphicalobjects[i].textfragmentcoords) { //convert the coords converttextcoords(i, arraypos); //generate the path and draw it. //NOTE: FILL MUST BE SET EVEN IF THE PATH ALREADY CONTAINS A FILL. OTHERWISE THE dojo.connect WILL FAIL, or better, it will only connnect to the stroke, if any. graphicalobjects[i].textobject[arraypos] = paper.text(graphicalobjects[i].textfragmentcoordsconverted[arraypos][0], graphicalobjects[i].textfragmentcoordsconverted[arraypos][1], dojo.byId(graphicalobjects[i].textfragmentcontentid[arraypos]).innerHTML).attr({ "stroke-width": 0, "fill": graphicalobjects[i].textfragmentcolor[arraypos] }); } else { //generate the path and draw it //NOTE: FILL MUST BE SET EVEN IF THE PATH ALREADY CONTAINS A FILL. OTHERWISE THE dojo.connect WILL FAIL, or better, it will only connnect to the stroke, if any. graphicalobjects[i].textobject[arraypos] = paper.text(Raphael.fn.getCenterX(graphicalobjects[i].raphaelshape), Raphael.fn.getCenterY(graphicalobjects[i].raphaelshape), dojo.byId(graphicalobjects[i].textfragmentcontentid[arraypos]).innerHTML).attr({ "stroke-width": 0, "fill": graphicalobjects[i].textfragmentcolor[arraypos] }); }; munch_on_sifr(i, arraypos); //if the texts parent is set to be scalable set a mouseover event in order for it not to shrink when the text is hovered if (graphicalobjects[i].scalable === true) { setup_texteventhandlers(i, arraypos); } }; } }; function setup_texteventhandlers(i, arraypos) { //event handlers for text paths/nodes //disconnect stale event handlers if (graphicalobjects[i].textobject[arraypos].mouseoverhandler) { dojo.disconnect(graphicalobjects[i].textobject[arraypos].mouseoverhandler); dojo.disconnect(graphicalobjects[i].textobject[arraypos].mouseouthandler); } if (graphicalobjects[i].textobject[arraypos].clickhandler) { dojo.disconnect(graphicalobjects[i].textobject[arraypos].clickhandler); }; graphicalobjects[i].textobject[arraypos].mouseoverhandler = dojo.connect(graphicalobjects[i].textobject[arraypos].node, "onmouseover", (function(myi) { return function() { togglebubbling(myi, true); }; })(i)); graphicalobjects[i].textobject[arraypos].mouseouthandler = dojo.connect(graphicalobjects[i].textobject[arraypos].node, "onmouseout", (function(myi) { return function() { togglebubbling(myi); }; })(i)); if (graphicalobjects[i].href) { graphicalobjects[i].textobject[arraypos].clickhandler = dojo.connect(graphicalobjects[i].textobject[arraypos].node, "onclick", function(){document.location = graphicalobjects[i].href }); dojo.style(graphicalobjects[i].textobject[arraypos].node, "cursor", "pointer"); }; }; function setup_eventhandlers(i) { //disconnect stale event handlers if (graphicalobjects[i].mouseoverhandler) { dojo.disconnect(graphicalobjects[i].mouseoverhandler); dojo.disconnect(graphicalobjects[i].mouseouthandler); } if (graphicalobjects[i].clickhandler) { dojo.disconnect(graphicalobjects[i].clickhandler); }; //is the object set to be scaled on mouseover/out? if (graphicalobjects[i].scalable === true) { //interesting: we create a function which passes "i" to itself in order to preserve "i" across different calls, since dojo.connect deferrs it all graphicalobjects[i].mouseoverhandler = dojo.connect(graphicalobjects[i].raphaelshape.node, "onmouseover", (function(myi) { return function() { togglebubbling(myi, true); }; })(i)); graphicalobjects[i].mouseouthandler = dojo.connect(graphicalobjects[i].raphaelshape.node, "onmouseout", (function(myi) { return function() { togglebubbling(myi); }; })(i)); } if (graphicalobjects[i].href) { graphicalobjects[i].clickhandler = dojo.connect(graphicalobjects[i].raphaelshape.node, "onclick", function(){document.location = graphicalobjects[i].href }); dojo.style(graphicalobjects[i].raphaelshape.node, "cursor", "pointer"); }; }; function generateconveniencevariables() { for (var j = graphicalobjects.length - 1; j >= 0; j--) { if (graphicalobjects[j].textfragmentcontentid) { graphicalobjects[j].textobject = new Array(); }; if (graphicalobjects[j].textfragmentcoords) { graphicalobjects[j].textfragmentcoordsconverted = [[], []]; }; containerproperties = dojo.coords(container, true); sifrmunchr = 0; }; }; function doitall() { initdate = new Date(); generateconveniencevariables(); getsizes(); createpaper(); determinesides_and_run(); enddate = new Date(); exectime = enddate - initdate; console.log("execution time:" + exectime); }; doitall(); dojo.connect(window, "resize", function() { doitall(); }); }; dojo.addOnLoad(buildUI); });