/*******************************************************************************
FILE: mud_Scripts.php
REQUIRES: mud_API.js
AUTHOR: Takashi Okamoto mud(tm) - http://www.mudcorp.com/
VERSION: 2.0
DATE: 01/14/2006
--------------------------------------------------------------------------------
This file is part of the MudCorp Website.
The MudCorp Website itself is NOT free software; however there are many
components that are free. Please consult the header comments for those files
for the terms. For any licensing terms, please contact
us by using the contact form at http://mudcorporation.com/
--------------------------------------------------------------------------------
*******************************************************************************/
////////////////////////////////////////////////////////////////////////////////
// GLOBAL VARS
var delay = 5; // autoplay delay
var imgsGallery = new Array();
var proj, index, proj_list;
var selected = 0;
function sendFilter(loc) {
location.href = "/projects/" + loc + "/";
return false;
}
function setSelected(newSelected) {
// unset old
$('p'+selected).className = "proj_elem";
$('p'+newSelected).className = "proj_selected";
selected = newSelected;
}
////////////////////////////////////////////////////////////////////////////////
// MOUSE EVENTS
function setOnMouseClick() {
var elements = document.getElementsByTagName("a");
for (var i = 0; i < elements.length; i++) {
switch(elements[i].className) {
case "contactForm":
elements[i].onclick = function() {
$("contact").style.display = "block";
return false;
}
break;
case "next":
elements[i].onclick = function() {
var s = proj.nextImg();
setSelected(s);
if (!index.hidden) {
index.slideStart();
}
return false;
}
break;
case "prev":
elements[i].onclick = function() {
var s = proj.prevImg();
setSelected(s);
if (!index.hidden) {
index.slideStart();
}
return false;
}
break;
case "index":
elements[i].onclick = function() {
index.slideStart();
return false;
}
break;
case "close":
elements[i].onclick = function() {
index.slideStart();
return false;
}
break;
case "proj_elem":
elements[i].onclick = function(evt) {
evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {
var target = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (target.nodeType == 3) target = target.parentNode;
var imgNumber = parseInt(target.id.substring(1));
var s = proj.showImg(imgNumber);
setSelected(s);
}
index.slideStart();
return false;
}
break;
case "proj_selected":
elements[i].onclick = function(evt) {
evt = (evt) ? evt : ((window.event) ? event : null);
if (evt) {
var target = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (target.nodeType == 3) target = target.parentNode;
var imgNumber = parseInt(target.id.substring(1));
var s = proj.showImg(imgNumber);
setSelected(s);
}
index.slideStart();
return false;
}
break;
case "ap_start":
elements[i].onclick = function() {
proj.apStart(delay);
return false;
}
break;
case "ap_stop":
elements[i].onclick = function() {
proj.apStop();
return false;
}
break;
}
}
}
////////////////////////////////////////////////////////////////////////////////
// INIT
function initGallery() {
// load images
imgsGallery[0] = new Object();
imgsGallery[0].title = "Taber Studio (2006)";
imgsGallery[0].image = "/images/taberstudio.jpg";
imgsGallery[0].caption = 'Technology: XHTML, CSS, JavaScript, AJAX, PHP.
Design and programming for Taber Studio.
http://taberstudio.com';
imgsGallery[1] = new Object();
imgsGallery[1].title = "Dose Magazine (2006)";
imgsGallery[1].image = "/images/dose_cover.jpg";
imgsGallery[1].caption = 'Cover illustration for Dose Magazine, Issue: Mar. 21 2006.';
imgsGallery[2] = new Object();
imgsGallery[2].title = "Dose Magazine (2006)";
imgsGallery[2].image = "/images/dose_spread.jpg";
imgsGallery[2].caption = 'Full page illustration for Dose Magazine, Issue: Mar. 21 2006.';
imgsGallery[3] = new Object();
imgsGallery[3].title = "The Walrus March 2006 (2006)";
imgsGallery[3].image = "/images/walrus_explosion.jpg";
imgsGallery[3].caption = 'Full page illustration for The Walrus Magazine, March 2006.';
imgsGallery[4] = new Object();
imgsGallery[4].title = "The Walrus March 2006 (2006)";
imgsGallery[4].image = "/images/walrus_restraint.jpg";
imgsGallery[4].caption = 'Full page illustration for The Walrus Magazine, March 2006.';
imgsGallery[5] = new Object();
imgsGallery[5].title = "{XX} Design (2006)";
imgsGallery[5].image = "/images/xxdesign.jpg";
imgsGallery[5].caption = 'Technology: XHTML, CSS, JavaScript, AJAX, PHP, MySQL.
Design and programming of {XX} Design. Custom content management for easy updates through a web-based interface.
http://xxdesign.com';
imgsGallery[6] = new Object();
imgsGallery[6].title = "Ante Magazine (2005)";
imgsGallery[6].image = "/images/ante.jpg";
imgsGallery[6].caption = 'Technology: XHTML, CSS, JavaScript, AJAX, PHP, MySQL.
Design and programming of the new site for Ante Magazine, using AJAX to make new data calls.
http://antemagazine.com';
imgsGallery[7] = new Object();
imgsGallery[7].title = "Fingers — The Politician (2005)";
imgsGallery[7].image = "/images/the_politician.gif";
imgsGallery[7].caption = '17\"x22\" UV coated giclée print on watercolour paper. Edition of 1. Exhibited for Constructing Victims with Alejandro Vidal at p|m gallery in Toronto, Canada.';
imgsGallery[8] = new Object();
imgsGallery[8].title = "Fingers — The Peace (2005)";
imgsGallery[8].image = "/images/the_peace.gif";
imgsGallery[8].caption = '17\"x22\" UV coated giclée print on watercolour paper. Edition of 1. Exhibited for Constructing Victims with Alejandro Vidal at p|m gallery in Toronto, Canada.';
imgsGallery[9] = new Object();
imgsGallery[9].title = "Fingers — The Number One (2005)";
imgsGallery[9].image = "/images/the_number_one.gif";
imgsGallery[9].caption = '17\"x22\" UV coated giclée print on watercolour paper. Edition of 1. Exhibited for Constructing Victims with Alejandro Vidal at p|m gallery in Toronto, Canada.';
imgsGallery[10] = new Object();
imgsGallery[10].title = "Fingers — The Mud (2005)";
imgsGallery[10].image = "/images/the_mud.gif";
imgsGallery[10].caption = '17\"x22\" UV coated giclée print on watercolour paper. Edition of 1. Exhibited for Constructing Victims with Alejandro Vidal at p|m gallery in Toronto, Canada.';
imgsGallery[11] = new Object();
imgsGallery[11].title = "Fingers — The Fuck You (2005)";
imgsGallery[11].image = "/images/the_fuck_you.gif";
imgsGallery[11].caption = '17\"x22\" UV coated giclée print on watercolour paper. Edition of 1. Exhibited for Constructing Victims with Alejandro Vidal at p|m gallery in Toronto, Canada.';
imgsGallery[12] = new Object();
imgsGallery[12].title = "Fingers — The Devil (2005)";
imgsGallery[12].image = "/images/the_devil.gif";
imgsGallery[12].caption = '17\"x22\" UV coated giclée print on watercolour paper. Edition of 1. Exhibited for Constructing Victims with Alejandro Vidal at p|m gallery in Toronto, Canada.';
imgsGallery[13] = new Object();
imgsGallery[13].title = "Miss Oak, USA — Air Force One (2005)";
imgsGallery[13].image = "/images/airforceone.jpg";
imgsGallery[13].caption = '18\"x24\" UV coated giclée print on canvas. Edition of 1. Exhibited for Constructing Victims with Alejandro Vidal at p|m gallery in Toronto, Canada.';
imgsGallery[14] = new Object();
imgsGallery[14].title = "Miss Oak, USA — Oscar (2005)";
imgsGallery[14].image = "/images/oscar.jpg";
imgsGallery[14].caption = '18\"x24\" UV coated giclée print on canvas. Edition of 1. Exhibited for Constructing Victims with Alejandro Vidal at p|m gallery in Toronto, Canada.';
imgsGallery[15] = new Object();
imgsGallery[15].title = "Fusedspace Database — MudCatalogue (2005)";
imgsGallery[15].image = "/images/fs_mudcatalogue.jpg";
imgsGallery[15].caption = 'Technology: Perl, PDF, PHP, MySQL.
System of Perl scripts to construct an on-demand catalogue for \"Welcome to Fusedspace Database\" exhibition at Stroom, The Hague, Netherlands (for Team Science Fiction.) With a web interface, a personalized PDF is constructed, and sent directly to the printer. The PDF is also optionally uploaded to a webserver to be downloaded later. The individual projects were also batch processed by another set of Perl scripts that by feeding in various text and image contents. More information at http://www.teamscifi.net';
imgsGallery[16] = new Object();
imgsGallery[16].title = "Fusedspace Database — MudDisplay (2005)";
imgsGallery[16].image = "/images/fs_muddisplay.jpg";
imgsGallery[16].caption = 'Technology: Cocoa, Objective-C, Quartz Composer.
Applescript enabled custom Mac OS X display application for \"Welcome to Fusedspace Database\" exhibition at Stroom, The Hague, Netherlands (for Team Science Fiction.) Able to display images in three separate monitors, each independently controlled with an Applescript interface. More information at http://www.teamscifi.net';
imgsGallery[17] = new Object();
imgsGallery[17].title = "Fusedspace Database — MudTerminal (2005)";
imgsGallery[17].image = "/images/fs_mudterminal.jpg";
imgsGallery[17].caption = 'Technology: Cocoa, Objective-C, Quartz Composer.
Custom Mac OS X kiosk application for \"Welcome to Fusedspace Database\" exhibition at Stroom, The Hague, Netherlands (for Team Science Fiction.) Input consists of a trackball and three buttons. More information at http://www.teamscifi.net';
imgsGallery[18] = new Object();
imgsGallery[18].title = "Miss Oak, USA — UFO (2005)";
imgsGallery[18].image = "/images/ufo.jpg";
imgsGallery[18].caption = '18\"x24\" UV coated giclée print on canvas. Edition of 1. Exhibited for Constructing Victims with Alejandro Vidal at p|m gallery in Toronto, Canada.';
imgsGallery[19] = new Object();
imgsGallery[19].title = "Miss Oak, USA — Cowboy (2005)";
imgsGallery[19].image = "/images/cowboy.jpg";
imgsGallery[19].caption = '18\"x24\" UV coated giclée print on canvas. Edition of 1. Exhibited for Constructing Victims with Alejandro Vidal at p|m gallery in Toronto, Canada.';
imgsGallery[20] = new Object();
imgsGallery[20].title = "Miss Oak, USA — Eagle (2005)";
imgsGallery[20].image = "/images/eagle.jpg";
imgsGallery[20].caption = '18\"x24\" UV coated giclée print on canvas. Edition of 1. Exhibited for Constructing Victims with Alejandro Vidal at p|m gallery in Toronto, Canada.';
imgsGallery[21] = new Object();
imgsGallery[21].title = "Village Website (2005)";
imgsGallery[21].image = "/images/vllg.jpg";
imgsGallery[21].caption = 'Technology: XHTML, CSS, JavaScript, Perl, PHP, MySQL.
Design and programming by MudCorp. Complete e-commerce solution, and direct download of font files. Inventory management through custom CMS. Also featuring mudTyper ver1.1, first interactive online type testing tool with support for kerning and full character sets.
Expanded site in 10/2005 to include a products section, as Village now carries physical goods for sale.
http://www.vllg.com';
imgsGallery[22] = new Object();
imgsGallery[22].title = "2x4 Website (2005)";
imgsGallery[22].image = "/images/2x4.jpg";
imgsGallery[22].caption = 'Technology: XHTML, CSS, JavaScript, PHP, MySQL.
Design and programming of the new site for 2x4, Inc. showcasing their new work in an easy to navigate and simple site.
http://2x4.org';
imgsGallery[23] = new Object();
imgsGallery[23].title = "Stiletto Website (2005)";
imgsGallery[23].image = "/images/stiletto.jpg";
imgsGallery[23].caption = 'Technology: XHTML, CSS, JavaScript, PHP, MySQL.
Design with Stiletto. Project management through custom CMS.
http://stilettonyc.com';
imgsGallery[24] = new Object();
imgsGallery[24].title = "Museum of the Moving Image Website (2005)";
imgsGallery[24].image = "/images/movingimage.jpg";
imgsGallery[24].caption = 'Designed graphical elements using the new museum identity developed by 2x4, Inc; that is implemented on top of their old site. Done while at 2x4, Inc.
http://movingimage.us';
imgsGallery[25] = new Object();
imgsGallery[25].title = "Endeavor Screensaver (2004)";
imgsGallery[25].image = "/images/endeavor.jpg";
imgsGallery[25].caption = 'Designed and programmed a flash based screen saver. Runs on computers in the endeavor office, done for 2x4, Inc.';
imgsGallery[26] = new Object();
imgsGallery[26].title = "Prada — SoundWave (2004)";
imgsGallery[26].image = "/images/prada_soundwave.gif";
imgsGallery[26].caption = 'Technology: Processing, Java, XML.
Processing applet that displays the sound spectrum of ambient noise. Installation work for Prada Epicenter L.A. done for 2x4, Inc.';
imgsGallery[27] = new Object();
imgsGallery[27].title = "Prada — MostWantedCombo (2004)";
imgsGallery[27].image = "/images/prada_mostwantedcombo.gif";
imgsGallery[27].caption = 'Technology: Processing, Java, XML.
Processing applet that displays the characteristics of the FBI\'s 10 most wanted, mixed in with dating profiles of a popular dating site. Installation work for Prada Epicenter L.A. done for 2x4, Inc.';
imgsGallery[28] = new Object();
imgsGallery[28].title = "Prada — MostWanted (2004)";
imgsGallery[28].image = "/images/prada_mostwanted.gif";
imgsGallery[28].caption = 'Technology: Processing, Java, XML.
Processing applet that displays the list of FBI\'s 10 most wanted. This applet was designed in a way that if you feed in a text file, it will print the contents of the text file line by line, much like a dot matrix printer, but on screen. Installation work for Prada Epicenter L.A. done for 2x4, Inc.';
imgsGallery[29] = new Object();
imgsGallery[29].title = "Prada — AllNames (2004)";
imgsGallery[29].image = "/images/prada_allnames.gif";
imgsGallery[29].caption = 'Technology: Processing, Java, XML.
Processing applet that displays many combinations of common first and last names. Installation work for Prada Epicenter L.A. done for 2x4, Inc.';
imgsGallery[30] = new Object();
imgsGallery[30].title = "Camaoflage (2004)";
imgsGallery[30].image = "/images/camao.jpg";
imgsGallery[30].caption = 'Camouflage made of little Maos. 34\"x34\" digital print on paper. Comes in four colors.';
imgsGallery[31] = new Object();
imgsGallery[31].title = "mudHeart (2004)";
imgsGallery[31].image = "/images/heart.gif";
imgsGallery[31].caption = 'Technology: Processing.
Java applet of randomly drawn hearts with shivers down the spine. Perfect for Valentine’s day.
http://mudcorp.com/applets/mudHeart/';
imgsGallery[32] = new Object();
imgsGallery[32].title = "mud_ascii.pl (2004)";
imgsGallery[32].image = "/images/ascii.jpg";
imgsGallery[32].caption = 'Technology: Perl, ImageMagick, PDF::API2.
Program that generates a three color ascii art as PDF.
http://mudcorp.com/mosaic/';
imgsGallery[33] = new Object();
imgsGallery[33].title = "mud_mosaic.pl (2004)";
imgsGallery[33].image = "/images/mosaic.jpg";
imgsGallery[33].caption = 'Technology: Perl, ImageMagick.
Program that generates an image with smaller images.
http://mudcorp.com/mosaic/';
imgsGallery[34] = new Object();
imgsGallery[34].title = "Ben Rubin — Untitled (2004)";
imgsGallery[34].image = "/images/benrubin.jpg";
imgsGallery[34].caption = 'Technology: Processing, Perl, After Effects, LCD light boxes and controller.
Programming for Ben Rubin’s Untitled work. More info here on his website.
http://earstudio.com/projects/signlang.html';
imgsGallery[35] = new Object();
imgsGallery[35].title = "Andrew Zimmerman Website (2004)";
imgsGallery[35].image = "/images/andrewzimmerman.jpg";
imgsGallery[35].caption = 'Technology: XHTML, CSS, JavaScript.
Design and programming by MudCorp.
http://andrewzimmerman.com';
imgsGallery[36] = new Object();
imgsGallery[36].title = "Cenere Website (2004)";
imgsGallery[36].image = "/images/cenere.jpg";
imgsGallery[36].caption = 'Technology: XHTML, CSS, JavaScript.
Design by Stiletto, and programmed by MudCorp.
http://www.ceneregb.com';
imgsGallery[37] = new Object();
imgsGallery[37].title = "Texelseboys Lunchbox and Global Locator (2003 - now)";
imgsGallery[37].image = "/images/texelseboys.jpg";
imgsGallery[37].caption = 'Technology: XHTML, CSS, JavaScript, PHP, MySQL.
Design and programming by MudCorp. This is a travelling project of one tin lunchbox to give Texelseboys members a sense of physical connection. The locator has stories and pictures behind all the owners.
http://mudcorp.com/texelseboys/';
imgsGallery[38] = new Object();
imgsGallery[38].title = "Tshirt — Giraffe (2003)";
imgsGallery[38].image = "/images/tshirt-giraffe.jpg";
imgsGallery[38].caption = 'Giraffe tshirt, silk screened by hand. Edition of 10. Sold out.';
imgsGallery[39] = new Object();
imgsGallery[39].title = "Tshirt — Mudtallica (2003)";
imgsGallery[39].image = "/images/tshirt-mudtallica.jpg";
imgsGallery[39].caption = 'Mudtallica logotype tshirt, silk screened by hand. Edition of 20. Sold Out.';
imgsGallery[40] = new Object();
imgsGallery[40].title = "mudOS (2003)";
imgsGallery[40].image = "/images/mudos.jpg";
imgsGallery[40].caption = 'Technology: HTML, JavaScript.
mudOS is a command line layer that runs over top of a GUI web browser. Using only client-side JavaScript, users can type in commands to control the web browser, and have a command line interface to interact with instead of the conventional graphical interface. Since mudOS is purely client-side JavaScript, it can run on any web browser that has JavaScript and cookies enabled. This makes mudOS a truly cross-platform application mudOS is a command line layer that runs over top of a GUI web browser. Using only client-side JavaScript, users can type in commands to control the web browser, and have a command line interface to interact with instead of the conventional graphical interface. Since mudOS is purely client-side JavaScript, it can run on any web browser that has JavaScript and cookies enabled. This makes mudOS a truly cross-platform application.
http://mudcorp.com/products-web/mudos/';
imgsGallery[41] = new Object();
imgsGallery[41].title = "Nice Lady (2003)";
imgsGallery[41].image = "/images/lady.jpg";
imgsGallery[41].caption = 'Full page illustration for m-real Magazine (Finland).';
imgsGallery[42] = new Object();
imgsGallery[42].title = "In Vin We Trust (2003)";
imgsGallery[42].image = "/images/vin.jpg";
imgsGallery[42].caption = 'Illustration for Shift Magazine, last 2003 issue.';
imgsGallery[43] = new Object();
imgsGallery[43].title = "Mudtallica (2003)";
imgsGallery[43].image = "/images/mudtallica.jpg";
imgsGallery[43].caption = 'Logotype. Protest against corporate crap rock.';
imgsGallery[44] = new Object();
imgsGallery[44].title = "National Post (2002)";
imgsGallery[44].image = "/images/nationalpost.jpg";
imgsGallery[44].caption = 'Illustration for The National Post newspaper.';
imgsGallery[45] = new Object();
imgsGallery[45].title = "Spam (2002)";
imgsGallery[45].image = "/images/spam.jpg";
imgsGallery[45].caption = 'Full page illustration for Shift Magazine, holiday 2002 issue.';
imgsGallery[46] = new Object();
imgsGallery[46].title = "Byebye (2001)";
imgsGallery[46].image = "/images/byebye.jpg";
imgsGallery[46].caption = 'Digital print on canvas.';
imgsGallery[47] = new Object();
imgsGallery[47].title = "Welcome (2001)";
imgsGallery[47].image = "/images/welcome.jpg";
imgsGallery[47].caption = 'Digital print on canvas.';
imgsGallery[48] = new Object();
imgsGallery[48].title = "étapes Issue 79 Cover (2001)";
imgsGallery[48].image = "/images/etapes.jpg";
imgsGallery[48].caption = 'Cover illustration for étapes (France).';
imgsGallery[49] = new Object();
imgsGallery[49].title = "Internet Brokers (2001)";
imgsGallery[49].image = "/images/brokers.jpg";
imgsGallery[49].caption = 'Full page illustration for Shift Magazine, holiday 2001 issue.';
imgsGallery[50] = new Object();
imgsGallery[50].title = "Quaker (2001)";
imgsGallery[50].image = "/images/quaker.jpg";
imgsGallery[50].caption = '33\"x46\" UV coated giclée print on canvas. Edition of 1.';
imgsGallery[51] = new Object();
imgsGallery[51].title = "Bon (2001)";
imgsGallery[51].image = "/images/bon.jpg";
imgsGallery[51].caption = '33\"x46\" UV coated giclée print on canvas. Edition of 1.';
proj = new MudFadeGallery('proj', 'proj', imgsGallery, {startNum: 0, preload: true});
// set initial values
var title = (imgsGallery[0].title) ? imgsGallery[0].title : "No Title";
var caption = (imgsGallery[0].caption) ? imgsGallery[0].caption : "No caption";
$("proj_title").innerHTML = title;
$("proj").src = imgsGallery[0].image;
$("proj_caption").innerHTML = caption;
$("proj_number").innerHTML = "1 of " + imgsGallery.length + " projects";
}
function initIndex() {
proj_list = "";
for (var i = 0; i < imgsGallery.length; i++) {
var p_name = imgsGallery[i].title
if (p_name.length > 64) p_name = p_name.substring(0, 64) + "...";
if (i == 0) proj_list += '' + (i+1) + '. ' + p_name + '
';
else proj_list += '' + (i+1) + '. ' + p_name + '
';
}
proj_list += 'close';
$("index").innerHTML = proj_list;
//MudPopContent(id, showX, showY, hideX, hideY, width, height)
var index_dimensions = Element.getDimensions('index');
index = new MudPopContent('index', 0, 0, 0, -index_dimensions.height, index_dimensions.width, index_dimensions.height);
$('index').style.top = -index_dimensions.height + "px";
}
function setIndexSize() {
if (/MSIE/.test(navigator.userAgent) && !/Mac/.test(navigator.userAgent)) {
var h = (document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.clientHeight;
$('index-wrapper').style.height = h + "px";
}
else {
var h = Element.getHeight('index');
$('index-wrapper').style.height = h + "px"
}
}
function init() {
initGallery();
initIndex();
setIndexSize();
setOnMouseClick();
}
////////////////////////////////////////////////////////////////////////////////
// EVENTS
Event.observe(window, 'load', init, false);