// You want code samples of my work, here's a code sample right here.
// This code took 2 years to evolve into what you see here.  Most people will never appreciate the effort involved
// and they'll just "borrow" this code without thinking about any of that.  All I ask is that you keep this notice
// in the code.  Thanks
//
// Popup Tooltips and Windows by Eric Hwang Version 1.3

var pu_event = {

  add: function(obj, etype, fp, cap) {
    cap = cap || false;
    if (obj.addEventListener) obj.addEventListener(etype, fp, cap);
    else if (obj.attachEvent) obj.attachEvent("on" + etype, fp);
  }, 

  remove: function(obj, etype, fp, cap) {
    cap = cap || false;
    if (obj.removeEventListener) obj.removeEventListener(etype, fp, cap);
    else if (obj.detachEvent) obj.detachEvent("on" + etype, fp);
  }, 

  DOMit: function(e) { 
    e = e? e: window.event;
    e.tgt = e.srcElement? e.srcElement: e.target;
    
    if (!e.preventDefault) e.preventDefault = function () { return false; }
    if (!e.stopPropagation) e.stopPropagation = function () { if (window.event) window.event.cancelBubble = true; }
        
    return e;
  }  
}

var viewport = {
	
  getWinWidth: function () {
    this.width = 0;
    if (window.innerWidth) this.width = window.innerWidth - 18;
    else if (document.documentElement && document.documentElement.clientWidth) 
  		this.width = document.documentElement.clientWidth;
    else if (document.body && document.body.clientWidth) 
  		this.width = document.body.clientWidth;
  },
  
  getWinHeight: function () {
    this.height = 0;
    if (window.innerHeight) this.height = window.innerHeight - 18;
  	else if (document.documentElement && document.documentElement.clientHeight) 
  		this.height = document.documentElement.clientHeight;
  	else if (document.body && document.body.clientHeight) 
  		this.height = document.body.clientHeight;
  },
  
  getScrollX: function () {
    this.scrollX = 0;
  	if (typeof window.pageXOffset == "number") this.scrollX = window.pageXOffset;
  	else if (document.documentElement && document.documentElement.scrollLeft)
  		this.scrollX = document.documentElement.scrollLeft;
  	else if (document.body && document.body.scrollLeft) 
  		this.scrollX = document.body.scrollLeft; 
  	else if (window.scrollX) this.scrollX = window.scrollX;
  },
  
  getScrollY: function () {
    this.scrollY = 0;    
    if (typeof window.pageYOffset == "number") this.scrollY = window.pageYOffset;
    else if (document.documentElement && document.documentElement.scrollTop)
  		this.scrollY = document.documentElement.scrollTop;
  	else if (document.body && document.body.scrollTop) 
  		this.scrollY = document.body.scrollTop; 
  	else if (window.scrollY) this.scrollY = window.scrollY;
  },
  
  getAll: function () {
    this.getWinWidth(); this.getWinHeight();
    this.getScrollX();  this.getScrollY();
  }
}

var PopUp = {
	
    followMouse: true,
    offX: 8,
    offY: 12,
    tipID: "tipDiv",
    showDelay: 500,
    hideDelay: 100,
	Transparent: 95,
	fadeSpeed: 30,
	ready:false,
	timer:null,
	tip:null,
	FSfont: screen.fontSmoothingEnabled,
	
	init:function(){
		if(document.createElement&&document.body&&typeof document.body.appendChild!="undefined"){
			if(!document.getElementById(this.tipID)){
				var el=document.createElement("DIV");
				el.id=this.tipID;
				document.body.appendChild(el);
			}
			this.ready=true;
		}
	},
	
	show:function(e,msg,w){
		if(this.timer){
			clearTimeout(this.timer);
			this.timer=0;
		}
		this.tip=document.getElementById(this.tipID);
		if(this.followMouse) pu_event.add(document,"mousemove",this.trackMouse,true);
		this.writeTip("");
		this.writeTip(msg);
		viewport.getAll();
		this.positionTip(e);
		this.tip.style.width=w+"px";
		this.timer=setTimeout("PopUp.toggleVis('"+this.tipID+"', 'visible')",this.showDelay);
	},
	
	writeTip:function(msg){
		if(this.tip&&typeof this.tip.innerHTML!="undefined")this.tip.innerHTML=msg;
	},
	
	positionTip:function(e){
		if(this.tip&&this.tip.style){
			var x=e.pageX?e.pageX:e.clientX+viewport.scrollX;
			var y=e.pageY?e.pageY:e.clientY+viewport.scrollY;
			if(x+this.tip.offsetWidth+this.offX>viewport.width+viewport.scrollX){
				x=x-this.tip.offsetWidth-this.offX;
				if(x<0)x=0;
			}else x=x+this.offX;
			if(y+this.tip.offsetHeight+this.offY>viewport.height+viewport.scrollY){
				y=y-this.tip.offsetHeight-this.offY;
				if(y<viewport.scrollY)y=viewport.height+viewport.scrollY-this.tip.offsetHeight;
			}else y=y+this.offY;
			this.tip.style.left=x+"px";
			this.tip.style.top=y+"px";
		}
	},
	
	hide:function(){
		if(this.timer){
			clearTimeout(this.timer);
			this.timer=0;
		}
		this.timer=setTimeout("PopUp.toggleVis('"+this.tipID+"', 'hidden')",this.hideDelay);
		if(this.followMouse)pu_event.remove(document,"mousemove",this.trackMouse,true);
		this.tip=null;
	},

	fadeout:function() {
		if(this.timer){
			clearTimeout(this.timer);
			this.timer=0;
		}
		this.tip = document.getElementById(this.tipID);
		this.Transparent -= 5;
		if (this.Transparent < 5) {
			//clearTimeout(this.timer);
			this.tip.style.visibility = "hidden";
			PopUp.setOpacity(95);
			//PopUp.setBkgd(100);
			if(this.followMouse)pu_event.remove(document,"mousemove",this.trackMouse,true);
			this.tip=null;
			return false;
		} else {
			PopUp.setOpacity(this.Transparent);
			this.timer=setTimeout("PopUp.fadeout()",this.fadeSpeed);
		}
	},
	
	toggleVis:function(id,vis){
		var el=document.getElementById(id);
		if(el) el.style.visibility=vis;
		//if(vis == "visible") PopUp.setBkgd(60);
	},
	
	setBkgd:function(e) {
		var ht=document.getElementById("enclosure");
		if(ht) {
			if(document.all) {
				ht.style.filter = "alpha(opacity="+ e +")";
				if(this.FSfont) ht.style.background = "white url(images/barbkgd1.gif) repeat-x"; //fixes change in smoothing in IE7
			} else {
				ht.style.opacity = e/95;
			}
		}
	},

	trackMouse:function(e){
		e=pu_event.DOMit(e);
		PopUp.positionTip(e);
	},
	
	setOpacity: function(e){
		if (this.tip) {
			this.tip.style.filter = "alpha(opacity="+ e +")";
			this.tip.style.opacity = e/95;
		}
		this.Transparent = e;
	}
};

PopUp.tipOutCheck = function(e) {
  e = pu_event.DOMit(e);
  // is element moused into contained by PopUp?
  var toEl = e.relatedTarget? e.relatedTarget: e.toElement;
  if ( this != toEl && !contained(toEl, this) ) PopUp.fadeout(); 
}

PopUp.timerId = 0;
PopUp.clearTimer = function() {
	if (PopUp.timerId) { clearTimeout(PopUp.timerId); PopUp.timerId = 0; }
	PopUp.setOpacity(95);
}

PopUp.unHookHover = function () {
    var tip = document.getElementById? document.getElementById(PopUp.tipID): null;
    if (tip) {
        tip.onmouseover = null; 
        tip.onmouseout = null;
        tip = null;
	}
}
// returns true of oNode is contained by oCont (container)
function contained(oNode, oCont) {
  if (!oNode) return; // in case alt-tab away while hovering (prevent error)
  while ( oNode = oNode.parentNode ) if ( oNode == oCont ) return true;
  return false;
}
// e=event, msg=one of the above variables, w=width of popup
function doPopUp(e, msg, w) {
  if ( typeof PopUp == "undefined" || !PopUp.ready ) return;
  PopUp.clearTimer();
  var tip = document.getElementById? document.getElementById(PopUp.tipID): null;
  if ( tip && tip.onmouseout == null ) {
		tip.onmouseout = PopUp.tipOutCheck;
		tip.onmouseover = PopUp.clearTimer;
  }
  PopUp.show(e, msg, w);
}

function hideTip() {
  if ( typeof PopUp == "undefined" || !PopUp.ready ) return;
  PopUp.timerId = setTimeout("PopUp.fadeout()", 100);
}

// Removes the titles from the hover links that appear when JS is disabled
function nullLinks() {
	hoverLinks = document.getElementsByTagName("a");
	for (var i=0; i < hoverLinks.length; i++)	{
		if (hoverLinks[i].className == "rollover") { 
			//alert(hoverLinks[i].getAttribute("title"));
			hoverLinks[i].setAttribute("title","");
		}
	}
}

pu_event.add(window, "unload", PopUp.unHookHover, true);

// adjust horizontal and vertical offsets here
// (distance from mouseover event which activates PopUp)
PopUp.offX = 40;  
PopUp.offY = -10;
PopUp.followMouse = true;  // must be turned off for hover-tip

// Standard PopUp content variables that contain the actual HTML for the popup; add more as necessary.
var popup001='<h3>AT&amp;T Wireless</h3><img src="images/site1.gif"><br />' +
'<p>The first intranet site for the new AT&amp;T Wireless. Implemented in 1996 before there were any corporate standards, much less web standards.  I designed and developed this entire site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'Visual Design Specifications, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Templates</p>';
var popup002='<h3>AT&amp;T Wireless</h3><img src="images/site2.gif"><br />' +
'<p>Intranet site for the Enterprise Network Support Group. I designed and developed this entire site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'Visual Design Specifications, ' +
'Graphics, Icons, ' +
'Programming & Analysis, ' +
'Templates</p>';
var popup003='<h3>AT&amp;T Wireless</h3><img src="images/site3.gif"><br />' +
'<p>Intranet site for the Legal Department. I designed and developed this entire site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Templates</p>';
var popup004='<h3>Event Electronics</h3><img src="images/site4.gif"><br />' +
'<p>Internet site for an audio equipment manufacturer. This was version 2 of the site that simplifed the navigational structure. I designed and developed this entire site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Client & Professional Services, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Templates</p>';
var popup005='<h3>Stevedoring Services of America</h3><img src="images/site5.gif"><br />' +
'<p>Internet site design, development and graphics. I designed and developed this entire site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'Client & Professional Services, ' +
'Marketing, SEO & Conversion, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Templates</p>';
var popup006='<h3>Macpherson Loudspeakers</h3><img src="images/site6.gif"><br />' +
'<p>Site concept.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons</p>';
var popup007='<h3>Visual Odyssey</h3><img src="images/site7.gif"><br />' +
'<p>An early personal photography portfolio and blog site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'Marketing, SEO & Conversion, ' +
'Visual Design Specifications, ' +
'Graphics, Icons & Photography, ' +
'Scripting, Stylesheets & Media, ' +
'Templates</p>';
var popup008='<h3>Dream, Explore, Discover</h3><img src="images/site8.gif"><br />' +
'<p>Personal web site, version 2. Blogging before it was called that.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Marketing, SEO & Conversion, ' +
'Visual Design Specifications, ' +
'Graphics, Icons & Photography, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'CMS Setup & Templates</p>';
var popup009='<h3>Event Electronics</h3><img src="images/site9.gif"><br />' +
'<p>Internet site design, development and graphics. Version 2 concept.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Marketing, SEO & Conversion, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media</p>';
var popup010='<h3>Event Electronics</h3><img src="images/site10.gif"><br />' +
'<p>Internet site design, development and graphics. Version 1. I designed and developed this entire site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'Visual Design Specifications, ' +
'Graphics, Icons, ' +
'Programming & Analysis, ' +
'Marketing, SEO & Conversion, ' +
'UI, UX, HCI & User Testing, ' +
'Templates, ' +
'Wireframes & Mockups</p>';
var popup011='<h3>Longing</h3><img src="images/site11.gif"><br />' +
'<p>Personal web site about a time I would rather forget, but I liked the design.</p>' +
'<p>Skills used: Visual Design Specifications, ' +
'Graphics, Icons & Photography, ' +
'Scripting, Stylesheets & Media</p>';
var popup012='<h3>AT&amp;T Wireless</h3><img src="images/site12.gif"><br />' +
'<p>Corporate intranet site version 2</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Business Process Reengineering, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Templates, ' +
'Database Design & SQL Procedures</p>';
var popup013='<h3>Dream, Explore, Discover</h3><img src="images/site13.gif"><br />' +
'<p>My personal and first Internet web site.</p>' +
'<p>Skills used: Visual Design Specifications, ' +
'Graphics, Icons & Photography, ' +
'Programming & Analysis</p>';
var popup014='<h3>AT&amp;T Wireless</h3><img src="images/site14.gif"><br />' +
'<p>External Affairs site concept.</p>' +
'<p>Skills used: UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons</p>';
var popup015='<h3>Phare Web</h3><img src="images/site15.gif"><br />' +
'<p>Flash promotional piece.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'Visual Design Specifications, ' +
'Graphics, Icons & Photography, ' +
'Scripting, Stylesheets & Media</p>';
var popup016='<h3>AT&amp;T Wireless</h3><img src="images/site16.gif"><br />' +
'<p>Online version of the Comline Newsletter.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Templates</p>';
var popup017='<h3></h3><img src="images/site17.gif"><br />' +
'<p>Test Text</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Business Process Reengineering, ' +
'Client & Professional Services, ' +
'Marketing, SEO & Conversion, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons & Photography, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'CMS Setup & Templates, ' +
'Database Design & SQL Procedures</p>';
var popup018='<h3>BIAS</h3><img src="images/site18.gif"><br />' +
'<p>The earliest e-Commerce site I created for the Macintosh audio software company. I designed and developed the entire site using Perl and CGI.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Client & Professional Services, ' +
'Marketing, SEO & Conversion, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons & Photography, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Templates, ' +
'Database Design & SQL Procedures</p>';
var popup019='<h3>BIAS</h3><img src="images/site19.gif"><br />' +
'<p>Alternative version site concept.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media</p>';
var popup020='<h3>Capitol Computers</h3><img src="images/site20.gif"><br />' +
'<p>Site concept.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media</p>';
var popup021='<h3>Open Market Alliance</h3><img src="images/site21.gif"><br />' +
'<p>I designed and developed the original templates for this local business organization site.</p>' +
'<p>Skills used: Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Templates</p>';
var popup022='<h3>American Safari Cruises</h3><img src="images/site22.gif"><br />' +
'<p>Internet site for a small Seattle-based cruise company. I designed and developed this entire site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Client & Professional Services, ' +
'Marketing, SEO & Conversion, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons & Photography, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Templates</p>';
var popup023='<h3>Illusionz</h3><img src="images/site23.gif"><br />' +
'<p>Internet site for a Bellevue-based entertainment company. I designed and developed this entire site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Client & Professional Services, ' +
'Marketing, SEO & Conversion, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Templates</p>';
var popup024='<h3>RAF Technology</h3><img src="images/site24.gif"><br />' +
'<p>Internet site for a Seattle-based document and OCR software company. I designed and developed the page templates for this site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'Client & Professional Services, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Templates</p>';
var popup025='<h3>Sony</h3><img src="images/site25.gif"><br />' +
'<p>This secure intranet document management and repository site for the Sony Strategic Technology Group was designed and developed entirely by me using PHP and MySQL database on a UNIX platform.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Business Process Reengineering, ' +
'Client & Professional Services, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'CMS Setup & Templates, ' +
'Database Design & SQL Procedures</p>';
var popup026='<h3>AT&amp;T Wireless</h3><img src="images/site26.gif"><br />' +
'<p>Corporate intranet site version 3. I designed and developed this entire site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Database Design & SQL Procedures</p>';
var popup027='<h3>AT&amp;T Wireless</h3><img src="images/site27.gif"><br />' +
'<p>Original intranet site for External Affairs. I designed and developed this entire site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Database Design & SQL Procedures</p>';
var popup028='<h3>Integrex</h3><img src="images/site28.gif"><br />' +
'<p>This Internet site was for a local manufacturing company. I designed and developed this entire site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Client & Professional Services, ' +
'Marketing, SEO & Conversion, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Templates, ' +
'Database Design & SQL Procedures</p>';
var popup030='<h3>AT&amp;T Wireless</h3><img src="images/site30.gif"><br />' +
'<p>The content managed site for External Affairs featured dynamic menus based on content.  I designed and developed the entire site and homegrown content management system using ColdFusion and MS-SQL Server.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Business Process Reengineering, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'CMS Setup & Templates, ' +
'Database Design & SQL Procedures</p>';
var popup031='<h3>AT&amp;T Wireless</h3><img src="images/site31.gif"><br />' +
'<p>The content managed intranet site for National Billing and Roaming allowed them to maintain their own content without IT support.  I designed and developed the entire site using .NET technologies.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Database Design & SQL Procedures</p>';
var popup032='<h3>AT&amp;T Wireless</h3><img src="images/site32.gif"><br />' +
'<p>The Campaign Management Tool is an intranet web application capable of processing millions of customer records and provided advanced reporting functions previously unavailable to Marketing. I designed and developed the entire site using ColdFusion and MS-SQL Server as an interim solution that saved the company millions of dollars.  It is still in use today.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Business Process Reengineering, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Database Design & SQL Procedures</p>';
var popup033='<h3>AT&amp;T Wireless</h3><img src="images/site33.gif"><br />' +
'<p>I designed and developed the Performance Management and Reporting intranet site using ColdFusion and MS-SQL Server.  It allowed customers to enter and track requests for ad-hoc metrics reports.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'CMS Setup & Templates, ' +
'Database Design & SQL Procedures</p>';
var popup034='<h3>Ample Supply</h3><img src="images/site34.gif"><br />' +
'<p>Site concept.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Scripting, Stylesheets & Media</p>';
var popup035='<h3>AT&amp;T Wireless</h3><img src="images/site35.gif"><br />' +
'<p>I developed and launched the United We Stand site just hours after 9/11 using stories and photos from AT&amp;T Wireless employees in and around the New York and DC areas.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'Visual Design Specifications, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Programming & Analysis</p>';
var popup036='<h3>AT&amp;T Wireless</h3><img src="images/site36.gif"><br />' +
'<p>I designed and developed the templates for the corporate United Way Community Giving Campaign site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis</p>';
var popup037='<h3>AT&amp;T Wireless</h3><img src="images/site37.gif"><br />' +
'<p>The Take-it-to-the-Bank intranet site provided information and metrics for customer service representative.  I designed and developed the entire site in ColdFusion.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'CMS Setup & Templates</p>';
var popup038='<h3>Core Design, Inc.</h3><img src="images/site38.gif"><br />' +
'<p>I helped in developing and maintaining this site for a local real-estate developer done entirely in Flash with a LAMP/XML backend.</p>' +
'<p>Skills used: UI, UX, HCI & User Testing, ' +
'Client & Professional Services, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Database Design & SQL Procedures</p>';
var popup039='<h3>Enchanted Learning </h3><img src="images/site39.gif"><br />' +
'<p>This sample topic page was a proof of concept. Check out the print preview to see how CSS formats the screen versus the printed page.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons & Photography, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis</p>';
var popup040='<h3>Enchanted Learning </h3><img src="images/site40.gif"><br />' +
'<p>I designed and developed the registration and member database for this Internet e-Commerce site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Client & Professional Services, ' +
'Marketing, SEO & Conversion, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Database Design & SQL Procedures</p>';
var popup041='<h3>Spectralux, Inc.</h3><img src="images/site41.gif"><br />' +
'<p>I developed this Internet site for a local avionics company using a highly customized Mambo Content Management System installation. I also provided a majority of the photography for this site.</p>' +
'<p>Skills used: UI, UX, HCI & User Testing, ' +
'Client & Professional Services, ' +
'Graphics, Icons & Photography, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'CMS Setup & Templates</p>';
var popup042='<h3>King Group Events</h3><img src="images/site42.gif"><br />' +
'<p>This Internet site is for a San Diego based wine event business. I designed and developed this entire site, along with most of the photography.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'Client & Professional Services, ' +
'Marketing, SEO & Conversion, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons & Photography, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Templates</p>';
var popup043='<h3>Regence</h3><img src="images/site43.gif"><br />' +
'<p>The Information Transparency about Providers (ITAP) site allows providers to see how they rate on quality and cost. I designed and developed the front-end for this site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Scripting, Stylesheets & Media</p>';
var popup044='<h3>Regence</h3><img src="images/site44.gif"><br />' +
'<p>The product comparison tool for agents and brokers is an online web application using drag and drop functionality along with AJAX.  I designed and developed the user interface for this site using extensive customer testing and iterative development.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media</p>';
var popup045='<h3>Regence</h3><img src="images/site45.gif"><br />' +
'<p>This is an example of hi-fi prototypes, wireframe mockups, use case flows and site map for individual sales.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Business Process Reengineering, ' +
'Wireframes & Mockups</p>';
var popup046='<h3>Regence</h3><img src="images/site46.gif"><br />' +
'<p>The Ovation broker incentive plan promotional piece visually demonstrates how the incentive plan works. I designed and development this entire piece in Flash.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis</p>';
var popup047='<h3>Regence</h3><img src="images/site47.gif"><br />' +
'<p>HSA product launch and Flash promotional piece art direction.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications</p>';
var popup048='<h3>Regence</h3><img src="images/site48.gif"><br />' +
'<p>The goal of the Internet product detail page was to standardize the information on each product so customers could comparison shop.  I designed and developed the user interface for the product templates used in the current site, which won the eHealthcare Leadership 2008 Award of Distinction for Best Design</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
'Programming & Analysis, ' +
'Templates</p>';
var popup049='<h3>HP Sales Operations</h3><img src="images/site49.gif"><br />' +
'<p>Flash presentation with professional voice-overs to kick off new sales reorganization.</p>' +
'<p>Skills used: Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media</p>';
var popup050='<h3>PhotoWorks</h3><img src="images/site50.gif"><br />' +
'<p>Transitioned the existing web site from older coding practices to standards-based code with updated site architecture, stylesheets and improved SEO visibility.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Marketing, SEO & Conversion, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Graphics, Icons, ' +
'Scripting, Stylesheets & Media, ' +
' Templates</p>';
var popup051='<h3>PhotoWorks</h3><img src="images/site51.gif"><br />' +
'<p>Developed design specifications, use flows and hi-fi wireframes (shown above) for a new Flash application to create Photo Books.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Marketing, SEO & Conversion, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Stylesheets, Templates</p>';
var popup052='<h3>The Giving Deal</h3><img src="images/site52.gif"><br />' +
'<p>Overall information technology strategy, systems architecture, operations, security, and development life cycle ' +
'of a startup social group-coupon/charitable-giving web site.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI, ' +
'Visual Design Specifications, ' +
'Client & Professional Services, ' +
'Wireframes & Mockups, ' +
'Scripting, Programming & Analysis, ' +
'Stylesheets, Templates, ' +
'Database Design & SQL Procedures</p>';
var popup053='<h3>The Giving Deal Mobile</h3><img src="images/site53.gif"><br />' +
'<p>Mobile version of the website.</p>' +
'<p>Skills used: Architecture and Navigation, ' +
'UI, UX, HCI & User Testing, ' +
'Visual Design Specifications, ' +
'Wireframes & Mockups, ' +
'Stylesheets, Templates</p>';
var popup054='<h3>MITS</h3><img src="images/site54.gif"><br />' +
'<p>Redesigned website with CSS templates along with Javascript and HTML driven animated banner.</p>' +
'<p>Skills used: UI, UX, HCI, ' +
'Scripting, Programming & Analysis, ' +
'Stylesheets, Templates</p>';