//// marmondesign.js v1.0// 10.12.07//// Copyright (c) 2007 Steve Marmon, all rights reserved.//// The datavar galleryArray = new Array();var iconArray = new Array();	iconArray['Aftershock'] = "images/aftershock_icon.jpg";galleryArray['Aftershock'] = 	[['the main Aftershock window', 'images/aftershock_1.gif', 	  'Aftershock is a Java application designed to simplify the process of identifying, analyzing, and reporting earthquakes and other seismic events. It combines the functions of dozens of smaller programs into a single package with a friendly, cohesive user-interface. I developed the interface through months of iterative prototyping and usability testing. Despite its simple exterior, Aftershock includes a powerful data management and analysis engine, built atop the industry-standard Earthworm seismic processing software.',	  'lightwindow_width=600,lightwindow_height=481'],	 	 ['the trace editor', 'images/aftershock_2.gif', 	  'Having precise phase picks is critical for accurately pinpointing the location of an earthquake. These picks mark the arrival of different seismic waves, as well as the end of the earthquake. To make the phase picking process more intuitive, I created this special graphical editor. Picks can be added with a double-click and adjusted with a drag of the mouse. A translucent popup allows for quick and unobtrusive adjustment of pick settings. Finally, each pick is color-coded for easy identification, with green representing wave arrivals and red representing wave termination.'],	 	 ['earthquake mapping', 'images/aftershock_3.jpg', 	  'Aftershock also allows you to visually map the locations of seismic events. This is especially useful for visualizing swarms: short bursts of seismic activity that result in a large number of proximate earthquakes. I was able to implement this feature with remarkable ease by leveraging the Google Maps API.']	]	iconArray['OIP Release System'] = "images/oip_icon.jpg";galleryArray['OIP Release System'] = 	[['the user-facing Download Center', 'images/oip_download_1.jpg', 	  'One of the primary goals of this project was to simplify the download process for our users. Above is the new download page, which replaced a litany of individual HTML download pages for each product. The new page does more than just aggregate products, however; it detects the identity of the user visiting the page and dynamically adjusts its contents to show only those products that the user has permission to download. I developed the site using ASP.NET (in C#) with Microsoft\'s AJAX extensions.',	  'lightwindow_width=600,lightwindow_height=535'],	 	 ['the Release Manager tool', 'images/oip_download_2.gif', 	  'This program is the flip-side of the download center. It is used by the team to control which releases are available online and who is permitted to download each one. I wrote it using C#.'],	 	 ['the Data Miner tool', 'images/oip_download_3.gif', 	  'Above is the Data Miner tool that I wrote. It is actually more of a data viewer than a data miner, since it simply allows the team to browse the download center history logs. It is notable in that I developed the entire thing in less than an hour, thanks to Microsoft\'s canned ASP.NET data viewer components.']	]	iconArray['Safety Stoplight System'] = "images/stoplight_icon.jpg";	galleryArray['Safety Stoplight System'] = 	[['the Safety Stoplight unit', 'images/stoplight_1.jpg', 	  'This was one of the most ambitious projects I have ever worked on. It began as a small side project for a handful of interns, with the goal of displaying safety messages on LED displays in a handful of buildings. What it became was a company-wide safety management and alert system that proved so successful that Caterpillar patented and sold the entire design to another company for full-scale commercial production.',	  'lightwindow_width=498,lightwindow_height=472'],	 	 ['the basic concept', 'images/stoplight_2.jpg', 	  'When we were first given the task of building this system, we rejected the scrolling-LED concept because we felt it would be too easily ignored by workers. If it was to be successful, we knew it had to be something people would <em>want</em> to look at. So what we did instead was pair an attention-grabbing stoplight with a LCD display that would show information about recent near misses or injuries. All incident information would be downloaded wirelessly from the web, enabling instantaneous updates from anywhere in the world. The picture above shows one of the original twelve units that we built by hand before contracting the assembly to an outside company.'],	 	 ['the Safety Stoplight display', 'flash/DesktopFlashForWeb.swf', 	  'Here is the Flash animation that appears on the screens of all the stoplight units. As the head of the software team, it was my job to architect all the various software components and to design their visual appearance. Due to the small size of our team, I also ended up writing much of the code, including the animation above.<br /><br /><em>Note: For reasons I do not completely understand, the text in the animation on this page appears more horizontally condensed than it does in the actual production version of the animation. Consequently, it is harder to read than it normally would be.</em>',	  'lightwindow_width=600,lightwindow_height=375'],	 	 ['the Web-based Stoplight', 'images/stoplight_3.jpg', 	  'In addition to designing the physical stoplight units, we created "web stoplights" and strategically placed them on various internal Caterpillar webpages. These little Flash animations provide the same information as the physical units, and also update in real time. They proved particularly useful for those people who did not work near a physical unit, or who worked in a facility that had not yet received any units.'],	 	 ['the management website', 'images/stoplight_4.jpg', 	  'In order for a near miss or injury to appear on the stoplight screens, it has to be entered into the system first, a process that is accomplished through the website shown above. One key feature of the website is that it tracks the organization associated with each incident. This allows us to show the incident on the screens of parent organizations as well. In this way, incidents flow up the organizational chain, a feature that proved to be one of the major selling points of the system.'],	 	 ['custom slides', 'images/stoplight_5.jpg', 	  'Beyond just showing near misses and injuries, we designed the stoplights to show custom safety messages as well. The current implementation (created by high-school wunderkind <a href="http://sammuir.googlepages.com/index.html" target="_blank">Sam Muir</a>) allows a variety of text effects, and future versions will support images and video as well. Thanks to the automatic software update mechanism that we developed, deploying newer versions of the software is a snap (and completely transparent to the user, too).']	 ]	iconArray['ChannelTuner'] = "images/channeltuner_icon.jpg";galleryArray['ChannelTuner'] = 	[['the genetic algorithm', 'images/channeltuner_1.gif', 	  'The purpose of ChannelTuner is to make the earthquake detection software at the MBMG\'s Earthquake Studies Office more accurate. It works by using a genetic algorithm to pour over historical data, trying new settings to see if they achieve higher accuracy. It keeps evolving new settings until no greater accuracy can be achieved. The above screen capture shows the algorithm in progress.',	  'lightwindow_width=600,lightwindow_height=412'],	 	 ['manual tuning', 'images/channeltuner_2.gif', 	  'ChannelTuner also includes a graphical user interface for manually adjusting settings. Every time the settings are changed, ChannelTuner automatically creates a backup so that the user can easily revert to the previous settings if the new ones cause problems.']	 ]	iconArray['WARP Subscription Services'] = "images/warp_icon.jpg";	 galleryArray['WARP Subscription Services'] = 	[['overview', 'images/warp_1.gif', 	  'WARP Subscription Services is one component in a business process management system designed to manage DRAM reticle production at Micron Technologies. It provides engineers an easy way to sign up for pager or e-mail notification when key points are reached in the reticle development process. I created the WARP Subscription Services website using Java 2 Enterprise Edition on Pramati Server.',	  'lightwindow_width=600,lightwindow_height=468'],	 	 ['ui design', 'images/warp_2.gif', 	  'I created the user-interface for WARP Subscription Services with the goals of simplicity and flexibility in mind. To achieve these goals, I used Cascading Style Sheets (CSS). This allowed me to design a clean layout that could still be radically changed without ever having to touch the underlying Java code.'],	 	 ['e-mail notifications', 'images/warp_3.gif', 	  'I tried to make the WARP Subscription Services experience as seamless as possible by adopting a uniform look for both the website and the e-mail notifications. I achieved this by using HTML mail, although I did provide a plain-text version as well.'],	 	 ['documentation', 'images/warp_4.gif', 	  'I worked with technical writers at Micron to produce documentation for WARP Subscription Services, including a quickstart guide (shown here), a printed manual, and an online help system.']	]	iconArray['The Technocrat'] = "images/technocrat_icon.jpg";galleryArray['The Technocrat'] = 	[['introduction', 'images/technocrat_1.jpg', 	  'As Layout Manager of The Technocrat, I was in charge of the appearance of the paper. This included everything from typeface selection and logo design to article and photo placement. This front-page snippet shows my final design. To see how the design progressed during my three-semester tenure, click next.',	  'lightwindow_width=500,lightwindow_height=513'],	 	 ['original design', 'images/technocrat_2.jpg', 	  'This was the cover of the last issue before I was hired as Layout Manager. I felt that the layout would benefit from more distinctive typefaces and a more agressive use of color. Continue on to the next page to see the new layout design I created.'],	 	 ['first redesign', 'images/technocrat_3.jpg', 	  'This is an example of the new layout I created after taking over as Layout Manager. I ditched the plain typefaces in favor of stronger, more eye-catching ones. I also did away with the heavy use of boxes and lines to give the paper a cleaner look overall. Inside, I reorganized the content into four general sections, which also allowed me to add a table of contents sidebar on the front page.'],	 	 ['second redesign', 'images/technocrat_4.jpg', 	  'This is an example of my second redesign of the Technocrat layout. My goal was to give the paper a smarter, fresher look. I achieved this by updating the logo and employing a "graph paper" scheme throughout the paper. I felt that this scheme played well to Montana Tech\'s engineering roots, in addition to adding visual interest. The logo design was concieved by me and created by Tom Mulder, a contributing photographer and graphic designer.']	]iconArray['Scrumptious Scoops Business Plan'] = "images/scrumptious_icon.jpg";galleryArray['Scrumptious Scoops Business Plan'] = 	[['front cover', 'images/scrumptious_1.gif', 	  'I developed this business plan for the fictional Scrumptious Scoops ice cream parlor franchise as an assignment for my Business & Professional Writing course. I wanted to create a document that would not only provide information needed by investors, but would also capture the friendly, cheerful esssence of the ice cream parlor atmosphere.',	  'lightwindow_width=355,lightwindow_height=500'],	 	 ['design choices', 'images/scrumptious_2.gif', 	  'To achieve the "essence" of the ice cream parlor atmosphere in the business plan, I employed whimsical san-serif typefaces and bright colors. I also strove for a high degree of whitespace to make the document look as visually appealing as possible.'],	 	 ['graphs & charts', 'images/scrumptious_3.gif', 	  'I believe that effective communication extends beyond just well-written text. That\'s why I made an effort to use graphs, charts, and tables to convey information as quickly and as clearly as possible.']	 ]iconArray['Hit & Fade'] = "images/hnf_icon.jpg";galleryArray['Hit & Fade'] = 	[['introduction', 'images/hitandfade_1.jpg', 	  'For the Hit & Fade project, I was in charge of designing the layout, while my partner was in charge of creating the graphics. We used Adobe InDesign for the layout, Illustrator for the illustrations, and Photoshop for the graphics.',	  'lightwindow_width=600,lightwindow_height=463'],	 	 ['layout & illustration', 'images/hitandfade_2.jpg', 	  'When designing the page layout, I tried to maintain a good amount of whitespace in order to give the guide a more inviting feel. I achieved this by devoting an entire column to whitespace, which doubled as a place for the illustrations. The illustrations proved challenging because the phyiscal game board is twice as long as it is wide, so illustrating the full game board each time would take up too much space. Our solution was to only show half the game board at any given time, fading the edges to show that more board space exists.']	 ]iconArray['Top-Secret Application Icon'] = "images/icons_icon.jpg";	galleryArray['Top-Secret Application Icon'] = 	[['main application icons', 'images/icons_1.jpg', 	  'I can\'t say much about these icons, except that they are for various applications that will be bundled together into a single suite. I can also say that the general purpose of the suite is to generate other pieces of software. I came up with the pen-and-paper concept in order to reflect this purpose, and also to give visual consistency to the entire icon suite. I designed everything using Adobe Photoshop and IconFactory\'s excellent IconBuilider.',	  'lightwindow_width=600,lightwindow_height=320'],	 	 ['other icons', 'images/icons_2.jpg', 	  'Above is an icon I created for a related application. Once again, I can\'t say much about the program this icon is for, but I included it here because it is a good example of the challenges inherent to designing icons at multiple sizes. The 64x64 version only required minor tweaking from the 128x128 version, but the 32x32 had to be largely recreated from scratch. The result, however, is that the icons are easily distinguishable at each size.']	]	iconArray['STB Health Online'] = "images/stbhealth_icon.jpg";	galleryArray['STB Health Online'] = 	[['basic query', 'images/stbhealthonline_1.gif', 	  'STB Health Online is an AJAX application for viewing and analyzing health-related data reported by DISH Network set-top boxes. I was in charge of designing the UI for this application, which was a challenge since the site had to cater to both casual and advanced users from a variety of different departments within the company. To accomplish this task, I created separate sections tailored to each user group. The section for casual users is shown here.',	  'lightwindow_width=600,lightwindow_height=436'],	 	 ['advanced query', 'images/stbhealthonline_2.gif', 	  'Advanced users required an enormous amount of flexibility from STB Health Online. To accomodate this, I subdivided the Advanced section into three subsections, each with a wealth of carefully-organized options. In the section shown, the user can build an arbitrarily complex query by combining a virtually unlimited number of search clauses.'],	 	 ['the power of ajax', 'images/stbhealthonline_3.gif', 	  'This screenshot shows another subsection of the Advanced portion of the website. As you can see, the site supports a wealth of output formats, requiring the UI to change dynamically based on the selections made. All of these changes happen without a single page reload, thanks to the power of AJAX.'],	 	 ['graphs', 'images/stbhealthonline_4.gif', 	  'The site could dynamically generate graphs without page reloads as well. Due to resource limitations, we were unable to make the graphs especially "fancy" in appearance. However, we strove to maintain consistency with the look-and-feel of the website.']	]iconArray['DISH Network Set-Top Box'] = "images/dish_icon.gif";galleryArray['DISH Network Set-Top Box'] = 	[['acquiring satellite signal', 'images/dishnetwork_2.jpg', 	  '<strong>before:</strong> The original "Acquiring satellite signal" screen, which cost Echostar upwards of a million dollars per year in tech support calls. Why? Because it failed to convey to users what they wanted to know the most: What is happening? How long is it going to take? How come I can\'t watch TV? (Don\'t look to the progress field for answers; it just counts up to 5 before starting over at 0 again.) <br><br><strong>after:</strong> The two replacement screens (right). This pair of screens replaces the unnecessary clutter with content that provides meaningful feedback to the user. In addition, it also includes useful hardware and software information to expedite troubleshooting when thing really do go awry.'],	 	 ['system locks', 'images/dishnetwork_1.jpg', 	  '<strong>before:</strong> The original menu-style Locks screen (left). The design makes it hard to discern which locks are currently active and provides no cue to the user that they must select "Lock System" before any locks will take effect.<br><br><strong>after:</strong> The new Locks screen (right). Now renamed Parental Controls, this screen clearly displays the current lock settings. The bright text and padlock at the top make it easy to see if locks are active.',	  'lightwindow_width=710,lightwindow_height=224'],	 	 ['video-based help', 'images/dishnetwork_3.jpg', 	  '<strong>before:</strong> Most help screens consisted of only the customer support phone number and website address (picture not available). This prevented users from being able to perform their own troubleshooting, which went against our design goals for the UI.<br><br><strong>after:</strong> The all new video-based help system (left). We developed the new video-based help because we found it was often easier to show the user how to perform a task than to try to tell them in words. For those users who prefer to read, we developed a step-by-step text based system as well (right).']	]// Looks for <div> tags with special IDs and injects HTML to make those tags // contain links to their respective galleries.function prepareGalleries() {	var galleryTags = getElementsByClassName(document, "div", "gallery");	  	for (var i = 0; i < galleryTags.length; i++) {		var galleryTag = galleryTags[i];		var galleryTitle = "";		var isImage = false;				if (galleryTag.title.slice(0, 4) == 'img:') {			galleryTitle = galleryTag.title.split(':')[1];			isImage = true;		} else {			galleryTitle = galleryTag.title;		}				var galleryData = galleryArray[galleryTitle];		// Check if we have data for the requested gallery name	  	if (galleryData) {						// Create link to each gallery item			for (var j = 0; j < galleryData.length; j++) {				var galleryItem = galleryData[j];				var spanTag = document.createElement('span');								// Make only first link visible				if (j == 0) {					spanTag.className = 'list-refer';				} else {					spanTag.className = 'hidden-refer';					}							// Create the link itself (the syntax is per the lightwindow reqs)				var linkTag = document.createElement('a');				linkTag.setAttribute('title', galleryItem[0] + ' &gt;');				linkTag.setAttribute('href', galleryItem[1]);				linkTag.setAttribute('rel', 'Portfolio[' + galleryTitle + ']');				linkTag.setAttribute('caption', galleryItem[2]);												// Now add either text link or image link (if it's visible, that is)				if (j == 0) {					if (!isImage) {						linkTag.innerHTML = 'learn more &gt;';											} else {						var imgTag = document.createElement('img');						imgTag.setAttribute('src', iconArray[galleryTitle]);						imgTag.setAttribute('width', '128');						imgTag.setAttribute('height', '128');											imgTag.setAttribute('border', '0');												linkTag.appendChild(imgTag);					}				}								// Account for usual IE stupidness				if (Prototype.Browser.IE) {					linkTag.setAttribute('className', 'lightwindow');				} else {					linkTag.setAttribute('class', 'lightwindow');				}								if (galleryItem[3]) {					linkTag.setAttribute('params', galleryItem[3]);				}								spanTag.appendChild(linkTag);					galleryTag.appendChild(spanTag);			}    	} else {			alert('Invalid gallery: ' + galleryTitle);			}  	}}// Utility function to grab elements with a particular class name.// By Jonathan Snook, http://www.snook.ca/jonathanfunction getElementsByClassName(oElm, strTagName, strClassName){	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);	var arrReturnElements = new Array();	strClassName = strClassName.replace(/\-/g, "\\-");	var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");	var oElement;	for(var i=0; i<arrElements.length; i++){		oElement = arrElements[i];				if(oRegExp.test(oElement.className)){			arrReturnElements.push(oElement);		}		}	return (arrReturnElements)}// Array support for the push method in IE 5if(typeof Array.prototype.push != "function"){	Array.prototype.push = ArrayPush;	function ArrayPush(value){		this[this.length] = value;	}}// Performs initial preparation of the page for displayfunction init() {	// quit if this function has already been called    if (arguments.callee.done) return;    // flag this function so we don't do the same thing twice    arguments.callee.done = true;    // kill the timer    if (_timer) clearInterval(_timer);		prepareGalleries();	lightwindowInit();}// Instruct Mozilla/Opera to run init() once the DOM has loadedif (document.addEventListener) {    document.addEventListener("DOMContentLoaded", init, false);}// Then instruct IE/*@cc_on @*//*@if (@_win32)    document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");    var script = document.getElementById("__ie_onload");    script.onreadystatechange = function() {        if (this.readyState == "complete") {            init(); // call the onload handler        }    };/*@end @*/// And Safariif (/WebKit/i.test(navigator.userAgent)) { // sniff    var _timer = setInterval(function() {        if (/loaded|complete/.test(document.readyState)) {            init(); // call the onload handler        }    }, 10);}// And finally, anybody elsewindow.onload = init;