var start = 0;
var end = 20;

function buyItNow(){

	var sizeElem = document.getElementById("size");
	var gsizeElem = document.getElementById("gsize");
	var selindx = sizeElem.selectedIndex;
	var gselindx = gsizeElem.selectedIndex;
	var selectedFrontRibbon = itemsRibbonArray[0];
	var selectedBackRibbon = itemsRibbonArray[1];
	var selectedBuckle = itemsBuckleArray[0];
	var sizeSelected = false;
	if (selindx == 0) {
		sizeSelected = false;
		if (gselindx != 0) {
			sizeSelected = true;
		}
	} else {
		sizeSelected = true;
	}
	

//paypal
	if (selectedFrontRibbon == "" || sizeSelected == false || selectedBuckle== null || selectedBuckle== ""){
	
    		alert("You must select all the following to purchase:  Fabric, buckle and the belt size.");
			
	} else {
		var itemFromArray = "";
		var itemNameFromArray = "";
		var buyItNowRibbonFrontString = "";
		
		if(document.all){		
			buyItNowRibbonFrontString = document.getElementById("displayRibbonFrontText").innerText;
     	} else{
    		buyItNowRibbonFrontString = document.getElementById("displayRibbonFrontText").textContent;
		}

		
		var indx = buyItNowRibbonFrontString.indexOf("-");
		if (indx < 0 ) {
			var subRibbonString = buyItNowRibbonFrontString.substring(0,40);
		} else {
			var subRibbonString = buyItNowRibbonFrontString.substring(0,indx);
		}
		var buyItNowBuckleString = "";
		if(document.all){		
			buyItNowBuckleString = document.getElementById("displayBuckleText").innerText;
     	} else{
    		buyItNowBuckleString = document.getElementById("displayBuckleText").textContent;
		}
//alert(buyItNowBuckleString);
//start	DYNAMIC CHANGE PRICE - JUST UNCOMMENT	
//	alert(buyItNowBuckleString);
// var dringbucklestring = buyItNowBuckleString.substring(0,17);
//if (dringbucklestring == "Buckle: (Set of 2"){
	//var amt = "12.99";
//} else {
	//var amt = "16.99"
//} 
//end
//var buyItNowBuckleString = document.getElementById("displayBuckleText").innerText;
		var imageSize = 0;
		var itemIndex = 0;

		var purchase = "Fabric Belt - "+subRibbonString + "," + buyItNowBuckleString ;

//paypal
//start DYNAMIC CHANGE PRICE
//var itemAmount = document.getElementById("amount");
//itemAmount.value=amt; */
//end
var item = document.getElementById("item_name");
item.value = purchase;
//alert(purchase);

document.mainform.submit();	
	}//end else

}

function mouseUpBuckleObjects2() { 
     	//alert("x ="+dd.obj.x);
	//alert("y ="+dd.obj.y);
    	var name = dd.obj.name;
	//display selected ribbon description above buy it now buttons     

	var strLength = name.length;
	var indx = name.substring(strLength - 1, strLength);   
	var itemFromArray =  bucklesInfoArray[indx]; 
	var itemArray = itemFromArray.split("#");
	var itemText = itemArray[2];
	var itemLocation = itemArray[1];
//slm remove adding slash and change 2 back to 1 when moved to main folder - changed
	var newItemLocation = itemLocation.substring(1,itemLocation.length);

	var itemSize = itemArray[3];var itemSizeStr = itemSize.split(",");
	var itemWidth = itemSizeStr[0];
	var itemLength = itemSizeStr[1];
	
    	//if (dd.obj.x > 610 && dd.obj.x < 955 && dd.obj.y >235 && dd.obj.y < 660 ) //{
//061109 if ((dd.obj.y >300 && dd.obj.y < 700 )&& (dd.obj.x > 740 && dd.obj.x < 900)) {
		for (x = 0;x < bucklesInfoArray.length;x++) {
                	var itemName = "dragBuckleImage"+x; 
                	var my_item = dd.elements[itemName]; 
                	var newItem = bucklesInfoArray2[0];         
                	my_item.resizeTo(65,65);
                	my_item.moveTo(my_item.defx, my_item.defy); 
           	}  
		var my_item = dd.elements["dragBuckleImage5"];
		my_item.resizeTo(itemWidth,itemLength); 	
		document.getElementById("displayBuckleText").innerHTML = " <font size=2 color=red><B><font color=black>Buckle:</font></b>  "+itemText + "</font>"; 
		//add the dragged item to array
		itemsBuckleArray[0]= name + "#" + itemLocation;
		my_item.swapImage("transparentpixel.gif");
		//alert(newItemLocation);
		my_item.swapImage(newItemLocation );
		//var my_tooltip_item = dd.elements["toolTipImg"];
//alert(my_tooltip_item);
		//move other images back to original location   
 
/*	} else {
   			
		var my_item = dd.elements[name]; 
		my_item.resizeTo(65,65);
		itemsBuckleArray[0]= "";
		resetBuckleObjects();
   
	}*/

}
function mouseUpRibbonObjects() { 


//alert("x ="+dd.obj.x);
//alert("y ="+dd.obj.y);

	var whichSide = "";
	var name = dd.obj.name;
//alert(name);

	//display selected ribbon description above buy it now buttons     
	var strLength = name.length;  
  	
	var indx = 0;
	if (strLength == 10) { 

		indx = name.substring(strLength - 1, strLength); 
	} else {
		indx = name.substring(strLength - 2, strLength);
	}  

	var itemFromArray =  ribbonsInfoArray[indx];
	var itemArray = itemFromArray.split("#");
	var itemText = itemArray[2];
	var itemLocation = itemArray[1];
//alert(itemText);
//alert(itemLocation);



/* TOOLTIPS BEGIN*/
var itemhttp = itemArray[3];
var transparent = "/transparentpixel.gif";
if (itemhttp == "" || itemhttp=="16.99") {
	var onClickTxt = "";
	//var onClickTxt = "<img src='images/Body/zoom.gif' onmouseover=\"Tip('<center><img src="+transparent+" height=&quot;200&quot; width=&quot;200&quot;><br>No Image Available', FIX, [1000, 500])\" onmouseout=\"UnTip()\"> Zoom </a>";

}else{
	var onClickTxt = "<img src='images/Body/zoom.gif' onmouseover=\"Tip('<center><img src="+itemhttp+" height=&quot;200&quot; width=&quot;200&quot;>', FIX, [1000, 500])\" onmouseout=\"UnTip()\"> Zoom </a>";
}
document.getElementById("zoom").innerHTML = onClickTxt; 

//TOOLTIPS END
 

	   
	//if ((dd.obj.y >293 && dd.obj.y < 560 )&& (dd.obj.x > 746 && dd.obj.x //<856)) {
//061109	if ((dd.obj.y >390 && dd.obj.y < 665 )&& (dd.obj.x > 760 && dd.obj.x < 900)) {
	
		//add the dragged item to array
			
		itemsRibbonArray[0]= name + "#" + itemLocation+ "#" +itemText;
		var ribbonFrontArrayStr =  itemsRibbonArray[0];
		var ribbonFrontStr = ribbonFrontArrayStr.split("#");
		var ribbonFrontImageLocation = ribbonFrontStr[1];

		var first4 = ribbonFrontImageLocation.substring(0,4);
		var newRibbonFrontImageLocation = "";
		if (first4 == "http") {
			newRibbonFrontImageLocation = ribbonFrontImageLocation;
		} else {
//slm remove + slash and change 2 to 1 after mvoing to main folder
			newRibbonFrontImageLocation = ribbonFrontImageLocation.substring(1,ribbonFrontImageLocation.length);

		}
		var ribbonFrontName = ribbonFrontStr[0];
		var my_item0 = dd.elements["dragImage20"]; 

		my_item0.swapImage(newRibbonFrontImageLocation);
		my_item0.moveTo(710, 520);

		document.getElementById("displayRibbonFrontText").innerHTML = " <font size=2 color=red><B><font color=black>Fabric:</font></b>  "+itemText + " </font>"; 
		


		//move other images back to original location   
		for (x = 0;x < ribbonsInfoArray.length-1 || x == ribbonsInfoArray.length-1;x++) {
			var itemName = "dragImage"+x;	
			var my_item = dd.elements[itemName]; 
			my_item.resizeTo(35,105);
			my_item.moveTo(my_item.defx, my_item.defy); 

		}    
 
      
	/*} else {

 		//Ribbon: Drag and drop a ribbon into the Design Area
		var my_item = dd.elements[name]; 
		my_item.resizeTo(35,105);
		itemsRibbonArray[0]= "";
		itemsRibbonArray[1]= "";
		my_item.moveTo(my_item.defx, my_item.defy); 
    
 	}  */   
}


function resetObjects() {

	//reset ribbons
	document.getElementById("displayRibbonFrontText").innerHTML = " <font size=2 color=red><b><font color=black>Fabric:</font></b>  No fabric selected for the front side.</font>"; 

	document.getElementById("displayBuckleText").innerHTML = " <font size=2 color=red><b><font color=black>Buckle:</font></b>  No buckle selected.</font>"; 
    	for (x = 0;x < ribbonsInfoArray.length-1 || x == ribbonsInfoArray.length-1 ;x++) {
        	var itemName = "dragImage"+x;
        	var my_item = dd.elements[itemName]; 
        	my_item.resizeTo(35,105);
        	my_item.moveTo(my_item.defx, my_item.defy); 
    	}  
        //reset buckles
	for (x = 0;x <= bucklesInfoArray.length-1;x++) {
        	var itemName = "dragBuckleImage"+x;             
        	var my_item = dd.elements[itemName]; 
        	my_item.resizeTo(65,65);
        	my_item.moveTo(my_item.defx, my_item.defy);         
	}  
	//dragImage20 and 21 will only change if manually coded
	var my_item = dd.elements["dragImage20"]; 
	my_item.swapImage("transparentpixel.gif");

	my_item = dd.elements["dragBuckleImage5"]; 
	my_item.swapImage("transparentpixel.gif");
	itemsRibbonArray[0]= "";
	itemsRibbonArray[1]= "";
	itemsBuckleArray[0]= "";
	//reset dropdowns

	var sizeDD = document.getElementById("size");
	sizeDD.selectedIndex = 0;
	var gsizeDD = document.getElementById("gsize");
	gsizeDD.selectedIndex = 0;

}
function resetGSize() {
	var sizeDD = document.getElementById("gsize");
	sizeDD.selectedIndex = 0;	
}
function resetSize() {
	var sizeDD = document.getElementById("size");
	sizeDD.selectedIndex = 0;	
}
function resetRibbonObjects() {
//reset ribbons

    for (x = 0;x <= ribbonsInfoArray.length-1;x++) {
        var itemName = "dragImage"+x;
        my_item = dd.elements[itemName]; 
        my_item.resizeTo(35,105);
        my_item.moveTo(my_item.defx, my_item.defy); 

    }  
    
}
function resetBuckleObjects() {
        //reset buckles
     for (x = 0;x <= bucklesInfoArray.length-1;x++) {
        var itemName = "dragBuckleImage"+x;             
        var my_item = dd.elements[itemName]; 
        my_item.resizeTo(65,65);
        my_item.moveTo(my_item.defx, my_item.defy); 
        
            }  
}

function prevRibbon () {
	document.body.style.cursor = 'wait'; 
	//move transparent image to get white page 


	if (nextRibbonCount > 1) {
		for (x = 0;x < 20;x++) {			
			var itemName = "dragImage"+x;      
			var my_item = dd.elements[itemName];  
			my_item.swapImage("transparentpixel.gif"); 	   
		} 
		nextRibbonCount = nextRibbonCount - 1;

		//fill ribbonsInfoArray with previous 20 selections
		var indx = 0;
		for (x=start -20;x <= ((end-20) -1);x++) {
			ribbonsInfoArray[indx] = ribbonsInfoArrayNew[x];
			indx = indx + 1;
		}
		var pgRibbonCountValue = nextRibbonCount;
 		//ribbonsInfoArray = eval(ribbonArray);
		document.getElementById("ribbonPgNumText").innerHTML = "Page "+pgRibbonCountValue+" of "+(maxRibbonCount)+"";
		start = start - 20;
		end = end - 20;

		//move other images back to original location   
		for (x = 0;x < ribbonsInfoArray.length;x++) {
			var itemName = "dragImage"+x;  
			var my_item = dd.elements[itemName]; 
			var newItem = ribbonsInfoArray[x];
			var splitArray = newItem.split("#");                       
			var splitArrayStr = splitArray[1].toString();
			my_item.swapImage(splitArray[1].toString()); 
			//title
			var img = "image"+x;
			document.getElementById(img).title = splitArray[2].toString();

		}
	}  else {
		alert ("You are at the beginning of the fabric selections, click Next to see more selections");
	}    
	document.body.style.cursor = 'default';        
        
}



function nextRibbon () {

	document.body.style.cursor = 'wait';
//images were not enlarging when clicking on the next arrow when on last page - added following if statement to fix
if ((end + 20 <= ribbonsInfoArrayNew.length)==true){


	//fill ribbonsInfoArray with next 20 selections
	var indx = 0;

	for (x=start + 20;x <=((end +20)-1);x++) {
		ribbonsInfoArray[indx] = ribbonsInfoArrayNew[x];
		indx = indx + 1;
		
	}

	//alert(ribbonsInfoArray);
	if (ribbonsInfoArray[0]!=null) {
		for (x = 0;x < 20;x++) {			
			var itemName = "dragImage"+x;      
			var my_item = dd.elements[itemName]; 
			//changes back to default source 
			my_item.swapImage(my_item.defsrc); 

			//my_item.swapImage("transparentpixel.gif"); 	   
		} 	
		nextRibbonCount = nextRibbonCount + 1;
		pgRibbonCountValue = nextRibbonCount;
		document.getElementById("ribbonPgNumText").innerHTML = "Page "+pgRibbonCountValue+" of "+(maxRibbonCount )+"";
    	
		start = start + 20;
		end = end + 20;
		//move other images back to original location 
		for (x = 0;x < ribbonsInfoArray.length;x++) {
			
			var itemName = "dragImage"+x;      
			var my_item = dd.elements[itemName];  
			var newItem = ribbonsInfoArray[x];
			var splitArray = newItem.split("#");  
			var splitArrayStr = splitArray[1].toString();
			my_item.swapImage(splitArray[1].toString()); 
			var img = "image"+x;
			document.getElementById(img).title = splitArray[2].toString();	

     
		} 	

     
	} else {
		alert ("You are at the end of the fabric selections, click Previous to see more selections");
	
	}  



} else {
		alert ("You are at the end of the fabric selections, click Previous to see more selections");
	
	}  
	document.body.style.cursor = 'default'; 
	     
	
}


function prev () {
	//alert(bucklesInfoArray[0]);
	
	resetBuckleObjects();
	nextBuckleCount = nextBuckleCount - 1;
	if (!nextBuckleCount  < 1) {		
		var buckleArray = "bucklesInfoArray" + (nextBuckleCount-1);
		if (nextBuckleCount  == 0) {
			buckleArray = "bucklesInfoArrayReset";
		}		
		var pgBuckleCountValue = nextBuckleCount;
		bucklesInfoArray = eval(buckleArray);
		document.getElementById("bucklePgNumText").innerHTML = "Page "+pgBuckleCountValue+" of "+(maxBuckleCount)+"";

	} else {
		alert ("You are at the end of the buckle selections, click Next to see more selections");
//alert("2");
	}
        //move other images back to original location   
    	for (x = 0;x < bucklesInfoArray.length;x++) {
        	var itemName = "dragBuckleImage"+x;       
        	var my_item = dd.elements[itemName]; 
        	var newItem = bucklesInfoArray[x];
        	var splitArray = newItem.split("#");
        	var splitArrayStr = splitArray[1].toString();
        	my_item.swapImage(splitArray[1].toString()); 
		//set title for new image
		var img = "buckleimage"+x;
		document.getElementById(img).title = splitArray[2].toString();	
    	} 
}



function next () {
	//alert(bucklesInfoArray[0]);
	resetBuckleObjects();
	//var buckleCount = nextBuckleCount + 1;
	
	if (nextBuckleCount + 1  <= maxBuckleCount ) {
	var buckleArray = "bucklesInfoArray" + (nextBuckleCount);
  		if (nextBuckleCount  < maxBuckleCount ){
			nextBuckleCount = nextBuckleCount + 1;		
    		bucklesInfoArray = eval(buckleArray);
			pgBuckleCountValue = nextBuckleCount + 0;
			document.getElementById("bucklePgNumText").innerHTML = "Page "+pgBuckleCountValue+" of "+(maxBuckleCount )+"";
    			
   		}  
		//move other images back to original location   
            	for (x = 0;x < bucklesInfoArray.length;x++) {
              		var itemName = "dragBuckleImage"+x;       
              		var my_item = dd.elements[itemName];   
              		var newItem = bucklesInfoArray[x];
              		var splitArray = newItem.split("#");
                   
              		var splitArrayStr = splitArray[1].toString();
               		my_item.swapImage(splitArray[1].toString());   
			var img = "buckleimage"+x;
			document.getElementById(img).title = splitArray[2].toString(); 	
            	}  
	} else {
		alert ("You are at the end of the buckle selections, click Previous to see more selections");
//alert("3");
    	} 
		
             
}

function linkBuckle () {
	//alert(bucklesInfoArray[0]);
	//resetBuckleObjects();
	var buckleCount = nextBuckleCount -1;
	var buckleArray = "bucklesInfoArray" + buckleCount;
	if (nextBuckleCount <= maxBuckleCount) {
  		if (nextBuckleCount < maxBuckleCount + 1){
    			bucklesInfoArray = eval(buckleArray);
			pgBuckleCountValue = nextBuckleCount;
			document.getElementById("bucklePgNumText").innerHTML = "Page "+pgBuckleCountValue+" of "+(maxBuckleCount)+"";
    			//nextBuckleCount = nextBuckleCount + 1;
   		}  
		//move other images back to original location   
            	for (x = 0;x < bucklesInfoArray.length;x++) {
              		var itemName = "dragBuckleImage"+x;       
              		var my_item = dd.elements[itemName];   
              		var newItem = bucklesInfoArray[x];
              		var splitArray = newItem.split("#");
                   
              		var splitArrayStr = splitArray[1].toString();
               		my_item.swapImage(splitArray[1].toString());   
			var img = "buckleimage"+x;
			document.getElementById(img).title = splitArray[2].toString(); 	
            	}  
	} else {
		alert ("You are at the end of the buckle selections, click Previous to see more selections");
    	} 
             
}