function cngImg(image){
var changingImg = document.getElementById('changingImg');

changingImg.src=image.src;
changingImg.alt=image.alt;
var temp=image.alt;
temp+="";
var caption=temp.split(' ~ ');
document.getElementById('captions').innerHTML="<h1>" + caption[0] + "</h1><br /><h2>" + caption[1] + "</h2><br /><p>" + caption[2] + "</p>";
if(oldImg){
oldImg.style.opacity=".7";
oldImg.style.filter="alpha(opacity=70)";
}
image.style.opacity="1";
image.style.filter="alpha(opacity=100)";
oldImg=image;
}
function illustration(){
document.getElementById('interest').getElementsByTagName('li')[1].style.border="1px solid white";
document.getElementById('interest').getElementsByTagName('li')[1].style.padding="4px 6px";
document.getElementById('interest').getElementsByTagName('li')[0].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[0].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[2].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[2].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[3].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[3].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[4].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[4].style.padding="5px 7px";
document.getElementById('captions').innerHTML='<h1>Instructive Illustrations</h1><br /><h2>Weldon Owen Publishing</h2><br /> <p> These images were created in the established style utilized in the Show Me Now book series and website. SMN uses simple stylized illustrations to explain how to complete complicated or obscure tasks.</p>';
document.getElementById('changingImg').src='images/matches.png';
document.getElementById('slideshowThumbs').innerHTML=
'<li><img src="images/matches.png" alt="Instructive Illustrations ~ Weldon Owen Publishing ~ These images were created in the established style utilized in the Show Me Now book series and website. SMN uses simple stylized illustrations to explain how to complete complicated or obscure tasks." onclick="cngImg(this)" ></li>' + 
/*'<li><img src="images/banana.png" alt="Instructive Illustrations ~ Weldon Owen Publishing ~ These images were created in the established style utilized in the Show Me Now book series and website. SMN uses simple stylized illustrations to explain how to complete complicated or obscure tasks." onclick="cngImg(this)" ></li>' +*/ 
'<li><img src="images/clipnails.png" alt="Instructive Illustrations ~ Weldon Owen Publishing ~ These images were created in the established style utilized in the Show Me Now book series and website. SMN uses simple stylized illustrations to explain how to complete complicated or obscure tasks." onclick="cngImg(this)" ></li>' + 
/*'<li><img src="images/sanfranturtle.jpg" alt="San Franturtle ~ Watercolor ~ Created for use in a childrens book about the a trip to San Francisco." onclick="cngImg(this)" ></li>' + 
'<li><img src="images/Solar.jpg" alt="Solar 1.0 ~ Watercolor ~ Plants - the original solar panel  " onclick="cngImg(this)" ></li>' +*/ 
'<li><img src="images/carlin.png" alt="In Memory of George Carlin ~ Gouache ~ This caricature was created in memory of George Carlin- a great comedian whose humor has inspired me and shaped my thought process since I was a teenager." onclick="cngImg(this)" ></li>' + 
'<li><img src="images/TomRobbins.jpg" alt="Illustrated Quote from Skinny Legs and All by Tom Robbins ~ Watercolor and Ink ~ This quote keeps me active in may ways artistically. Listen, it is really pretty simple. If there is a thing, a scene, maybe and image that you want to see real bad, that you need to see but it does not exist in the world around you, at least not in the form that you envision, then you create it so that you can look at it and have it around, or show it to other people who would not have imagined it because they percieve reality in a more narrow, predictable way. And that is it. That is all an artist does.           - Tom Robbins" onclick="cngImg(this)" ></li>';
}
function identity(){
document.getElementById('interest').getElementsByTagName('li')[0].style.border="1px solid white";
document.getElementById('interest').getElementsByTagName('li')[0].style.padding="4px 6px";
document.getElementById('interest').getElementsByTagName('li')[1].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[1].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[2].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[2].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[3].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[3].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[4].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[4].style.padding="5px 7px";
document.getElementById('captions').innerHTML='<h1>Ha Ha Yoga</h1><br> <h2>West Chester, Pennsylvania</h2><br><p>This logo was designed for a yoga studio specializing in laughter yoga, an emerging modality. I utilized traditional  yogic imagery like the Buddha to convey that it is a credible practice, while at the same time conveying a sense of levity and fun.</p>';
document.getElementById('changingImg').src="images/HAHAYOGA.png";
document.getElementById('slideshowThumbs').innerHTML=
'<li><img src="images/HAHAYOGA.png" alt="Ha Ha Yoga ~ West Chester, Pennsylvania ~ This logo was designed for a yoga studio specializing in laughter yoga, an emerging modality. I utilized traditional  yogic imagery like the Buddha to convey that it is a credible practice, while at the same time conveying a sense of levity and fun." onclick="cngImg(this)" ></li>' +

'<li><img src="images/sarahcross.png" alt="Sarah Cross Photography ~ Oakland, California ~ This logo was designed to be printed directly on Sarah’s photographs  to accentuate the quality of her work and for use within her stationary system. The scrolls are reminiscent of antique silver and corollate with her classic sense of style. This logo would be printed in either black, silver or gold." onclick="cngImg(this)" ></li>' +
/*'<li><img src="images/KJWLOGO.png" alt="Healthy Body Strong Mind ~ San Francisco, California ~ This logo was designed for massage therapist Kelly Williams as part of her identity system to accentuate the healing work that she does in hospitals where she  works closely with medical professionals." onclick="cngImg(this)" ></li>' +*/
'<li><img src="images/kJWBrand.png" alt="Healthy Body Strong Mind ~ San Francisco, California ~ The identity system for Healthy Body Strong Mind is meant to be reminiscent of a nineteenth century apothecary. I used a strong yet soothing green to accentuate the connection between nature and holistic care. The business cards were printed light on dark and dark on light to add variety, and to make reading easier for some of her elderly clients. The cards double as coupons and appointment reminders. The envelope wrap around gives a human touch to her business mailing while solving a practical problem." onclick="cngImg(this)" ></li>';
}

function posters(){
document.getElementById('interest').getElementsByTagName('li')[2].style.border="1px solid white";
document.getElementById('interest').getElementsByTagName('li')[2].style.padding="4px 6px";
document.getElementById('interest').getElementsByTagName('li')[1].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[1].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[0].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[0].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[3].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[3].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[4].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[4].style.padding="5px 7px";
document.getElementById('captions').innerHTML='<h1>1-800-U-Buggin</h1><br /><h2>Digital</h2><br /><p>This poster was created to explore the classic pulp poster. This piece exemplifies how I try to use humor in my designs to engage the viewer and leave an indelible mark on his or her mind.</p>';
document.getElementById('changingImg').src="images/cockroach.png";
document.getElementById('slideshowThumbs').innerHTML=
'<li><img src="images/cockroach.png" alt="1-800-U-Buggin ~ Digital ~ This poster was created to explore the classic pulp poster. This piece exemplifies how I try to use humor in my designs to engage the viewer and leave an indelible mark on his or her mind." onclick="cngImg(this)" ></li>' + 
'<li><img src="images/TandomPoster.png" alt="Tandom: Bikes & Spikes ~ Digital ~ This poster was created in homage to the great poster designers of the 19th and 20th centuries. In particular Adolphe Mouron Cassandre whose work is elegantly simple and endlessly engaging- two of the things I strive for in my own work." onclick="cngImg(this)" ></li>' + 
'<li><img src="images/turnsig.png" alt="Learn To Turn ~ Digital ~ This poster was created in response to the rising number of cyclists on our city streets. This poster is an attempt to educate cyclists and keep our streets safe for everyone so that this healthy and green trend can continue." onclick="cngImg(this)" ></li>' 
;
}
function cartoons(){
document.getElementById('interest').getElementsByTagName('li')[3].style.border="1px solid white";
document.getElementById('interest').getElementsByTagName('li')[3].style.padding="4px 6px";
document.getElementById('interest').getElementsByTagName('li')[0].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[0].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[1].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[1].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[2].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[2].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[4].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[4].style.padding="5px 7px";
document.getElementById('captions').innerHTML='<h1></h1><br /><h2> Pen & Ink</h2> ';
document.getElementById('changingImg').src="images/portfolio014.jpg";
document.getElementById('slideshowThumbs').innerHTML=
'<li><img src="images/portfolio014.jpg" alt=" ~ Pen & Ink ~ " onclick="cngImg(this)" ></li>' +
'<li><img src="images/portfolio015.jpg" alt=" ~ Pen & Ink ~ " onclick="cngImg(this)" ></li>' +
'<li><img src="images/portfolio016.jpg" alt=" ~ Pen & Ink ~ " onclick="cngImg(this)" ></li>' +
'<li><img src="images/portfolio017.jpg" alt=" ~ Pen & Ink ~ " onclick="cngImg(this)" ></li>' 
;
}
function fineArt(){
document.getElementById('interest').getElementsByTagName('li')[4].style.border="1px solid white";
document.getElementById('interest').getElementsByTagName('li')[4].style.padding="4px 6px";
document.getElementById('interest').getElementsByTagName('li')[0].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[0].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[1].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[1].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[2].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[2].style.padding="5px 7px";
document.getElementById('interest').getElementsByTagName('li')[3].style.border="0";
document.getElementById('interest').getElementsByTagName('li')[3].style.padding="5px 7px";
document.getElementById('captions').innerHTML='<h1>Smoking Sunrise</h1><br /><h2>Woodcut reduction</h2><br /><p>Created to explore the luminsoity of oil based inks and the expressiveness of relief printing.</p>';
document.getElementById('changingImg').src="images/portfolio018.jpg";
document.getElementById('slideshowThumbs').innerHTML=
'<li><img src="images/portfolio018.jpg" alt="Smoking Sunrise ~ Woodcut reduction ~ Created to explore the luminsoity of oil based inks and the expressiveness of relief printing." onclick="cngImg(this)" ></li>' + 
'<li><img src="images/portfolio019.jpg" alt="Barb on a Wire ~ Woodcut reduction ~ Created to explore the luminsoity of oil based inks and the expressiveness of relief printing." onclick="cngImg(this)" ></li>' + 
'<li><img src="images/portfolio020.jpg" alt="Bay Walkers ~ Colored Pencil ~ An exploration of the imagery I encounter on a daily basis." onclick="cngImg(this)" ></li>' +
'<li><img src="images/portfolio021.jpg" alt="Bay Walkers ~ Colored Pencil ~ An exploration of the imagery I encounter on a daily basis." onclick="cngImg(this)" ></li>' + 
'<li><img src="images/drawing.jpg" alt="Untitled ~ Graphite Pencil ~ Boobs." onclick="cngImg(this)" ></li>' + 
'<li><img src="images/portfolio022.jpg" alt=" Unititled ~ oil on canvas, 3 ft x 3 1/2 ft ~ An exploration of color, and texture to make the mundane interesting." onclick="cngImg(this)" ></li>' +
'<li><img src="images/portfolio023.jpg" alt="Unititled ~ oil on canvas, 5 1/2 ft x 6 ft ~ An exploration of color, texture and sensuality" onclick="cngImg(this)" ></li>' +
'<li><img src="images/portfolio024.jpg" alt="Self Portrait ~ oil on canvas, 4 ft x 4 1/2 ft ~ Painted while I was imobilized with a broken leg, this is an atempt to explore my own humanity and limitations." onclick="cngImg(this)" ></li>' 
;
}
var oldImg;
/*if(changingImg.width > changingImg.height){
if(chaningImg.height > 326){
changingImg.style.width="auto";
changingImg.style.height="100%";
}
else{
changingImg.style.width="auto";
changingImg.style.height="100%";
}
}
else{
changingImg.style.width="auto";
changingImg.style.height="100%";
}
}
if(changingImg.width > changingImg.height || chaningImg.height <= 326){
if(changingImg.width > changingImg.height){
changingImg.style.width="100%";
changingImg.style.height="auto";
}
else{
changingImg.style.width="auto";
changingImg.style.height="100%";
}
if(changingImg.width > changingImg.height){
changingImg.width="100%";
changingImg.height="auto";
}
else{
changingImg.width="auto";
changingImg.height="100%";
}
if(changingImg.width > changingImg.height){
changingImg.width="auto";
changingImg.height="100%";
}
else{
changingImg.width="100%";
changingImg.height="auto";*/

// JavaScript Document