// Onload start
window.addEvent('domready', function() {

		$('tagMore').setStyles({
		'opacity': '0',
		'display': 'block'
		});
		
//		$('productMore').setStyles({
//		'opacity': '0',
//		'display': 'block'
//		});
		
		$('serviceMore').setStyles({
		'opacity': '0',
		'display': 'block'
		});
		
		$('interactionMore').setStyles({
		'opacity': '0',
		'display': 'block'
		});
		
		$('informationMore').setStyles({
		'opacity': '0',
		'display': 'block'
		});
		
		$('projectMoreContent').setStyles({
		'opacity': '0',
		'display': 'block'
		});
		
// Load assets

var preloadedImages = new Asset.images([
'img/stalkTop.gif',
'img/stalkLH.gif',
'img/stalkRH.gif',
'img/Dan4-TechnologyIconHover.gif',
'img/Dan4-PersonIconHover.gif',
'img/Dan4-Project2.jpg',
'img/Dan4-Project3.gif', 
'img/Dan4-Project4.jpg', 
'img/Dan4-Project5.jpg', 
'img/Dan4-Project10.jpg',
'img/Dan4-Project11.jpg', 
'img/Dan4-Project12.jpg', 
'img/Dan4-Method2.jpg',
'img/Dan4-Method15.gif', 
'img/Dan4-Method16.gif',
'img/Dan4-Method17.jpg',
'img/Dan4-Method3.jpg', 
'img/Dan4-Method4.jpg', 
'img/Dan4-Project6.jpg', 
'img/Dan4-Project7.jpg', 
'img/Dan4-Project8.gif', 
'img/Dan4-Project9.jpg', 
'img/Dan4-Method5.gif', 
'img/Dan4-Method6.jpg',
'img/Dan4-Method7.gif', 
'img/Dan4-Method8.jpg', 
'img/Dan4-Method9.jpg',
'img/Dan4-Method10.jpg', 
'img/Dan4-Method11.jpg',
'img/Dan4-Method12.jpg', 
'img/Dan4-Method13.gif', 
'img/Dan4-Method14.jpg',
]);

// Install events



$('tagLine').addEvents({
'mouseenter': displayElement.bind($('tagMore')),
'mouseleave': hideElement.bind($('tagMore'))
});

$('service').addEvents({
'mouseenter': displayElement.bind($('serviceMore')),  
'mouseleave': hideElement.bind($('serviceMore'))
});

//$('product').addEvents({
//'mouseenter': displayElement.bind($('productMore')),
//'mouseleave': hideElement.bind($('productMore'))
//});

$('interaction').addEvents({
'mouseenter': displayElement.bind($('interactionMore')),
'mouseleave': hideElement.bind($('interactionMore'))
});


$('information').addEvents({
'mouseenter': displayElement.bind($('informationMore')), 
'mouseleave': hideElement.bind($('informationMore'))
});


$('information').addEvents({
'mouseenter': displayElement.bind($('informationMore')),
'mouseleave': hideElement.bind($('informationMore'))
});


$('projectMore').addEvents({
'mouseenter': displayElement.bind($('projectMoreContent')), 
'mouseleave': hideElement.bind($('projectMoreContent'))
});


$('projectNext').addEvents({
'mouseenter': rollOn,
'mouseleave': rollOff,
'mousedown': mouseDown,
'mouseup': mouseUp,
'click': changeProject
});


$('projectPrev').addEvents({
'mouseenter': rollOn,
'mouseleave': rollOff,
'mousedown': mouseDown,
'mouseup': mouseUp,
'click': changeProject
});


$('methodNext').addEvents({
'mouseenter': rollOn,
'mouseleave': rollOff,
'mousedown': mouseDown,
'mouseup': mouseUp,
'click': changeMethod
});


$('methodPrev').addEvents({
'mouseenter': rollOn,
'mouseleave': rollOff,
'mousedown': mouseDown,
'mouseup': mouseUp,
'click': changeMethod
})


})
// Onload finish


// Functions

var displayElement = function(event){
		event.target.setStyle('color', 'rgb(64, 64, 64)');
		
		if (this.get('id')=='tagMore'){$('personIcon').set('src','img/Dan4-PersonIconHover.gif');$('technologyIcon').set('src','img/Dan4-TechnologyIconHover.gif');
		$('tagLine').setStyle('color', 'rgb(64, 64, 64)')};
		
		this.set('tween',{
		duration: 10,
		link: 'chain'
		});
		this.tween('opacity', 1);
		}

var hideElement = function(event){
		event.target.setStyle('color', 'red');

		if (this.get('id')=='tagMore'){$('personIcon').set('src','img/Dan4-PersonIcon.gif');$('technologyIcon').set('src','img/Dan4-TechnologyIcon.gif');
		$('tagLine').setStyle('color', 'red')};

		this.set('tween',{
		duration: 300,
		link: 'chain', 
		transition: Fx.Transitions.Circ.easeOut
		});
		this.tween('opacity', 0);
		}




var rollOn = function(){
		this.setStyle('color', 'rgb(64, 64, 64)');
		}

var rollOff = function(){
		this.setStyle('color', 'red');
		}

var mouseUp = function(){
		this.setStyle('color', 'rgb(64, 64, 64)');
		}


var mouseDown = function(){
		this.set({styles:{color: 'black'}});
		}





function changeProject(){
		
		var projectN= Array();
		projectN[0]=Array('img/Dan4-Project1.png', "Suite of mobile and web-based products for authoring, publishing and viewing hyperlocal news and other content relevant to your current location and interests.", 'Stealth startup', '<p>Project activities: User research, rapid prototyping, user testing, information architecture, interaction design, interface design.</p><p>Responsibility: Dan4, Inc.</p><p>Image: Detail of map view concept</p><span class="stalkR"></span>');
		projectN[1]=Array('img/Dan4-Project2.jpg', 'Touchscreen user interface design for a <abbr title="Global Positioning System">GPS</abbr> guided precision steering and control system fitted to agricultural vehicles. The system is used by business minded farmers.', 'AutoFarm','<p>Project activities: Research, interaction design, information architecture, wireframing, graphic design, user interface widget library, graphical assets, design styleguide.</p><p>Responsibility: Dan4, Inc.</p><p>Image: Graphical mock-up.</p><span class="stalkR"></span>');
		projectN[2]=Array('img/Dan4-Project3.gif', 'Web application helping people establish the copyright status of books and other printed materials. The registry aims to accelerate mass digitization efforts. ', 'OCLC', '<p>Project activities: Interpretation of business requirements, interaction design, design strategy, information architecture, wireframing, paper prototypes, user testing, specification.</p><p>Responsibility: Dan4, Inc.</p><p>Image: Graphical mock-up.</p><span class="stalkR"></span>');
		projectN[3]=Array('img/Dan4-Project4.jpg', 'Mobile device user interface including prototyping, user testing, design development, and detailed content and screenflow specification. ', 'Motorola', '<p>Project activities: Interaction design, rapid prototyping, wireframing, user testing, UI widget library, screenflow specification, liaising with software engineering.</p><p>Responsibility: Dan4, Inc. with Motorola team.</p><p>Image: Handset and screen design concepts by Motorola.</p><span class="stalkR"></span>');
		projectN[4]=Array('img/Dan4-Project5.jpg', 'Service design and specification of UK national program helping high technology startups use design thinking to raise funding and launch successful products. ', 'Design Council', '<p>Project activities: Shadowing, user observations, touchpoint prototyping, design strategy, service design and specification.</p><p>Responsibility: Max while Design Strategist at the Design Council.</p><p>Image: Detail of marketing collateral by Purpose, UK for the Design Council.</p><span class="stalkR"></span>');
		projectN[5]=Array('img/Dan4-Project6.jpg', 'Device for continuous monitoring of subcutaneous interstitial fluid, used in diabetes diagnosis. This prototype design was used in Phase I clinical trials. ', 'International Interstitial Technologies','<p>Project activities: Research, mechanism design, prototyping, design development, CAD modelling.</p><p>Responsibility: Max while Senior Designer at IDEO.</p><p>Image: Rendering taken from CAD model.</p><span class="stalkR"></span>');
		projectN[6]=Array('img/Dan4-Project7.jpg', 'High profile technology showcase space including live online chat studio for celebrity interviews and public-facing window-mounted interactive installations. ', 'BBC New Media & Technology', '<p>Project activities: Project point contact, contractor management, interior design lead, interactive installations development, talks, tours, performance reporting.</p><p>Responsibility: Athena while Producer at BBC.</p><p>Image: Photograph of live chat studio in use.</p><span class="stalkR"></span>');
		projectN[7]=Array('img/Dan4-Project8.gif', 'Service concept development and innovation for European and Japanese markets. The concepts integrated handset, point-of-sale and web touchpoint experiences. ', 'Vodafone', '<p>Project activities: Competitor review, personas, fieldwork and user research, brainstorming, concept development, user testing, UML specification.</p><p>Responsibility: Dan4, Ltd. for Instrata, Ltd.</p><p>Image: Graphical mock-up.</p><span class="stalkR"></span>');
		projectN[8]=Array('img/Dan4-Project9.jpg', 'Thermal cycler for controlling <abbr title="Polymerase Chain Reaction ">PCR</abbr> processes. This model is for large-scale sequencing labs, and has become a standard tool used by scientists in genomic research.  ', 'Thermo Hybaid', '<p>Project activities: Product architecture, detail mechanical design, plastic molding and sheet metal detailing, industrial design.</p><p>Responsibility: Max while Product Design Consultant at Concurrent Design Group, UK.</p><p>Image: Rendering taken from CAD model.</p><span class="stalkR"></span>');
		projectN[9]=Array('img/Dan4-Project10.jpg', 'Workshop for 50 software developers, team leads and senior managers guiding them in the use of user centered innovation and design thinking within their business. ', 'Checkpoint', '<p>Project activities: Workshop co-facilitation, creation of rapid prototype.</p><p>Responsibility: Dan4, Inc. for Living Patterns.</p><p>Image: Photographs of the workshop in action.</p><span class="stalkR"></span>');
		projectN[10]=Array('img/Dan4-Project11.jpg', 'Business process maps showing the people, tasks, and tools for delivery of a complex new service spanning multiple departments, each with their own systems and culture. ', 'BBC Television','<p>Project activities: Requirements gathering, user interviews, information and data analysis, visual design, project management.</p><p>Responsibility: Dan4, Ltd.</p><p>Image: Large format printed documents, part the project deliverable.</p><span class="stalkR"></span>');
		projectN[11]=Array('img/Dan4-Project12.jpg', "Interactive video installation for the Xerox corporate showroom in New York City. The installation responds to people's presence as they pass by.", 'Xerox', '<p>Project activities: Technology research, system design, installation and validation.</p><p>Responsibility: Athena while Interaction Designer at IDEO.</p><p>Image: Photograph of the final working installation.</p><span class="stalkR"></span>');

		var currentN=$("projects").getElement('img').get('src');
		
		var N=parseInt(currentN.substring(currentN.lastIndexOf("Project")+7, currentN.length), 10);

		N=(this.get('id')=='projectNext')?N+1:N-1;
		N=(N==0 && this.get('id')=='projectPrev')?(projectN.length):N;
		N=(N==projectN.length+1 && this.get('id')=='projectNext')?1:N;
		
		NPre=(this.get('id')=='projectNext')?N+1:N-1;
		NPre=(NPre==0 && this.get('id')=='projectPrev')?(projectN.length):NPre;
		NPre=(N==projectN.length+1 && this.get('id')=='projectNext')?0:NPre;
		
		$("projects").getElement('img').set({'src': projectN[N-1][0], 'alt': projectN[N-1][1]});
		$("projects").getElement('h2').set('html', projectN[N-1][2]);
		$("projects").getElement('h3').set('html', N + ' of ' + projectN.length);
		$("projectCaption").set('html', projectN[N-1][1]);
		$("projectMoreContent").set('html', projectN[N-1][3]);
		var Preload = new Asset.image(projectN[NPre-1][0]);		
}

function changeMethod(){
				
		var methodN= Array();
		methodN[0]=Array('img/Dan4-Method1.jpg', 'Quick mock-ups showing how a product, service or interaction will work in context, in this case using video animation. Useful for efficiently describing and developing an idea.', 'Rapid prototyping');
		methodN[1]=Array('img/Dan4-Method2.jpg', 'Documents used in service design and specification, capturing the internal roles, tools, processes, and external interactions and touchpoints comprising the service.', 'Service blueprints');
		methodN[2]=Array('img/Dan4-Method3.jpg', 'Applied ethnographic tool providing a view into how users actually behave and what they do in context. Used to discover latent needs and inform the design process.', 'User observations');
		methodN[3]=Array('img/Dan4-Method4.jpg', 'Diagrams and conceptual models used to synthesize and illustrate insights from research, support analysis, identify opportunities, and structure future work.', 'Frameworks');
// Onload finish		methodN[4]=Array('/img/Dan4-Method5.jpg', 'Models, renderings, photographic mock-ups, drawings and sketches used to succinctly communicate a proposed concept.', 'Illustrated concepts');
		methodN[4]=Array('img/Dan4-Method5.gif', "Diagrams showing layout of software content and navigation elements, used as a design tool and for team member, stakeholder, and user feedback.", 'Wireframes');
		methodN[5]=Array('img/Dan4-Method6.jpg', 'Formal or informal feedback sessions where users interact with prototypes to accomplish predetermined tasks. Feedback is used to improve design and reduce risk.', 'User testing');
		methodN[6]=Array('img/Dan4-Method7.gif', 'Functional specifications of screen contents and interconnections used to communicate the detailed design and design intent to software engineering teams.', 'Screenflows');
		methodN[7]=Array('img/Dan4-Method8.jpg', "User archetype representing qualities of a broader demographic or target group, used as a reminder to take the user's point of view when making design decisions.", 'Personas');
		methodN[8]=Array('img/Dan4-Method9.jpg', 'Accurate <abbr title="3 Dimensional">3D</abbr> and <abbr title="2 Dimensional">2D</abbr> data created during the design process and used to specify the final design for production. Models can be reused for renderings and instructional diagrams.', '<abbr title="Computer Aided Design">CAD</abbr> Modelling');
		methodN[9]=Array('img/Dan4-Method10.jpg', 'Physical mock-ups of a screen, process or step in a service, used to quickly try out a design direction or as a prop for requirements gathering and user testing.', 'Paper prototyping');
		methodN[10]=Array('img/Dan4-Method11.jpg', 'Synthesis of many hours of interview footage often arranged by topic. Videos are used by team members to inform and inspire the design process, and to evidence decisions.', 'User interview videos');
		methodN[11]=Array('img/Dan4-Method12.jpg', 'Full documentation of a design including overall intent and detailing. Often referenced by software engineers during development to ensure a consistent user experience.', 'Styleguides');
		methodN[12]=Array('img/Dan4-Method13.gif', 'User experience prototypes used to iterate complex interfaces during the design process, test an idea in detail with users, or describe exact behavior for specification.', 'Interactive prototypes');
		methodN[13]=Array('img/Dan4-Method14.jpg', 'Proof-of-concept prototypes used to demonstrate system functionality and performance, verify the design direction, and identify problems and risks early.', 'Mechanical prototypes');
		methodN[14]=Array('img/Dan4-Method15.gif', "Documents capturing a task-oriented path through a system from a user's point of view. Used to audit an existing system or describe workflows through a new one.", 'User flows');
		methodN[15]=Array('img/Dan4-Method16.gif', "Visual storyboarding of the use of a product, interface, or service, used to communicate or sense-check an idea before committing resources to further development.", 'Scenarios');
		methodN[16]=Array('img/Dan4-Method17.jpg', 'Experimentation and research used to establish technical limitations. Above, an installation for examining human olfactory response and oxidation chemistry of <abbr title="Volatile Organic Compounds">VOCs</abbr>.', 'Feasibility studies');
		
		var currentN=$("methods").getElement('img').get('src');
		
		var N=parseInt(currentN.substring(currentN.lastIndexOf("Method")+6, currentN.length), 10);

		N=(this.get('id')=='methodNext')?N+1:N-1;
		N=(N==0 && this.get('id')=='methodPrev')?(methodN.length):N;
		N=(N==methodN.length+1 && this.get('id')=='methodNext')?1:N;
		
		NPre=(this.get('id')=='methodNext')?N+1:N-1;
		NPre=(NPre==0 && this.get('id')=='methodPrev')?(methodN.length):NPre;
		NPre=(N==methodN.length+1 && this.get('id')=='methodNext')?0:NPre;
		
		$("methods").getElement('img').set({'src': methodN[N-1][0], 'alt': methodN[N-1][1]});
		$("methods").getElement('h2').set('html', methodN[N-1][2]);
		$("methods").getElement('h3').set('html', N + ' of ' + methodN.length);
		$("methodCaption").set('html', methodN[N-1][1]);
		var Preload = new Asset.image(methodN[NPre-1][0]);

}