//Variables for scrolling thumbnails
var swidth=1091
var sheight=100
var sspeed=4
var imagef=''
var picWindow='' 

//Thumbnail image viewer- 
var ie=document.all
var ns=document.layers
var ns6=document.getElementById&&!document.all


//drag drop function for NS 4////
var nsx,nsy,nstemp



//images: list all images thumbnails here
var leftimage=new Array();
var imagedesc=new Array();
leftimage[0]='<img STYLE="cursor: pointer;" src="images/t_relax2.jpg" onclick="return enlarge(\'images/artwork/relax2.jpg\',event,0);">'
leftimage[1]='<img STYLE="cursor: pointer;" src="images/t_relax3.jpg" onclick="return enlarge(\'images/artwork/relax3.jpg\',event,1);">'
leftimage[2]='<img STYLE="cursor: pointer;" src="images/t_relax4.jpg" onclick="return enlarge(\'images/artwork/relax4.jpg\',event,2);">'
leftimage[3]='<img STYLE="cursor: pointer;" src="images/t_safety1.jpg" onclick="return enlarge(\'images/artwork/safety1.jpg\',event,3);">'
leftimage[4]='<img STYLE="cursor: pointer;" src="images/t_safety2.jpg" onclick="return enlarge(\'images/artwork/safety2.jpg\',event,4);">'
leftimage[5]='<img STYLE="cursor: pointer;" src="images/t_safety4.jpg" onclick="return enlarge(\'images/artwork/safety4.jpg\',event,5);">'
leftimage[6]='<img STYLE="cursor: pointer;" src="images/t_safety5.jpg" onclick="return enlarge(\'images/artwork/safety5.jpg\',event,6);">'
leftimage[7]='<img STYLE="cursor: pointer;" src="images/t_safety6.jpg" onclick="return enlarge(\'images/artwork/safety6.jpg\',event,7);">'
leftimage[8]='<img STYLE="cursor: pointer;" src="images/t_safety7.jpg" onclick="return enlarge(\'images/artwork/safety7.jpg\',event,8);">'
leftimage[9]='<img STYLE="cursor: pointer;" src="images/t_safety8.jpg" onclick="return enlarge(\'images/artwork/safety8.jpg\',event,9);">'
leftimage[10]='<img STYLE="cursor: pointer;" src="images/t_safety9.jpg" onclick="return enlarge(\'images/artwork/safety9.jpg\',event,10);">'
leftimage[11]='<img STYLE="cursor: pointer;" src="images/t_rhythm.jpg" onclick="return enlarge(\'images/artwork/rhythm.jpg\',event,11);">'
leftimage[12]='<img STYLE="cursor: pointer;" src="images/t_redrhythm.jpg" onclick="return enlarge(\'images/artwork/redrhythm.jpg\',event,12);">'



imagedesc[0]='Relaxation II 36.5" x 36.5" - Not Available';
imagedesc[1]='Relaxation III 36.5" x 36.5" - Not Available';
imagedesc[2]='Relaxation IV 34" x 48" - £650';
imagedesc[3]='Safety I 10" x 10" - £75';
imagedesc[4]='Safety II 10" x 10" - Not Available';
imagedesc[5]='Safety IV 24" x 24" - £160';
imagedesc[6]='Safety V 24" x 24" - £160';
imagedesc[7]='Safety VI 24" x 48" - £225';
imagedesc[8]='Safety VII 24" x 24" - £160';
imagedesc[9]='Safety VIII 10" x 10" - £75';
imagedesc[10]='Safety IX 36" x 36" - £450';
imagedesc[11]='Rhythm 62.5" x 24" - Sold';
imagedesc[12]='Redrhythm 48" x 24" - Sold';



for (mi=0;mi<leftimage.length;mi++)
imagef=imagef+leftimage[mi]+"&nbsp;&nbsp;"



//Render image code for IE 4+ and NS6
function enlarge(which,e,picture){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage

if (crossobj.style.visibility=="visible"){
crossobj.style.visibility="hidden"
}

if (crossobj.style.visibility=="hidden"){
//crossobj.style.left=ns6? pageXOffset+e.clientX : document.body.scrollLeft+event.clientX
//crossobj.style.top=ns6? pageYOffset+e.clientY : document.body.scrollTop+event.clientY
crossobj.style.left=142
crossobj.style.top=2

crossobj.innerHTML='<div id=drag align=right><b style="align=right" onClick=closepreview()><span style = "align=right"><img src="images/close.gif"></span></b></div><div id=title class="titlehead"><nobr >'+imagedesc[picture]+'</nobr></div><img src="'+which+'">'
crossobj.style.visibility="visible"
}
else
crossobj.style.visibility="hidden"
return false
}

//Render image code for NS 4

else if (document.layers){
if (document.showimage.visibility=="hide"){
document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>')
document.showimage.document.close()
document.showimage.left=2
document.showimage.top=2
document.showimage.visibility="show"
}

else
document.showimage.visibility="hide"
return false
}

//if NOT IE 4+ or NS 4, simply display image in full browser window
else
return true
}



function closepreview(){
crossobj.style.visibility="hidden"
}



function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

 

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}

function dragns(e){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}

 

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

 

//drag drop function for IE 4+ and NS6////

function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
}
return false
}

 

function initializedrag(e){
if (ie&&event.srcElement.id=="drag"||ns6&&e.target.id=="drag"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY
tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)
dragapproved=true
document.onmousemove=drag_drop
}
}


document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")




//show the image when it has been clicked
function show_image(image_loc,i_width,i_height) {
 if (picWindow != '') {
 picWindow.close();
 }
 var var_image = new Image();
 var_image.src = image_loc;;
 width = i_width+20;
 heigth = i_height+30;
 str_style= "\" width="+width+",height="+heigth+"\"";
 picWindow=window.open(var_image.src,"myImage",str_style);
 picWindow.title = "m4ad.com - Art Viewer";
}




function start(){
new popUp(58 , 64 , 500 , 300 , "Div1" , "art.html" , "white" , "black" , "10pt serif" , "About Art" , "#757575" , "white" , "lightgrey", "#C4C4C4" , "black" , false, true, true, true, true, false);
new popUp(58 , 94 , 500 , 300 , "Div2" , "news.html" , "white" , "black" , "10pt serif" , "News" , "#757575" , "white" , "lightgrey", "#C4C4C4" , "black" , false, true, true, true, true, false);
new popUp(58 , 124 , 500 , 300 , "Div3" , "links.html" , "white" , "black" , "10pt serif" , "Links" , "#757575" , "white" , "lightgrey", "#C4C4C4" , "black" , false, true, true, true, true, false);
new popUp(58 , 154 , 500 , 300 , "Div4" , "contact.html" , "white" , "black" , "10pt serif" , "Contact" , "#757575" , "white" , "lightgrey", "#C4C4C4" , "black" , false, true, true, true, true, false);

if (document.all) return
if (document.getElementById){
document.getElementById("slider").style.visibility="show"
initial6(document.getElementById('slider'))
}
else if(document.layers){
document.slider1.visibility="show"
intialslide()
}
}
function intialslide(){
document.slider1.document.slider2.document.write('<nobr>'+imagef+'</nobr>')
document.slider1.document.slider2.document.close()
thel=document.slider1.document.slider2.document.width
document.slider1.document.slider2.left-=thel
sslide()
}
function sslide(){
if (document.slider1.document.slider2.left>=thel*(-1)){
document.slider1.document.slider2.left-=sspeed
setTimeout("sslide()",100)
}
else{
document.slider1.document.slider2.left=swidth
sslide()
}
}
function initial6(whichdiv){
tdiv6=eval(whichdiv)
tdiv6.innerHTML=('<nobr>'+imagef+'</nobr>')
tdiv6.style.left=swidth
thel=swidth
scroll6()
}
function scroll6(){
if (parseInt(tdiv6.style.left)>=thel*(-1)){
tdiv6.style.left=parseInt(tdiv6.style.left)-sspeed
setTimeout("scroll6()",100)
}
else{
tdiv6.style.left=swidth
scroll6()
}
}
//You might run into a position problem within the page, using either
//NS4.x or NS6.x. To correct this use the coordinates: 'left=value',
//'top=value' within ilayer/layer tags or 'position:relative/absolute;
//left:value;top:value;' within NS6's div tags.
//Those values can be either positive or negative!
//Make sure you've got the onload='...;' within body tag but without
//takeFocus(); there!