$(document).ready(function(){

$('.click').click(function(){

	
	thisid = this.id;
	thisid = thisid.replace("click","");
	
	var imageid = "img" + thisid;
	
	var getvalue = document.getElementById(imageid).getAttribute("stylenum")
	
	var tempimageid = "#" + imageid;
	
	var position = $(tempimageid).offset(); // position = { left: 42, top: 567 }
	
	
	
	
	
	strHTML = "<div style=\"position: absolute; left:" + (position.left - 214) + "px; top:" + position.top + "px; z-index: 2; background-color:#FFFFFF; width:300px\">";
    strHTML = strHTML + "<div class=\"box\">";
    strHTML = strHTML + "<div id=\"content" + thisid + "\">";
    strHTML = strHTML + "<p> this is a test it is only a test</p><table><tr>";
    strHTML = strHTML + "<td><select class=\"hidshipto\" name=\"" + getvalue + "\" id=\"hidshipto"+ thisid + "\" > </select></td>";
	

		for(m=0;m<=11;m++)
		{
		strHTML = strHTML + "<td><input type=\"text\" size=\"4\" id=\"qty"+ thisid + m + "\" style=\"display:none\"/></td>";
		}    
		
		strHTML = strHTML + "</tr></table><div id=\"close" + thisid + "\" class=\"close\" >Close</div>";								
    strHTML = strHTML + "</div></div></div>";    

	
	document.getElementById("catorderform").innerHTML=strHTML;

	
				var $url = "http://medical.barcouniforms.com/medical/ajax/ajaxquickorderform.asp?p=colors&output=json&q=" + getvalue;
				//prompt('',$url);

				$.getJSON($url, function(data3){
					bindShipTo(data3,'',thisid);
				});
				
	$("#catorderform").fadeIn('slow');
	
	
				
	
	$(".hidshipto").change(function() {
				onSelectChange(thisid);
				
				});


$('.close').click(function(){
$("#catorderform").fadeOut('slow');
});

				
});




});

		
				
				


			  function bindShipTo(data, selectItem,i){
			  
			  ctrlString = "#hidshipto" + i;
			  ctrlString2 = "hidshipto" + i;

		$(ctrlString).empty();
		$(ctrlString).append("<option value=''>Select Color...</option>");
		
		var selectTag = '';

		for(j=0;j< data.length;j++){
			if(data[j].color == null){
				}else{
					if(data[j].color == selectItem ){
						selectTag = 'selected';
					}else{
						selectTag = '';
					}
				}

				$(ctrlString).append("<option value='" + data[j].color + "'" + selectTag + ">" + data[j].color + " - " + data[j].des + "</option>");
			}
			
			document.getElementById(ctrlString2).style.display='';
			document.getElementById("colortag").style.display ='';

			
		}// end bindShipTo function

		
		
						function onSelectChange(i)
		{
		
			ctrlString = "#hidshipto" + i + " option:selected";
         	var selectedOption = $(ctrlString);
         	var selectedColor = selectedOption.val();
			
			var imageid = "img" + i;
	
			var styleStep1 = document.getElementById(imageid).getAttribute("stylenum")


         	var $url = "http://medical.barcouniforms.com/medical/ajax/ajaxquickorderform.asp?output=json&p=sizes&q=" + styleStep1 + "&color=" + selectedColor;
			//prompt('',$url);
			
			

			$.getJSON($url, function(data4){
				//alert(data4.length);

				scurrent = 0;
				for(j=0;j< data4.length - 1;j++){
				
	                if((data4[j].size == null) | (data4[j].size == "")){
	                }else{
                        var currentCtrl = "#size" + i + scurrent;
						sizestring = data4[j].size + " (" + data4[j].qty + ")";
                        $(currentCtrl).text(sizestring);
						document.getElementById("qty" + i + scurrent).style.display='';
						//document.getElementById("sizestag").style.display='';
						scurrent++;
						
	                    
	                }
				}
			});
			

			//addRow([ '<input id=\"myTextBox2\" class=\"dropdown\" />', "<select name=\"hidshipto\" id=\"hidshipto2\" style=\"display:none\"></select>" ,'3']);
        }