function createModal(state){
	var clickToClose = true; // set to true to close modalby clicking anywhere
	var container = document.getElementById('rootTable'); // page container id
	var modal = document.getElementById('modalOverlay'); // modal div id
	var modalFrame = document.getElementById('modalOverlayFrame'); // modalFrame div Id
	var cHeight = (container&&container!='undefined')?container.offsetHeight+"px":"1600px";
	var selects = document.getElementsByTagName('select');
	
	function off(){
      modal.style.display='none';
      modalFrame.style.display='none';
      for (i=0;i<selects.length;i++){
         if(selects[i].id=='mssFontInscript')return;
         selects[i].style.visibility='visible';
      }
   }
	function on(){
      modal.style.height=cHeight;
      modal.style.display='block';
      modalFrame.style.height='400px';
      modalFrame.style.display='block';
      for(i=0;i<selects.length;i++){
         if(selects[i].id=='mssFontInscript')return;
         selects[i].style.visibility='hidden';
      }
   }
   
	if(!modal||modal=='undefined'){modal=document.createElement('div');modal.id='modalOverlay';document.body.appendChild(modal);}
	if(!modalFrame||modalFrame=='undefined'){modalFrame=document.createElement('div');modalFrame.id='modalOverlayFrame';document.body.appendChild(modalFrame);}
	
	if (state=="on")on();
	if (state=="off")off();
	if (state="on") {modal.onclick=function(){
				if(clickToClose)off();
			}}
}

function createModalShip(state){
	var clickToClose = true; // set to true to close modalby clicking anywhere
	var container = document.getElementById('rootTable'); // page container id
	var modal = document.getElementById('modalOverlay'); // modal div id
	var modalFrame = document.getElementById('mssModalOverlayFrameShip'); // modalFrame div Id
	var cHeight = (container&&container!='undefined')?container.offsetHeight+"px":"1600px";
	var selects = document.getElementsByTagName('select');
	
	function off(){
      modal.style.display='none';
      modalFrame.style.display='none';
   }
	function on(){
      modal.style.height=cHeight;
      modal.style.display='block';
      modalFrame.style.display='block';
      var mssWidth = (document.all)?(document.body.clientWidth):(window.innerWidth);
      modalFrame.style.left= ((mssWidth / 2) - 175) + 'px';
   }
	if(!modal||modal=='undefined'){modal=document.createElement('div');modal.id='modalOverlay';document.body.appendChild(modal);}
	if(!modalFrame||modalFrame=='undefined'){modalFrame=document.createElement('div');modalFrame.id='modalOverlayFrame';document.body.appendChild(modalFrame);}
	
	if (state=="on")on();
	if (state=="off")off();
	if (state="on") {
      modal.onclick=function(){
			if(clickToClose)off();
		};
   }
}

var mssInscriptionType = 16;
var numberInsc = 0;

function showInscription(){
   for(var i = 100; i>0; i--){
      if(document.getElementById('mss-inscription-link-'+i)){
         document.getElementById('mss-inscription-link-'+i).style.display='block';
         break;
      } else {
         continue;
      }
   }
}

function createInscription(name){
   if(!document.getElementById('mss-inscription-details'))return;
  if(document.getElementById('mss-inscription-details').innerHTML=='')return;
  var details = document.getElementById('mss-inscription-details').innerHTML;
  showInscription();
  var info = details.split('|:|');
  numberInsc = info.length - 1;
  for(var i = 0; i< numberInsc; i++){
    var add = (i==0)?'':i;
    det = info[i].split(':::');
    addInputs(i, det[0], det[1]);
  }
  
  
   var img = document.getElementById('targetImg');
   var txt = document.getElementById('targetTxt0');
   var select=document.getElementById('mssFontInscript');

   if(name.match(/baby.*cup/i)){mssInscriptionType=1;}
   else if(name.match(/bangle/i)){mssInscriptionType=2;}
   else if(name.match(/photo.*frame/i)){mssInscriptionType=4;}
   else if(name.match(/medical.*bracelet/i)){mssInscriptionType=5;}
   else if(name.match(/medical.*charm/i)){mssInscriptionType=6;}
   else if(name.match(/wallet/i)){mssInscriptionType=20;}
   else if(name.match(/money.*clip/i)){mssInscriptionType=7;}
   else if(name.match(/tie.*tac/i) || name.match(/tie.*pin/i)){mssInscriptionType=8;}
   else if(name.match(/id.*bracelet/i)){mssInscriptionType=9;}
   else if(name.match(/toggle.*heart/i)){mssInscriptionType=10;}
   else if(name.match(/engr.*charm/i)){mssInscriptionType=11;}
   else if(name.match(/signet.*ring/i)){mssInscriptionType=12;}
   else if(name.match(/cufflink/i) || name.match(/cuff link/i)){mssInscriptionType=13;}
   else if(name.match(/tie.*bar/i)){mssInscriptionType=14;}
   else if(name.match(/pocket.*watch/i)){mssInscriptionType=15;}
   else if(name.match(/dog.*tag/i)){mssInscriptionType=16;}
   else if(name.match(/key.*chain/i)){mssInscriptionType=17;}
   else if(name.match(/belt.*buckle/i)){mssInscriptionType=18;}
   else if(name.match(/book.*mark/i)){mssInscriptionType=19;}
   else if(name.match(/collar.*stays/i)){mssInscriptionType=21;}
   else if(name.match(/rosary.*case/i)){mssInscriptionType=22;}
   else if(name.match(/ ring/i)){mssInscriptionType=3;}
   else {mssInscriptionType=16;}
  
  var subPadding = (numberInsc - 1);
  
  
  switch(mssInscriptionType){
      case 0:
         break;
      case 1:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jbqggp442.jpg)';
         img.style.width='250px';
         img.style.height='249px';
         txt.style.padding= (140  - subPadding * 20) + 'px 65px 0 20px';
         for(var k = 1; k<numberInsc; k++){document.getElementById('targetTxt'+k).style.paddingTop = '20px';} 
         fontFamily='script';
         fontSize='22px';
         break;
      case 2:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jb5-16fl.jpg)';
         img.style.width='250px';
         img.style.height='78px';
         txt.style.padding=(47 - subPadding) + 'px 50px 0 50px';
         fontFamily='block';
         fontSize='18px';
         select.remove(3);
         select.remove(2);
         select.remove(0);
         break;
      case 3:
         img.style.backgroundImage='url(http://lib.store.yahoo.net/lib/jewelbasket/new-ring0image.jpg)';
         img.style.width='250px';
         img.style.height='247px';
         txt.style.padding=(154 - subPadding) + 'px 55px 0 45px';
         fontFamily='script';
         fontSize='22px';
         
         break;
      case 4:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jbqggl9313.jpg)';
         img.style.width='250px';
         img.style.height='302px';
         txt.style.padding=(258 - subPadding) + 'px 25px 0 25px';
         fontFamily='script';
         fontSize='20px';
         break;
      case 5:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jbdrmed-4190.jpg)';
         img.style.width='250px';
         img.style.height='95px';
         txt.style.padding=(35 - subPadding) + 'px 80px 0 25px';
         paddingT = (17>(35 - subPadding * 9))?17:(35 - subPadding * 9);
         txt.style.padding=paddingT + 'px 80px 0 25px';
         for(var k = 1; k<numberInsc; k++){
            document.getElementById('targetTxt'+k).style.paddingTop = '3px';
            document.getElementById('targetTxt'+k).style.paddingLeft = '25px';
            document.getElementById('targetTxt'+k).style.paddingRight = '80px';
          }
         fontFamily='block';
         fontSize='18px';
         select.remove(3);
         select.remove(2);
         select.remove(0);
         break;
      case 6:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jbdrdsc-109.jpg)';
         img.style.width='169px';
         img.style.height='196px';
         txt.style.padding=(100 - subPadding) + 'px 20px 0 20px';
         fontFamily='block';
         fontSize='18px';
         select.remove(3);
         select.remove(2);
         select.remove(0);
         break;
      case 7:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jbllsmc-769.jpg)';
         img.style.width='250px';
         img.style.height='154px';
         paddingT = (30>(55 - subPadding * 12))?30:(55 - subPadding * 12);
         txt.style.padding=paddingT + 'px 25px 0 25px';
         for(var k = 1; k<numberInsc; k++){
            document.getElementById('targetTxt'+k).style.paddingTop = '15px';
            document.getElementById('targetTxt'+k).style.paddingLeft = '25px';
            document.getElementById('targetTxt'+k).style.paddingRight = '25px';
          }
         fontFamily='script'; 
         fontSize='22px';
         select.remove(3);
         select.remove(2);
         break;
      case 8:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jblm89097.jpg)';
         img.style.width='175px';
         img.style.height='135px';
         txt.style.padding=(55 - subPadding) + 'px 30px 0 30px';
         fontFamily='script'; 
         fontSize='22px';
         select.remove(3);
         select.remove(2);
         break;
      case 9:
         img.style.backgroundImage='url(http://lib.store.yahoo.net/lib/jewelbasket/id-sample.jpg)';
         img.style.width='423px';
         img.style.height='62px';
         paddingT = (17>(35 - subPadding * 9))?17:(35 - subPadding * 9);
         txt.style.padding=paddingT + 'px 105px 0 95px';
         for(var k = 1; k<numberInsc; k++){
            document.getElementById('targetTxt'+k).style.paddingTop = '3px';
            document.getElementById('targetTxt'+k).style.paddingLeft = '95px';
            document.getElementById('targetTxt'+k).style.paddingRight = '105px';
          }
         fontFamily='script'; 
         fontSize='22px';
         select.remove(3);
         select.remove(2);
         break;
      case 10:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jbtg600.jpg)';
         img.style.width='250px';
         img.style.height='150px';
         txt.style.padding=(98 - subPadding) + 'px 52px 0 125px';
         fontFamily='script'; 
         fontSize='20px';
         select.remove(3);
         select.remove(2);
         break;
      case 11:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jbdrdsc11p.jpg)';
         img.style.width='145px';
         img.style.height='163px';
         txt.style.padding=(65 - subPadding) + 'px 15px 0 15px';
         fontFamily='script'; 
         fontSize='22px';
         select.remove(3);
         select.remove(2);
         break;
      case 12:
         img.style.backgroundImage='url(http://lib.store.yahoo.net/lib/jewelbasket/signet-ring-sample.jpg)';
         img.style.width='310px';
         img.style.height='235px';
         txt.style.padding=(90 - subPadding) + 'px 80px 0 70px';
         fontFamily='script'; 
         fontSize='80px';
         select.remove(3);
         select.remove(2);
         break;
      case 13:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jbllkcl-916.jpg)';
         img.style.width='250px';
         img.style.height='111px';
         txt.style.padding=(35 - subPadding) + 'px 140px 0 20px';
         fontFamily='script'; 
         fontSize='22px';
         select.remove(3);
         select.remove(2);
         break;
      case 14:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jblm89044.jpg)';
         img.style.width='250px';
         img.style.height='57px';
         txt.style.padding=(17 - subPadding) + 'px 15px 0 30px';
         fontFamily='script'; 
         fontSize='22px';
         select.remove(3);
         select.remove(2);
         break;
      case 15:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jblm18109.jpg)';
         img.style.width='250px';
         img.style.height='288px';
         txt.style.padding=(160 - subPadding) + 'px 15px 0 25px';
         fontFamily='script'; 
         fontSize='22px';
         select.remove(3);
         select.remove(2);
         break;
      case 16:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/hec120.jpg)';
         img.style.width='210px';
         img.style.height='390px';
         txt.style.padding=(200 - subPadding) + 'px 10px 0 10px';
         fontFamily='script'; 
         fontSize='22px';
         select.remove(3);
         select.remove(2);
         break;
      case 17:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jbllskc-780.jpg)';
         img.style.width='250px';
         img.style.height='283px';
         txt.style.padding=(200 - subPadding) + 'px 35px 0 130px';
         fontFamily='script'; 
         fontSize='22px';
         select.remove(3);
         select.remove(2);
         break;
      case 18:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jbllsbk-736.jpg)';
         img.style.width='250px';
         img.style.height='167px';
         txt.style.padding=(57 - subPadding) + 'px 50px 0 20px';
         fontFamily='script'; 
         fontSize='22px';
         select.remove(3);
         select.remove(2);
         break;
      case 19:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/qgqq370b.jpg)';
         img.style.width='250px';
         img.style.height='472px';
         txt.style.padding=(50 - subPadding) + 'px 40px 0 50px';
         fontFamily='script'; 
         fontSize='20px';
         select.remove(3);
         select.remove(2);
         break;
      case 20:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jbqggp2045.jpg)';
         img.style.width='250px';
         img.style.height='308px';
         txt.style.padding=(170 - subPadding) + 'px 65px 0 57px';
         fontFamily='script'; 
         fontSize='20px';
         select.remove(3);
         select.remove(2);
         break;
      case 21:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/jbllscs-214.jpg)';
         img.style.width='250px';
         img.style.height='121px';
         txt.style.padding=(80 - subPadding) + 'px 85px 0 35px';
         fontFamily='script'; 
         fontSize='22px';
         select.remove(3);
         select.remove(2);
         break;
      case 22:
         img.style.backgroundImage='url(http://dts.ystoretools.com/1003/images/250x1000/edrh237.jpg)';
         img.style.width='250px';
         img.style.height='206px';
         txt.style.padding=(31 - subPadding) + 'px 92px 0 72px';
         fontFamily='script'; 
         fontSize='20px';
         select.remove(3);
         select.remove(2);
         break;
   }

   
   for(var k = 0; k<numberInsc; k++){
    document.getElementById('targetTxt'+k).style.fontFamily = fontFamily;
    document.getElementById('targetTxt'+k).style.fontSize = fontSize;
   } 
   
   var orderForm = (document.getElementById('qs-order-form'))?document.getElementById('qs-order-form'):document.getElementById('mss-buy-box');
   var testNum = 0;
   var inputs2 = orderForm.getElementsByTagName('input');
	for(var i = 0; i<inputs2.length; i++){
    if(inputs2[i].className=='mss-inscription'){
      inputs2[i].onchange = function(){writeInscript2(this.title);};
      inputs2[i].setAttribute('title',testNum);
      testNum++;
    }
  }
  
}

function writeInscript2(number){
	var input=document.getElementById('inscript'+number);
	if(input==null)return;
	
	var orderForm = (document.getElementById('qs-order-form'))?document.getElementById('qs-order-form'):document.getElementById('mss-buy-box');
	var testNum = 0;
	var inputs = orderForm.getElementsByTagName('input');
	for(var i = 0; i<inputs.length; i++){
    if(inputs[i].className=='mss-inscription'){
      if(testNum == number){
        input.value=inputs[i].value;
        testNum++;
      } else {
        testNum++;
      }
    }
  }
  
  writeInscript(number);
}

function addInputs(number, name, maxLength){
  var mii = document.getElementById('mss-inscription-inputs');
  var input = document.createElement('input');
  input.id = 'inscript'+number;
  input.onfocus = function(){initInscript(number);}
  input.maxLength = maxLength;

  var txt = document.createTextNode(name + " ");
  var txt2 = document.createTextNode(" (" + maxLength + " Character Maximum)"); 
  var br = document.createElement('br');
  mii.appendChild(br);
  mii.appendChild(txt);
  mii.appendChild(input);
  mii.appendChild(txt2);
  
  var div = document.createElement('div');
  div.id='targetTxt'+number;
  document.getElementById('targetImg').appendChild(div);
}


function writeInscript(number){  
	var target=document.getElementById('targetTxt'+number);
	var input=document.getElementById('inscript'+number);
	//var counter=document.getElementById('counter');
	if(target==null || input==null)return;
	var val = input.value;
	target.innerHTML=val;
	//counter.innerHTML='Character Count:' + val.length + ' of ' + mssMaxInscriptionLength;

   var orderForm = (document.getElementById('qs-order-form'))?document.getElementById('qs-order-form'):document.getElementById('mss-buy-box');	
	var testNum = 0;
	var inputs = orderForm.getElementsByTagName('input');
	for(var i = 0; i<inputs.length; i++){
    if(inputs[i].className=='mss-inscription'){
      if(testNum == number){
        inputs[i].value=val;
        testNum++;
      } else {
        testNum++;
      }
    }
  }
	
}

function initInscript(number){
	var input=document.getElementById('inscript'+number);
	if(input==null)return;
	input.onkeyup=function(){writeInscript(number);}
}

function changeFont(){
	var select=document.getElementById('mssFontInscript');
	if(select==null)return;
	var fontS = '0px';
	
	switch(mssInscriptionType){
      case 0:
         break;
      case 1:
         fontS = (select.value == 'script')?'22px':'20px'; 
         break;
      case 2:
         fontS = (select.value == 'script')?'20px':'18px'; 
         break;
      case 3:
         fontS = (select.value == 'script')?'22px':'20px';
         break;
      case 4:
         fontS = (select.value == 'script')?'20px':'18px'; 
         break;
      case 5:
         fontS = (select.value == 'script')?'20px':'18px'; 
         break;
      case 6:
         fontS = (select.value == 'script')?'20px':'18px'; 
         break;
      case 7:
         fontS = (select.value == 'script')?'22px':'20px';
         break;
      case 8:
         fontS = (select.value == 'script')?'22px':'20px'; 
         break;
      case 9:
         fontS = (select.value == 'script')?'22px':'20px';
         break;
      case 10:
         fontS = (select.value == 'script')?'20px':'18px'; 
         break;
      case 11:
         fontS = (select.value == 'script')?'22px':'20px'; 
         break;
      case 12:
         fontS = (select.value == 'script')?'80px':'70px'; 
         break;
      case 13:
         fontS = (select.value == 'script')?'22px':'20px'; 
         break;
      case 14:
         fontS = (select.value == 'script')?'22px':'20px'; 
         break;
      case 15:
         fontS = (select.value == 'script')?'22px':'20px'; 
         break;
      case 16:
         fontS = (select.value == 'script')?'22px':'20px'; 
         break;
      case 17:
         fontS = (select.value == 'script')?'22px':'20px'; 
         break;
      case 18:
         fontS = (select.value == 'script')?'22px':'20px'; 
         break;
      case 19:
         fontS = (select.value == 'script')?'20px':'18px'; 
         break;
      case 20:
         fontS = (select.value == 'script')?'20px':'18px'; 
         break;
      case 21:
         fontS = (select.value == 'script')?'22px':'20px'; 
         break;
      case 22:
         fontS = (select.value == 'script')?'20px':'18px'; 
         break;
   }
   
	  for(var k = 0; k<numberInsc; k++){
    document.getElementById('targetTxt'+k).style.fontFamily = select.value;
    document.getElementById('targetTxt'+k).style.fontSize = fontS;
   } 
   
}