﻿/***********************************************
* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
* Copyright 2002-2007 by Sharon Paine
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

/* IMPORTANT: Put script after tooltip div or 
put tooltip div just before </BODY>. */

var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true : false;
var ie5 = ((navigator.userAgent.indexOf("MSIE") > -1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

var origWidth, origHeight;

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

///////////////////////  CUSTOMIZE HERE   ////////////////////
// settings for tooltip 
// Do you want tip to move when mouse moves over link?
var tipFollowMouse = true;
// Be sure to set tipWidth wide enough for widest image
var tipWidth = 210;
var offX = 20; // how far from mouse to show tip
var offY = 20;
var tipFontFamily = "Verdana, arial, helvetica, sans-serif";
var tipFontSize = "8pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor = "#000000";
var tipBgColor = "#DDECFF";
var tipBorderColor = "#697137";
var tipBorderWidth = 3;
var tipBorderStyle = "ridge";
var tipPadding = 4;

// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing: 
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip
messages[0] = new Array('Images/ColleenTracey_200.jpg', 'Custom canvas bags and collage tapestries by Colleen Tracey are handcrafted using cotton canvas and natural fabrics. Her colors are dynamic and include a multitude of styles, perfect ofr the environmentally aware shopper.', "#FFFFFF", "Black");
messages[1] = new Array('Images/DougKinnett_200.jpg', 'Commune with organic and geometric forms. See compositions with great harmonies and contrasts. Enjoy the balance of Form and Function, the mix of patterns and the ample use of color. Visit the recently finished rooms of the Manna Machine Studio where Doug Kinnett divides his time between painting, ceramics and furniture making.', '#003263', 'white');
messages[2] = new Array('Images/SheilaBrannan_200.jpg', 'Working in her newly expanded studio, Sheila Brannan&rsquo;s stained glass creations range from the traditional to free form designs incorporating WestVirginia hand-blown glass, copper wire, and found objects. She is available to create custom designs for entryways, bathroom windows for privacy, and kitchen cupboards. Her extensive portfolio is available.', 'black', 'white');
messages[3] = new Array('Images/CarrieSinger_200.jpg', 'Carrie Singer designs and creates one-of-a-kind art jewelry from sterling silver, 24K gold, semi-precious stones using traditional metal-smithing techniques. She draws inspriation from the natural world to craft her handmade wearable art.', '#697137', 'white');
messages[4] = new Array('Images/Thomas_D_Onofrio_200.jpg', 'Concentrating on Windsor style chairs, Tom D&rsquo;Onofrio has re-created several examples of settees, side chairs, armchairs and stools. He also makes country-style tables and benches. All are hand finished, some with the mellow look representing years of use.', "#FFFFFF", "Black");
messages[5] = new Array('Images/TaraBell_200.jpg', 'Using colored pencils, Tara Bell creates playful animals, insects and landscapes within meditative circles. Find originals & prints, bookmarks, greeting cards, pins, and butterfly ornaments... all enhanced with Tara&rsquo;s luminous art.', '#003263', 'white');
messages[6] = new Array('Images/SteveAdams_200.jpg', 'Using a hand adz, scorp and wood chisel, Steve Adams makes bowls the old fashioned way from a block of wood, out of a hardwood tree that he has cut down. His newest bowls are made from burls that grow around a wound in a living tree and create fascinating structures. He chops and chisels away the bark to reveal the tree&rsquo;s hidden potential.', 'black', 'white');
messages[7] = new Array('Images/EricJohnson_200.jpg', 'Ruggedness, character, utility, grace and symmetry are Eric Johnson&rsquo;s favorite descriptions of hand-wrought (forged) iron and steel. This age-old tradition, combining beauty and utility, is the way of life at Southwood Farm Forge.', '#697137', 'white');
messages[8] = new Array('Images/NancyStreeter_200.jpg', 'Nancy Streeter&rsquo;s interest in nature is revealed by re-creating wildlife in wood. Her animal creations, caught in motion, sometimes whimsical, sometimes realistic, provide a peek into nature. Her creations are unique and require many hours of work. During the holidays she turns to creating unique Santas and other holiday works.', "#FFFFFF", "Black");
messages[9] = new Array('Images/RenParziale_200.jpg', 'Ren & Pam Parziale create colorful additions to their line of stoneware and redware pottery. Bright majolica reds and oranges highlight the familiar blues and greens. These handmade pots make cooking and serving a pleasure.', '#003263', 'white');
messages[10] = new Array('Images/MargotOurs_200.jpg', 'Margot Ours crochets, knits, sews and tats an astonishing collection of personal and home interior decor pieces. Her winter specialties are "Kool Socks" and Icelandic sweaters. Come and see for yourself. Your request for a custom design is always welcome.<br><br>Margo&rsquo;s husband Elliott prints his own photographs of West Virginia&rsquo;s Canaan Valley. He creates beautiful note cards for this special occasion.', 'black', 'white');
messages[11] = new Array('Images/FrancesBrolle_200.jpg', 'Fran Brolle collaborates with her husband creating sterling settings for Steve&rsquo;s hot glass cabochons, producing pendants and bracelets. Fran also works with Swarovski crystal beads to make unusual, one-of-a-kind earrings and bracelets.', '#697137', 'white');
messages[12] = new Array('Images/AnneBowers_200.jpg', 'Functional art is how we describe the woven baskets and creations that you will see at Anne Bowers&rsquo; studio in the quaint village of Middleway. Her creative mind is always thinking of new and different ways to expand her range of basketry skills. Come see what is new and enjoy our hospitality.', "#FFFFFF", "Black");
messages[13] = new Array('Images/TrevaBlackford_200.jpg', 'Bears, bunnies and foxes are made of mohair with moveable joints. Treva Blackford designs and creates each to have a distinctive look, with sparkling eyes and hand stitched faces.', '#003263', 'white');
messages[14] = new Array('Images/Mosel_200.jpg', 'Elaine Mosel is a fabric artisan who creates original, one-of-a-kind works. Inspired by nature and the changing seasons, Elaine creates soft sculptures, quilted pillows, wall hangings, embroidery, and quilted note cards.', 'black', 'white');
messages[15] = new Array('Images/ThomasMcGarry_200.jpg', 'Tom McGarry brings to furniture making the same eye for detail he used in the study of Colonial and Federal period artifacts as an archeologist. Each table, bed or case piece made at The Birnam Wood Joinery is authentic in design, yet expertly adapted to modern living.', '#697137', 'white');
messages[16] = new Array('Images/BlickenstaffKitts_200.jpg', '“From a Feline&rsquo;s Perspective” is a collaboration project of imaging making between Dusseldorf, a long hair red tabby feline and his best friend photographer Teressa Blickenstaff-Kitts.', '#003263', 'white');
messages[17] = new Array('Images/Jones_200.jpg', 'Rebecca Grace Jones creates mixed media wall pieces and paintings on canvas, paper and wood.', 'black', 'white');
messages[18] = new Array('Images/JoyBridy_200.jpg', 'Whether it&rsquo;s a set of mugs, plates, or bowls you&rsquo;re looking for, or a bottle and vase for special occasions, Joy Bridy&rsquo;s wood fired pottery will certainly pique your interest. Each piece is made by hand, starting on the potter&rsquo;s wheel, and fired in a wood kiln around-the-clock for 2-7 days. The resulting complex surfaces of ash and flame call out to be touched and used. Stop in to see what it&rsquo;s all about!', 'black', 'white');
messages[19] = new Array('Images/Langerhans_200.jpg', 'From her originally designed patterns Pat Langerhans makes her figures out of fabric, she then applies many layers of paint. She completes her whimsical creations by sealing and antiquing them. From swans, cows, and pigs with pears, to santas and snowmen with reindeer, you never know what you will find her working on.', '#355b00', 'white');
messages[20] = new Array('Images/Sonnallama_200.jpg', 'Sonnallama Fiber Group<br />Llama Fiber & Wool Products', '#697137', 'white');
messages[21] = new Array('Images/LindaWright_200.jpg', 'Linda Wright<br />Decorative Paintings & Murals', '#697137', 'white');
messages[22] = new Array('Images/Truchon_200.jpg', 'Fresh from California, Isabelle Truchon showcases her passion for fresco, icon writing, bas relief and everything Byzantine as one of the newest members of The Over the Mountain Studio Tour.', '#697137', 'white');

////////////////////  END OF CUSTOMIZATION AREA  ///////////////////

// preload images that are to appear in tooltip
// from arrays above
if (document.images) {
    var theImgs = new Array();
    for (var i = 0; i < messages.length; i++) {
        theImgs[i] = new Image();
        theImgs[i].src = messages[i][0];
    }
}

// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
var midStr = '" border="0" width="' + (tipWidth - 10) + '"></td></tr><tr><td valign="top" align="left">';
var endStr = '</td></tr></table>';

////////////////////////////////////////////////////////////
//  initTip	- initialization for tooltip.
//		Global variables for tooltip. 
//		Set styles
//		Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
    if (nodyn) return;
    tooltip = (ie4) ? document.all['tipDiv'] : (ie5 || ns5) ? document.getElementById('tipDiv') : null;
    tipcss = tooltip.style;
    if (ie4 || ie5 || ns5) {	// ns4 would lose all this on rewrites
        tipcss.width = tipWidth + "px";
        tipcss.fontFamily = tipFontFamily;
        tipcss.fontSize = tipFontSize;
        tipcss.color = tipFontColor;
        tipcss.backgroundColor = tipBgColor;
        tipcss.borderColor = tipBorderColor;
        tipcss.borderWidth = tipBorderWidth + "px";
        tipcss.padding = tipPadding + "px";
        tipcss.borderStyle = tipBorderStyle;
    }
    if (tooltip && tipFollowMouse) {
        document.onmousemove = trackMouse;
    }
}

window.onload = initTip;

/////////////////////////////////////////////////
//  doTooltip function
//			Assembles content for tooltip and writes 
//			it to tipDiv
/////////////////////////////////////////////////
var t1, t2; // for setTimeouts
var tipOn = false; // check if over tooltip link
function doTooltip(evt, num) {
    if (!tooltip) return;
    if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
    tipOn = true;
    // set colors if included in messages array
    if (messages[num][2]) var curBgColor = messages[num][2];
    else curBgColor = tipBgColor;
    if (messages[num][3]) var curFontColor = messages[num][3];
    else curFontColor = tipFontColor;
    if (ie4 || ie5 || ns5) {
        var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
        tipcss.backgroundColor = curBgColor;
        tooltip.innerHTML = tip;
    }
    if (!tipFollowMouse) positionTip(evt);
    else t1 = setTimeout("tipcss.visibility='visible'", 100);
}

var mouseX, mouseY;
function trackMouse(evt) {
    standardbody = (document.compatMode == "CSS1Compat") ? document.documentElement : document.body //create reference to common "body" across doctypes
    mouseX = (ns5) ? evt.pageX : window.event.clientX + standardbody.scrollLeft;
    mouseY = (ns5) ? evt.pageY : window.event.clientY + standardbody.scrollTop;
    if (tipOn) positionTip(evt);
}

/////////////////////////////////////////////////////////////
//  positionTip function
//		If tipFollowMouse set false, so trackMouse function
//		not being used, get position of mouseover event.
//		Calculations use mouseover event position, 
//		offset amounts and tooltip width to position
//		tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
    if (!tipFollowMouse) {
        standardbody = (document.compatMode == "CSS1Compat") ? document.documentElement : document.body
        mouseX = (ns5) ? evt.pageX : window.event.clientX + standardbody.scrollLeft;
        mouseY = (ns5) ? evt.pageY : window.event.clientY + standardbody.scrollTop;
    }
    // tooltip width and height
    var tpWd = (ie4 || ie5) ? tooltip.clientWidth : tooltip.offsetWidth;
    var tpHt = (ie4 || ie5) ? tooltip.clientHeight : tooltip.offsetHeight;
    // document area in view (subtract scrollbar width for ns)
    var winWd = (ns5) ? window.innerWidth - 20 + window.pageXOffset : standardbody.clientWidth + standardbody.scrollLeft;
    var winHt = (ns5) ? window.innerHeight - 20 + window.pageYOffset : standardbody.clientHeight;  //+ standardbody.scrollTop;
    // check mouse position against tip and window dimensions
    // and position the tooltip 
    
    if ((mouseX + offX + tpWd) > winWd)
        tipcss.left = mouseX - (tpWd + offX) + "px";
    else tipcss.left = mouseX + offX + "px";
    //alert("winHt=" + winHt);
    if ((mouseY + offY + tpHt) > winHt)
        tipcss.top = winHt - (tpHt + offY + 70) + "px";
    else tipcss.top = mouseY + offY + "px";
    if (!tipFollowMouse) t1 = setTimeout("tipcss.visibility='visible'", 100);
}

function hideTip() {
    if (!tooltip) return;
    t2 = setTimeout("tipcss.visibility='hidden'", 100);
    tipOn = false;
}

document.write('<div id="tipDiv" style="position: fixed; visibility:hidden; z-index:0"></div>')
