// JavaScript Document


//Declare and initialize global variables used to set attributes for size, position and opacity
var opacvalueup;
var opacvaluedown;
var	posfirst;
var	possecond;
var	posthird;
var	posfourth;
var htsecond;
var	whsecond;	
var	htthird;
var	whthird;
var topfirst;
var topsecond;
var topthird;	
var topfourth;	
var motion;

//Declare the indexes used to move through the Images array
var i0, i1, i2, i3;

//Create an array to hold all small images for the carousel and load the images
imageArray = new Array();
for (var a=0; a<=18; a++)
{
	imageArray[a] = new Image();
	imageArray[a].src="carouselimages/"+a+".jpg";
}

//Create an array to hold all large images for the replacement box and load the images
largeImageArray = new Array();
for (var a=1; a<=9; a++)
{
	largeImageArray[a] = new Image();
	largeImageArray[a].src="carouselimagesLarge/"+a+".jpg";
}

//Create an array for the image names
var nameArray = new Array();
nameArray = ['"Jasper in<br //>Shadow Box<br //>with Copper Chain"','"Purple Agate in Shadow Box"','"Jasper in Shadow Box" <span style=\"font-style:italic;font-size:smaller\">with Peyote Strap<br //>by Lyle Boyle<//span>','"Tourmalated Quartz in Wire Aura"','"Blue Onyx<br //>in Wire Aura"','"Coiled Bangle"<br //><span style=\"font-style:italic;font-size:smaller\">with JeriBeads<//span>','"Filigree Cap Beads"','"Fused Silver Links"','"Wire-wrapped<br //>Gem Silica"','"Wire-wrapped Pink<br //>Peruvian Opal<br //>with Beads"','"Wire-wrapped<br //>Gold-filled and Kyanite Necklace"','"Wire-wrapped<br //>Gold-Filled and<br //>Kyanite Earrings"','"Wire-wrapped<br //>Gold-filled<br //>Pink Peruvian Opal"','"Wire-wrapped<br //>Cobalt Cab with<br //>Beads of Ghana"','"Wire-wrapped Botswana Agate"','"Colorful Lattice"','"Sterling Lattice"','"Crocheted Leaves"','"Sizzling Big \'n Bold Crochet"'];

//Create an array for the large image names
var largeNameArray = new Array();
largeNameArray = ['"Image Soon"','"Day to Night"','"Mint Julep"','"Sonoran Desert"','"Amber Night"','"Autumn Evergreen"','"Margarita"','"Eqyptian Blue II"','"Pierre Turquin"','"Play Misty for Me"'];

//Create an array for the large image descriptions

var largeTextArray = new Array();
largeTextArray = ['"Text to come"',
				  'Like a little black dress, this necklace can take you from daylight to moonlight with its warmed jet, bronze and topaz tones. The focal is an antique gold decorated button which reflects the light and shine of the SWAROVSKI Elements that are scattered throughout this piece. Melon shaped bronze beads and antique gold metal accents complete this versatile necklace. $250.00',
				  'Go green with translucent mint lined seed beads. Cool blue greens in matte and glossy textures keep this design easy to wear for Spring and Summer, along with lovely Erinite SWAROVSKI Elements. The focal is a deep mint green enameled button wrapped in gold. Bright gold metal accents are scattered throughout this necklace. Adjustable length is 18-20&quot;. $235.00',
				  'Desert brown matte seed beads are laced with oranges, greens and turquoise. A subtle gathering of SWAROVSKI Elements makes way for a ladder weave of American turquoise hexagon beads and a focal of carved carnelian agate that is layered with turquoise melon shaped beads. Copper metal accents round out the desert theme. Adjustable length is 20-22&quot;. $250.00',
				  'Vintage inspired bronze tone metals work well with a warm blend ofamethyst and citrine stone and antique glass on a field of matte seed beads. The focal piece is a layered ambronite carved flower set on a vintage filigree form. Adjustable length<br />is 18-20&quot;. $250.00',
				  'Tones of green and burnished browns create a lush forest floor of gold-lined seed beads. This necklace is embellished with bronzed milk glass baubles and leaf shapes and a subtle variety of SWAROVSKI Elements Topaz colors. The focal piece is an iridescent green and gold Czech style glass button. Adjustable length is 18-21&quot;. $235.00',
				  'A black lip shell focal draws the eye to a cool mix of silver grey seed beads lined in gold. Florets of matte gold glass with center crystal beads sit throughout the necklace with filigree metal leaf dangles and paua shell shapes. The straps of this design are strung with SWAROVSKI Elements double cones in Jet and pear shaped Tahitian crystal pearls. Adjustable length is 18-21&quot;. $250.00',
				  'Soft color of sensuous turquoise is the theme for this necklace which features a  French blue enameled gold button focal resting on variegated seed beads and iolite blue glass leaves. Accents of American turquoise hexagon beads and geometric SWAROVSKI Elements bring out the best in this piece. Finished length is 18&quot;. $235.00',
				  'Lit with numerous Colorado Topaz SWAROVSKI Elements beads, this necklace features antique German glass beads, floral bells and leaves. The variety of turquoise tones is enhanced with antique 12mm round robin\'s egg blue beads banded with gold. The focal is a blue enameled gold button with an Egyptian motif. Adjustable length<br />is 18-20&quot;. $250.00',
				  'Vintage inspired copper filigree forms the foundation for the lightness of aqua translucent seed beads and soft greenish blue glass flowers and beads. The focal is a carved amazonite flower layered with a lampwork style bead. Smoky Topaz and Pacific Opal SWAROVSKI Elements bring together a design of color and shimmer that is fluid and refreshing. Adjustable length is 20-22&quot;. $250.00'];

//Create an array for the button ids
var buttonArray = new Array();
buttonArray = ['"Image Soon"','ELY3J3UFRE9DA','9QBWV55KPEVAL','B7FDABMUT8N7Q','54MCKZWNBYH5J','ZXLKWWL96DNJW','DLQZ4FPQG8YMQ','D7UEBQVW4KCC2','WX65L4KF93PWL','C4HRF3QSXLHKN'];


//Load the first four images into the four img elements and get their image objects
//Place the first four images in the array into the first four img elements and set the initial position, size and opacity of each img.	
	
		/*****/

function initialize()
{
	
	i0=18;
	getIndices();
	opacvalueup=0.5;
	opacvaluedown=1;
	posfirst=0;
	possecond=135;
	posthird=310;
	posfourth=470;
	htsecond=200;
	whsecond=200;	
	htthird=150;
	whthird=150;
	topfirst=25;
	topsecond=0;
	topthird=25;
	topfourth=25;
	document.first.src=imageArray[i0].src;
	document.second.src=imageArray[i1].src;
	document.third.src=imageArray[i2].src;
	document.fourth.src=imageArray[i3].src;
	obj1=document.getElementById("first");
	obj2=document.getElementById("second");
	obj3=document.getElementById("third");
	obj4=document.getElementById("fourth");
	obj1.style.left=posfirst+"px";
	obj2.style.left=possecond+"px";
	obj3.style.left=posthird+"px";
	obj4.style.left=posfourth+"px";
	obj1.style.opacity=.5;
	obj2.style.opacity=1;
	obj3.style.opacity=.5;
	obj4.style.opacity=.5;
	obj2.style.height=htsecond+"px";
	obj2.style.width=whsecond+"px";
	obj1.style.top=topfirst+"px";
	obj2.style.top=topsecond+"px";
	obj3.style.top=topthird+"px";
	obj4.style.top=topfourth+"px";
	obj2.style.zIndex=99;
	obj3.style.zIndex=1;
}

function getIndices()
{
	i1=i0+1;
	i2=i1+1;
	i3=i2+1;
	if (i0==16)
	{
		i3=0;
	}
	if (i0==17)
	{
		i2=0;
		i3=1;
	}
	if (i0==18)
	{
		i1=0;
		i2=1;
		i3=2;
	}
	if (i0==19)
	{
		i0=0;
		i1=1;
		i2=2;
		i3=3;
	}
}

function goRound()
{
	if (motion) return;
	else
	motion=setInterval("moveandgrow()",30);
}

function moveandgrow()
{
//Adjust all attributes - opacity, position, top, height, width -  needed to create the carousel effect
//First calculate the increment for each interval
	opacvalueup+=.01;
	opacvaluedown-=.01;
	posfirst -=3.2;
	possecond-=2.7;
	posthird-=3.5;
	posfourth-=3.2;
	htsecond-=1;
	whsecond-=1;	
	htthird+=1;
	whthird+=1;
	topsecond+=.5;
	topthird-=.5;
	
//Then assign the new attribute value
	obj1.style.left=posfirst+'px';
	obj2.style.left=possecond+"px";
	obj3.style.left=posthird+"px";
	obj4.style.left=posfourth+"px";
	obj2.style.height=htsecond+"px";
	obj2.style.width=whsecond+"px";
	obj3.style.height=htthird+"px";
	obj3.style.width=whthird+"px";
	obj2.style.top=topsecond+"px";
	obj3.style.top=topthird+"px";
	obj3.style.opacity=opacvalueup;
	obj2.style.opacity=opacvaluedown;
	obj2.style.zIndex=1;
	obj3.style.zIndex=99;
	
//Stop once the center image has moved all the way to the left
	if(htsecond<=150) 
		{
			clearInterval(motion);
			motion=0;
			swap();
		}	
}

function swap()
{
	i0++;
	getIndices();
	document.first.src=imageArray[i0].src;
	document.second.src=imageArray[i1].src;
	document.third.src=imageArray[i2].src;
	document.fourth.src=imageArray[i3].src;
	posfirst=0;
	possecond=135;
	posthird=310;
	posfourth=470;
	htsecond=200;
	whsecond=200;	
	htthird=150;
	whthird=150;
	topsecond=0;
	topthird=25;
	opacvalueup=0.5;
	opacvaluedown=1;
	obj1.style.left=posfirst+'px';
	obj2.style.left=possecond+"px";
	obj3.style.left=posthird+"px";
	obj4.style.left=posfourth+"px";
	obj2.style.height=htsecond+"px";
	obj2.style.width=whsecond+"px";
	obj3.style.height=htthird+"px";
	obj3.style.width=whthird+"px";
	obj2.style.top=topsecond+"px";
	obj3.style.top=topthird+"px";
	obj3.style.opacity=opacvalueup;
	obj2.style.opacity=opacvaluedown;
	obj1.style.opacity=opacvalueup;
	obj1.style.zIndex=1;
	obj2.style.zIndex=99;
	obj3.style.zIndex=1;
}

function loadCarouselHeader()
	{
		document.getElementById("carouselh3").innerHTML=nameArray[i2];
	}

function loadCentralImage(source)
{
	if(source<=9&&source>=1)
	{
		document.largeImage.src=largeImageArray[source].src;
		var liash = document.largeImage.offsetHeight;
		var lid=document.getElementById("largeImage");
		lid.style.marginTop=(.5*(520-liash)-7)+"px";
		document.getElementById("largeImageh3").innerHTML=largeNameArray[source];
		document.getElementById("largeImageText").innerHTML=largeTextArray[source];
		document.forms[0].hosted_button_id.value=buttonArray[source];

	}
}