//<reference path="js/jquery.js" />
//<reference path="js/jquery-ui.js" />
var oldClassName = 'bg0';
var frame_flag=document.getElementById('type').value;
if(frame_flag=='true')
{
	frame_flag=true;
}
if(frame_flag=='false')
{
	frame_flag=false;
}
var frame_type=document.getElementById('f_type').value;
var mat_type=document.getElementById('m_type').value;

 count=document.getElementById('count').value;
//alert(count);
Droppables.add("add-a-letter",
{
	//alert("jikdkgbkjg");
	//var count=0;if(
    hoverclass: 'cart-active',
    onDrop: function(element) 
	{
		//alert(element.id);
		//alert(count);
		//if(count<2)
		//{
			//alert('Please select at least 3 letters');
		//}	
		if(count<12)
		{
			//alert('cant proceed futher');
		//alert(count);
		
        new Ajax.Request('add-to-word.php?id='+element.id, {
            method: 'post',
            asynchronous: true,
            evalScripts: true,
			
            onSuccess: function(request) 
			{ 
				
				var str=document.getElementById('word-block').innerHTML;
				len=str.length;
			//alert(str);
			//alert(len);
								
				if((count==0 && len==101) || (count==0 && len==99))
				{
					document.getElementById('word-block').innerHTML="";
				}
				
				var before= document.getElementById('word-block').innerHTML;
				document.getElementById('word-block').innerHTML=before+request.responseText;
				count++;
				if(frame_flag==true)
				{
					// alert(frame_type);		
					
							if(frame_type=='Weathered-White')
							{
								var frame0="frame-0 b-b0";
								var frame1="frame-1 b-b1";
								var frame2="frame-2 b-b2";
								var frame3="frame-3 b-b3";
								var frame4="frame-4 b-b4";
								var frame5="frame-5 b-b5";
								var frame6="frame-6 b-b6";
								var frame7="frame-7 b-b7";
								var frame8="frame-8 b-b8";
								var frame9="frame-9 b-b9";
								var frame10="frame-10 b-b10";
								var frame11="frame-11 b-b11";
								var frame12="frame-12 b-b12";
							}
							if(frame_type=='Weathered-Brown')
							{
								var frame0="frame-0 a-a0";
								var frame1="frame-1 a-a1";
								var frame2="frame-2 a-a2";
								var frame3="frame-3 a-a3";
								var frame4="frame-4 a-a4";
								var frame5="frame-5 a-a5";
								var frame6="frame-6 a-a6";
								var frame7="frame-7 a-a7";
								var frame8="frame-8 a-a8";
								var frame9="frame-9 a-a9";
								var frame10="frame-10 a-a10";
								var frame11="frame-11 a-a11";
								var frame12="frame-12 a-a12";
							}
							if(frame_type=='Black Beveled')
							{
								var frame0="frame-0 c-c0";
								var frame1="frame-1 c-c1";
								var frame2="frame-2 c-c2";
								var frame3="frame-3 c-c3";
								var frame4="frame-4 c-c4";
								var frame5="frame-5 c-c5";
								var frame6="frame-6 c-c6";
								var frame7="frame-7 c-c7";
								var frame8="frame-8 c-c8";
								var frame9="frame-9 c-c9";
								var frame10="frame-10 c-c10";
								var frame11="frame-11 c-c11";
								var frame12="frame-12 c-c12";
							}
							if(frame_type=='Black Beaded')
							{
								var frame0="frame-0 d-d0";
								var frame1="frame-1 d-d1";
								var frame2="frame-2 d-d2";
								var frame3="frame-3 d-d3";
								var frame4="frame-4 d-d4";
								var frame5="frame-5 d-d5";
								var frame6="frame-6 d-d6";
								var frame7="frame-7 d-d7";
								var frame8="frame-8 d-d8";
								var frame9="frame-9 d-d9";
								var frame10="frame-10 d-d10";
								var frame11="frame-11 d-d11";
								var frame12="frame-12 d-d12";
							}
							
							if(frame_type=='Walnut')
							{
								var frame0="frame-0 e-e0";
								var frame1="frame-1 e-e1";
								var frame2="frame-2 e-e2";
								var frame3="frame-3 e-e3";
								var frame4="frame-4 e-e4";
								var frame5="frame-5 e-e5";
								var frame6="frame-6 e-e6";
								var frame7="frame-7 e-e7";
								var frame8="frame-8 e-e8";
								var frame9="frame-9 e-e9";
								var frame10="frame-10 e-e10";
								var frame11="frame-11 e-e11";
								var frame12="frame-12 e-e12";
							}
							if(frame_type=='White')
							{
								var frame0="frame-0 f-f0";
								var frame1="frame-1 f-f1";
								var frame2="frame-2 f-f2";
								var frame3="frame-3 f-f3";
								var frame4="frame-4 f-f4";
								var frame5="frame-5 f-f5";
								var frame6="frame-6 f-f6";
								var frame7="frame-7 f-f7";
								var frame8="frame-8 f-f8";
								var frame9="frame-9 f-f9";
								var frame10="frame-10 f-f10";
								var frame11="frame-11 f-f11";
								var frame12="frame-12 f-f12";
							}
							//mat color
							if(mat_type=='White')
							{
								var mat0="mat-0 mat-a0";
								var mat1="mat-1 mat-a1";
								var mat2="mat-2 mat-a2";
								var mat3="mat-3 mat-a3";
								var mat4="mat-4 mat-a4";
								var mat5="mat-5 mat-a5";
								var mat6="mat-6 mat-a6";
								var mat7="mat-7 mat-a7";
								var mat8="mat-8 mat-a8";
								var mat9="mat-9 mat-a9";
								var mat10="mat-10 mat-a10";
								var mat11="mat-11 mat-a11";
								var mat12="mat-12 mat-a12";
							}
							if(mat_type=='Black')
							{
								var mat0="mat-0 mat-b0";
								var mat1="mat-1 mat-b1";
								var mat2="mat-2 mat-b2";
								var mat3="mat-3 mat-b3";
								var mat4="mat-4 mat-b4";
								var mat5="mat-5 mat-b5";
								var mat6="mat-6 mat-b6";
								var mat7="mat-7 mat-b7";
								var mat8="mat-8 mat-b8";
								var mat9="mat-9 mat-b9";
								var mat10="mat-10 mat-b10";
								var mat11="mat-11 mat-b11";
								var mat12="mat-12 mat-b12";
							}
							if(mat_type=='Tan')
							{
								var mat0="mat-0 mat-c0";
								var mat1="mat-1 mat-c1";
								var mat2="mat-2 mat-c2";
								var mat3="mat-3 mat-c3";
								var mat4="mat-4 mat-c4";
								var mat5="mat-5 mat-c5";
								var mat6="mat-6 mat-c6";
								var mat7="mat-7 mat-c7";
								var mat8="mat-8 mat-c8";
								var mat9="mat-9 mat-c9";
								var mat10="mat-10 mat-c10";
								var mat11="mat-11 mat-c11";
								var mat12="mat-12 mat-c12";
							}
							if(mat_type=='Cream Marble')
							{
								var mat0="mat-0 mat-d0";
								var mat1="mat-1 mat-d1";
								var mat2="mat-2 mat-d2";
								var mat3="mat-3 mat-d3";
								var mat4="mat-4 mat-d4";
								var mat5="mat-5 mat-d5";
								var mat6="mat-6 mat-d6";
								var mat7="mat-7 mat-d7";
								var mat8="mat-8 mat-d8";
								var mat9="mat-9 mat-d9";
								var mat10="mat-10 mat-d10";
								var mat11="mat-11 mat-d11";
								var mat12="mat-12 mat-d12";
							}
							if(mat_type=='Grey')
							{
								var mat0="mat-0 mat-e0";
								var mat1="mat-1 mat-e1";
								var mat2="mat-2 mat-e2";
								var mat3="mat-3 mat-e3";
								var mat4="mat-4 mat-e4";
								var mat5="mat-5 mat-e5";
								var mat6="mat-6 mat-e6";
								var mat7="mat-7 mat-e7";
								var mat8="mat-8 mat-e8";
								var mat9="mat-9 mat-e9";
								var mat10="mat-10 mat-e10";
								var mat11="mat-11 mat-e11";
								var mat12="mat-12 mat-e12";
							}
							if(mat_type=='Baby Blue')
							{
								var mat0="mat-0 mat-f0";
								var mat1="mat-1 mat-f1";
								var mat2="mat-2 mat-f2";
								var mat3="mat-3 mat-f3";
								var mat4="mat-4 mat-f4";
								var mat5="mat-5 mat-f5";
								var mat6="mat-6 mat-f6";
								var mat7="mat-7 mat-f7";
								var mat8="mat-8 mat-f8";
								var mat9="mat-9 mat-f9";
								var mat10="mat-10 mat-f10";
								var mat11="mat-11 mat-f11";
								var mat12="mat-12 mat-f12";
							}
							if(mat_type=='Navy')
							{
								var mat0="mat-0 mat-g0";
								var mat1="mat-1 mat-g1";
								var mat2="mat-2 mat-g2";
								var mat3="mat-3 mat-g3";
								var mat4="mat-4 mat-g4";
								var mat5="mat-5 mat-g5";
								var mat6="mat-6 mat-g6";
								var mat7="mat-7 mat-g7";
								var mat8="mat-8 mat-g8";
								var mat9="mat-9 mat-g9";
								var mat10="mat-10 mat-g10";
								var mat11="mat-11 mat-g11";
								var mat12="mat-12 mat-g12";
							}
							if(mat_type=='Green')
							{
								var mat0="mat-0 mat-h0";
								var mat1="mat-1 mat-h1";
								var mat2="mat-2 mat-h2";
								var mat3="mat-3 mat-h3";
								var mat4="mat-4 mat-h4";
								var mat5="mat-5 mat-h5";
								var mat6="mat-6 mat-h6";
								var mat7="mat-7 mat-h7";
								var mat8="mat-8 mat-h8";
								var mat9="mat-9 mat-h9";
								var mat10="mat-10 mat-h10";
								var mat11="mat-11 mat-h11";
								var mat12="mat-12 mat-h12";
							}
							if(mat_type=='Pink')
							{
								var mat0="mat-0 mat-i0";
								var mat1="mat-1 mat-i1";
								var mat2="mat-2 mat-i2";
								var mat3="mat-3 mat-i3";
								var mat4="mat-4 mat-i4";
								var mat5="mat-5 mat-i5";
								var mat6="mat-6 mat-i6";
								var mat7="mat-7 mat-i7";
								var mat8="mat-8 mat-i8";
								var mat9="mat-9 mat-i9";
								var mat10="mat-10 mat-i10";
								var mat11="mat-11 mat-i11";
								var mat12="mat-12 mat-i12";
							}
							if(mat_type=='Red')
							{
								var mat0="mat-0 mat-j0";
								var mat1="mat-1 mat-j1";
								var mat2="mat-2 mat-j2";
								var mat3="mat-3 mat-j3";
								var mat4="mat-4 mat-j4";
								var mat5="mat-5 mat-j5";
								var mat6="mat-6 mat-j6";
								var mat7="mat-7 mat-j7";
								var mat8="mat-8 mat-j8";
								var mat9="mat-9 mat-j9";
								var mat10="mat-10 mat-j10";
								var mat11="mat-11 mat-j11";
								var mat12="mat-12 mat-j12";
							}
							
							if(mat_type=='Yellow')
							{
								var mat0="mat-0 mat-k0";
								var mat1="mat-1 mat-k1";
								var mat2="mat-2 mat-k2";
								var mat3="mat-3 mat-k3";
								var mat4="mat-4 mat-k4";
								var mat5="mat-5 mat-k5";
								var mat6="mat-6 mat-k6";
								var mat7="mat-7 mat-k7";
								var mat8="mat-8 mat-k8";
								var mat9="mat-9 mat-k9";
								var mat10="mat-10 mat-k10";
								var mat11="mat-11 mat-k11";
								var mat12="mat-12 mat-k12";
							}
							if(mat_type=='White Cloud')
							{
								var mat0="mat-0 mat-l0";
								var mat1="mat-1 mat-l1";
								var mat2="mat-2 mat-l2";
								var mat3="mat-3 mat-l3";
								var mat4="mat-4 mat-l4";
								var mat5="mat-5 mat-l5";
								var mat6="mat-6 mat-l6";
								var mat7="mat-7 mat-l7";
								var mat8="mat-8 mat-l8";
								var mat9="mat-9 mat-l9";
								var mat10="mat-10 mat-l10";
								var mat11="mat-11 mat-l11";
								var mat12="mat-12 mat-l12";
							}
	
	
							if(count==0)
							{
							document.getElementById('word-block').innerHTML=before+'<div id="letter-frame" class="'+frame0+'"/>'+'<div id="letter-mat" class="'+mat0+'"/>';
							}
							
							else if(count==3)
							{
								//$('letter-frame').setAttribute('class',frame3);
								//$('letter-mat').setAttribute("class",mat3);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame3);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat3);
							}
							else if(count==4)
							{
								
								//$('letter-frame').setAttribute('class',frame4);
								//$('letter-mat').setAttribute("class",mat4);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame4);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat4);
							}
							else if(count==5)
							{
								//$('letter-frame').setAttribute('class',frame5);
								//$('letter-mat').setAttribute("class",mat5);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame5);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat5);
							}
							else if(count==6)
							{
								//$('letter-frame').setAttribute('class',frame6);
								//$('letter-mat').setAttribute("class",mat6);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame6);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat6);
							}
							else if(count==7)
							{
								//$('letter-frame').setAttribute('class',frame7);
								//$('letter-mat').setAttribute("class",mat7);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame7);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat7);
							}
							else if(count==8)
							{
								//$('letter-frame').setAttribute('class',frame8);
								//$('letter-mat').setAttribute("class",mat8);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame8);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat8);
							}
							else if(count==9)
							{
								//$('letter-frame').setAttribute('class',frame9);
								//$('letter-mat').setAttribute("class",mat9);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame9);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat9);
							}
							
							
				}
			
				//create  object of sortable
				Sortable.create("word-block",{ tag: 'img',ghosting:false,constraint:false,overlap:'horizontal',
								onChange: function(item) 
								{
                    				var list = Sortable.options(item).element;
                    	$('word-block-updating').update(Sortable.serialize(list).escapeHTML());
                  	 		if(changeEffect) changeEffect.cancel();
                   	 				changeEffect = new Effect.Highlight('word-block-updating', {restoreColor:"transparent" });
               					 },
                    
                				onUpdate: function() 
								{
                    				new Ajax.Request("saveImageOrder.php", {
                        			method: "post",
                        			onLoading: function(){$('activityIndicator').show()},
                        			onLoaded: function(){$('activityIndicator').hide()},
									onSuccess: function(request) {/*alert(request.responseText);*/ updateWordDetails();},
                       				 parameters: { data: Sortable.serialize("word-block") } });
                				}				
           					 });        					
				
				updateWordDetails();
			},
            onFailure: function(request) { alert(request.responseText); },
            onComplete: function(request) { hideAddPane(); },
            parameters: { id: element.id }
        })
		}
		else
		{
			
		}
    }
	
});
	
function check_drop_count()
{
	if(count<3)
		{
			alert('We are sorry, but artwork is currently available from 3 to 12 letters only');
			return false;
	        }
      if(count>12)
		{
			alert('We are sorry, but artwork is currently available from 3 to 12 letters only');
			return false;
	        }
	
}

Droppables.add("trash-can",
{
	
    hoverclass: 'trash-can-active',
	
    onDrop: function(element) { 
	
	count=parseInt(count)-1;
	
	var str=element.id;
	//alert(str.substr(0,10));
	var t=str.substr(0,10);
	
	
		if(t=='word-block')
		{
			//alert("ss");
			trashLetter(element); 
		}
	}
	
});

Droppables.add("letter-list-background",
{
    accept: 'wb-letter',
    onDrop: function(element) { trashLetter(element); }
});

function trashLetter(element) 
{
	/*alert("heleto");
	alert(element);
	alert(Prototype.Browser.IE);*/
	//alert(element.title)
		
    if (Prototype.Browser.IE)
	{
        element.hide();
    }
    else
	{
        element.remove();
    }
		new Ajax.Request('trash-letter.php?select_id='+element.title, {
        method: 'post',
        asynchronous: true,
        evalScripts: true,
        parameters: { select_id: element.title },
	
        onComplete: function(request)
		{
			//alert(count);
			//alert(frame_flag);
			if(frame_flag==true)
				{
					
					
					
								if(frame_type=='Weathered-White')
							{
								var frame0="frame-0 b-b0";
								var frame1="frame-1 b-b1";
								var frame2="frame-2 b-b2";
								var frame3="frame-3 b-b3";
								var frame4="frame-4 b-b4";
								var frame5="frame-5 b-b5";
								var frame6="frame-6 b-b6";
								var frame7="frame-7 b-b7";
								var frame8="frame-8 b-b8";
								var frame9="frame-9 b-b9";
								var frame10="frame-10 b-b10";
								var frame11="frame-11 b-b11";
								var frame12="frame-12 b-b12";
							}
							if(frame_type=='Weathered-Brown')
							{
								var frame0="frame-0 a-a0";
								var frame1="frame-1 a-a1";
								var frame2="frame-2 a-a2";
								var frame3="frame-3 a-a3";
								var frame4="frame-4 a-a4";
								var frame5="frame-5 a-a5";
								var frame6="frame-6 a-a6";
								var frame7="frame-7 a-a7";
								var frame8="frame-8 a-a8";
								var frame9="frame-9 a-a9";
								var frame10="frame-10 a-a10";
								var frame11="frame-11 a-a11";
								var frame12="frame-12 a-a12";
							}
							if(frame_type=='Black Beveled')
							{
								var frame0="frame-0 c-c0";
								var frame1="frame-1 c-c1";
								var frame2="frame-2 c-c2";
								var frame3="frame-3 c-c3";
								var frame4="frame-4 c-c4";
								var frame5="frame-5 c-c5";
								var frame6="frame-6 c-c6";
								var frame7="frame-7 c-c7";
								var frame8="frame-8 c-c8";
								var frame9="frame-9 c-c9";
								var frame10="frame-10 c-c10";
								var frame11="frame-11 c-c11";
								var frame12="frame-12 c-c12";
							}
							
							if(frame_type=='Black Beaded')
							{
								var frame0="frame-0 d-d0";
								var frame1="frame-1 d-d1";
								var frame2="frame-2 d-d2";
								var frame3="frame-3 d-d3";
								var frame4="frame-4 d-d4";
								var frame5="frame-5 d-d5";
								var frame6="frame-6 d-d6";
								var frame7="frame-7 d-d7";
								var frame8="frame-8 d-d8";
								var frame9="frame-9 d-d9";
								var frame10="frame-10 d-d10";
								var frame11="frame-11 d-d11";
								var frame12="frame-12 d-d12";
							}
							if(frame_type=='Walnut')
							{
								var frame0="frame-0 e-e0";
								var frame1="frame-1 e-e1";
								var frame2="frame-2 e-e2";
								var frame3="frame-3 e-e3";
								var frame4="frame-4 e-e4";
								var frame5="frame-5 e-e5";
								var frame6="frame-6 e-e6";
								var frame7="frame-7 e-e7";
								var frame8="frame-8 e-e8";
								var frame9="frame-9 e-e9";
								var frame10="frame-10 e-e10";
								var frame11="frame-11 e-e11";
								var frame12="frame-12 e-e12";
							}
								if(frame_type=='White')
							{
								var frame0="frame-0 f-f0";
								var frame1="frame-1 f-f1";
								var frame2="frame-2 f-f2";
								var frame3="frame-3 f-f3";
								var frame4="frame-4 f-f4";
								var frame5="frame-5 f-f5";
								var frame6="frame-6 f-f6";
								var frame7="frame-7 f-f7";
								var frame8="frame-8 f-f8";
								var frame9="frame-9 f-f9";
								var frame10="frame-10 f-f10";
								var frame11="frame-11 f-f11";
								var frame12="frame-12 f-f12";
							}
							//mat color
							if(mat_type=='White')
							{
								var mat0="mat-0 mat-a0";
								var mat1="mat-1 mat-a1";
								var mat2="mat-2 mat-a2";
								var mat3="mat-3 mat-a3";
								var mat4="mat-4 mat-a4";
								var mat5="mat-5 mat-a5";
								var mat6="mat-6 mat-a6";
								var mat7="mat-7 mat-a7";
								var mat8="mat-8 mat-a8";
								var mat9="mat-9 mat-a9";
								var mat10="mat-10 mat-a10";
								var mat11="mat-11 mat-a11";
								var mat12="mat-12 mat-a12";
							}
								if(mat_type=='Black')
							{
								var mat0="mat-0 mat-b0";
								var mat1="mat-1 mat-b1";
								var mat2="mat-2 mat-b2";
								var mat3="mat-3 mat-b3";
								var mat4="mat-4 mat-b4";
								var mat5="mat-5 mat-b5";
								var mat6="mat-6 mat-b6";
								var mat7="mat-7 mat-b7";
								var mat8="mat-8 mat-b8";
								var mat9="mat-9 mat-b9";
								var mat10="mat-10 mat-b10";
								var mat11="mat-11 mat-b11";
								var mat12="mat-12 mat-b12";
							}
							if(mat_type=='Tan')
							{
								var mat0="mat-0 mat-c0";
								var mat1="mat-1 mat-c1";
								var mat2="mat-2 mat-c2";
								var mat3="mat-3 mat-c3";
								var mat4="mat-4 mat-c4";
								var mat5="mat-5 mat-c5";
								var mat6="mat-6 mat-c6";
								var mat7="mat-7 mat-c7";
								var mat8="mat-8 mat-c8";
								var mat9="mat-9 mat-c9";
								var mat10="mat-10 mat-c10";
								var mat11="mat-11 mat-c11";
								var mat12="mat-12 mat-c12";
							}
							if(mat_type=='Cream Marble')
							{
								var mat0="mat-0 mat-d0";
								var mat1="mat-1 mat-d1";
								var mat2="mat-2 mat-d2";
								var mat3="mat-3 mat-d3";
								var mat4="mat-4 mat-d4";
								var mat5="mat-5 mat-d5";
								var mat6="mat-6 mat-d6";
								var mat7="mat-7 mat-d7";
								var mat8="mat-8 mat-d8";
								var mat9="mat-9 mat-d9";
								var mat10="mat-10 mat-d10";
								var mat11="mat-11 mat-d11";
								var mat12="mat-12 mat-d12";
							}
							if(mat_type=='Grey')
							{
								var mat0="mat-0 mat-e0";
								var mat1="mat-1 mat-e1";
								var mat2="mat-2 mat-e2";
								var mat3="mat-3 mat-e3";
								var mat4="mat-4 mat-e4";
								var mat5="mat-5 mat-e5";
								var mat6="mat-6 mat-e6";
								var mat7="mat-7 mat-e7";
								var mat8="mat-8 mat-e8";
								var mat9="mat-9 mat-e9";
								var mat10="mat-10 mat-e10";
								var mat11="mat-11 mat-e11";
								var mat12="mat-12 mat-e12";
							}
							if(mat_type=='Baby Blue')
							{
								var mat0="mat-0 mat-f0";
								var mat1="mat-1 mat-f1";
								var mat2="mat-2 mat-f2";
								var mat3="mat-3 mat-f3";
								var mat4="mat-4 mat-f4";
								var mat5="mat-5 mat-f5";
								var mat6="mat-6 mat-f6";
								var mat7="mat-7 mat-f7";
								var mat8="mat-8 mat-f8";
								var mat9="mat-9 mat-f9";
								var mat10="mat-10 mat-f10";
								var mat11="mat-11 mat-f11";
								var mat12="mat-12 mat-f12";
							}
							if(mat_type=='Navy')
							{
								var mat0="mat-0 mat-g0";
								var mat1="mat-1 mat-g1";
								var mat2="mat-2 mat-g2";
								var mat3="mat-3 mat-g3";
								var mat4="mat-4 mat-g4";
								var mat5="mat-5 mat-g5";
								var mat6="mat-6 mat-g6";
								var mat7="mat-7 mat-g7";
								var mat8="mat-8 mat-g8";
								var mat9="mat-9 mat-g9";
								var mat10="mat-10 mat-g10";
								var mat11="mat-11 mat-g11";
								var mat12="mat-12 mat-g12";
							}
							if(mat_type=='Green')
							{
								var mat0="mat-0 mat-h0";
								var mat1="mat-1 mat-h1";
								var mat2="mat-2 mat-h2";
								var mat3="mat-3 mat-h3";
								var mat4="mat-4 mat-h4";
								var mat5="mat-5 mat-h5";
								var mat6="mat-6 mat-h6";
								var mat7="mat-7 mat-h7";
								var mat8="mat-8 mat-h8";
								var mat9="mat-9 mat-h9";
								var mat10="mat-10 mat-h10";
								var mat11="mat-11 mat-h11";
								var mat12="mat-12 mat-h12";
							}
							if(mat_type=='Pink')
							{
								var mat0="mat-0 mat-i0";
								var mat1="mat-1 mat-i1";
								var mat2="mat-2 mat-i2";
								var mat3="mat-3 mat-i3";
								var mat4="mat-4 mat-i4";
								var mat5="mat-5 mat-i5";
								var mat6="mat-6 mat-i6";
								var mat7="mat-7 mat-i7";
								var mat8="mat-8 mat-i8";
								var mat9="mat-9 mat-i9";
								var mat10="mat-10 mat-i10";
								var mat11="mat-11 mat-i11";
								var mat12="mat-12 mat-i12";
							}
							if(mat_type=='Red')
							{
								var mat0="mat-0 mat-j0";
								var mat1="mat-1 mat-j1";
								var mat2="mat-2 mat-j2";
								var mat3="mat-3 mat-j3";
								var mat4="mat-4 mat-j4";
								var mat5="mat-5 mat-j5";
								var mat6="mat-6 mat-j6";
								var mat7="mat-7 mat-j7";
								var mat8="mat-8 mat-j8";
								var mat9="mat-9 mat-j9";
								var mat10="mat-10 mat-j10";
								var mat11="mat-11 mat-j11";
								var mat12="mat-12 mat-j12";
							}
							
							if(mat_type=='Yellow')
							{
								var mat0="mat-0 mat-k0";
								var mat1="mat-1 mat-k1";
								var mat2="mat-2 mat-k2";
								var mat3="mat-3 mat-k3";
								var mat4="mat-4 mat-k4";
								var mat5="mat-5 mat-k5";
								var mat6="mat-6 mat-k6";
								var mat7="mat-7 mat-k7";
								var mat8="mat-8 mat-k8";
								var mat9="mat-9 mat-k9";
								var mat10="mat-10 mat-k10";
								var mat11="mat-11 mat-k11";
								var mat12="mat-12 mat-k12";
							}
							if(mat_type=='White Cloud')
							{
								var mat0="mat-0 mat-l0";
								var mat1="mat-1 mat-l1";
								var mat2="mat-2 mat-l2";
								var mat3="mat-3 mat-l3";
								var mat4="mat-4 mat-l4";
								var mat5="mat-5 mat-l5";
								var mat6="mat-6 mat-l6";
								var mat7="mat-7 mat-l7";
								var mat8="mat-8 mat-l8";
								var mat9="mat-9 mat-l9";
								var mat10="mat-10 mat-l10";
								var mat11="mat-11 mat-l11";
								var mat12="mat-12 mat-l12";
							}
							
							if(count==0)
							{
								//$('letter-frame').setAttribute("class",frame0);
								//$('letter-mat').setAttribute("class",mat0);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame0);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat0);

							}
							else if(count==1)
							{
								//$('letter-frame').setAttribute('class',frame1);
								//$('letter-mat').setAttribute("class",mat1);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame1);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat1);
							}
							else if(count==2)
							{
								//$('letter-frame').setAttribute('class',frame2);
								//$('letter-mat').setAttribute("class",mat2);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame2);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat2);
							}
							else if(count==3)
							{
								//$('letter-frame').setAttribute('class',frame3);
								//$('letter-mat').setAttribute("class",mat3);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame3);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat3);
							}
							else if(count==4)
							{
								//$('letter-frame').setAttribute('class',frame4);
								//$('letter-mat').setAttribute("class",mat4);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame4);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat4);
							}
							else if(count==5)
							{
								//$('letter-frame').setAttribute('class',frame5);
								//$('letter-mat').setAttribute("class",mat5);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame5);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat5);
							}
							else if(count==6)
							{
								//$('letter-frame').setAttribute('class',frame6);
								//$('letter-mat').setAttribute("class",mat6);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame6);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat6);
							}
							else if(count==7)
							{
								//$('letter-frame').setAttribute('class',frame7);
								//$('letter-mat').setAttribute("class",mat7);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame7);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat7);
							}
							else if(count==8)
							{
								//$('letter-frame').setAttribute('class',frame8);
								//$('letter-mat').setAttribute("class",mat8);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame8);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat8);
							}
							else if(count==9)
							{
								//$('letter-frame').setAttribute('class',frame9);
								//$('letter-mat').setAttribute("class",mat9);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame9);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat9);
								
								//document.getElementById("letter-frame").setAttribute("class", "frame-9 b-b9");
							}
							else if(count==10)
							{
								//$('letter-frame').setAttribute('class',frame10);
								//$('letter-mat').setAttribute("class",mat10);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame10);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat10);
								//document.getElementById("letter-frame").setAttribute("class", "frame-10 b-b10");
							}
							else if(count==11)
							{
								
								//$('letter-frame').setAttribute('class',frame11);
								//$('letter-mat').setAttribute("class",mat11);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame11);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat11);
							}
							else if(count==12)
							{
								//$('letter-frame').setAttribute('class',frame12);
								//$('letter-mat').setAttribute("class",mat12);
								var oldcname=$('letter-frame').className;
								$('letter-frame').removeClassName(oldcname);
								$('letter-frame').addClassName(frame12);
								var oldmatcname=$('letter-mat').className;
								$('letter-mat').removeClassName(oldmatcname);
								$('letter-mat').addClassName(mat12);
							}
				}
			
			
		
            updateWordDetails();
            if (Prototype.Browser.IE) {
				
                element.hide();
                updateList('word-block', false);
            };
			
		
        }
    });
}


function clearWord() {
	count=0;
	frame_flag=false;
	frame_type='blank';
    var clearer = new Ajax.Updater('word-block', 'clear-word.php', {
        method: 'post',
        asynchronous: true,
        parameters: { clear: 'true' },
        onLoading: function() { /*Effect.Appear('word-block-updating', { duration: 0.05 } );*/ },
        onFailure: function(response) { alert(response.responseText); },
        onComplete: function(response) {
           
			
				for(var i=3;i<=9;i++)
				{
					
					$('mat'+i).setAttribute('class','mat-bg'+i+' active-off');
					
					
				}
			
				for(var i=1;i<7;i++)
				{
					
							$('framed'+i).setAttribute('class','frame-bg'+i+' active-off');
					}
		
           updateWordDetails();
         
        }
    });                            
return false;
}

function showAddPane()
{ 
$('add-a-letter').show();
    var llength = $$('#word-block img').length;
    var letterWidth = 63;
    
    var offset = 450;
    var toppx = 16;

    if (wordType == 'floating') {
        letterWidth = 63;
        if ($('stagger').hasClassName('on')) {
            if (llength % 2 == 1) {
                toppx = 4;
            }
            else {
                toppx = 20;
            }
        } 
    }
   
    if ( llength == 0 ) {
        offset = 420;
    }
   
    var leftpx = ( (llength * (letterWidth) ) / 2) + offset;
    $('letter-drop-indicator').setStyle( { top: toppx + 'px', left: leftpx + 'px' });
}

function hideAddPane() {
		
	
    if ( Prototype.Browser.IE ) {
        var closer = ( setTimeout( $('add-a-letter').hide(), 2000) );
    }
    else {
        $('add-a-letter').hide()
    }
}

function changeBackground(element, classname) {
		

    if ( oldClassName != classname )
    {
        $(oldClassName).removeClassName('on');
        $(oldClassName).addClassName('off');
        $(classname).addClassName('on');
        $(classname).removeClassName('off');
        
        $(element).addClassName(classname);
        $(element).removeClassName(oldClassName);

        oldClassName = classname; 
    }
}

function getCurrentWord()
{ 
	
    new Ajax.Updater('word-block', 'get-current-word.php', {
					 
     method: 'post',
     asynchronous: true,
     evalScripts: true,
     parameters: { load: 'true' },
     onComplete: function(request) { updateWordDetails(); }
     });
}

function updateList(listname, updateDetails) 
{
		
	
     var listContents = Sortable.serialize(listname);
     
     if ( listContents != '' ) {
         new Ajax.Updater('word-block', 'update-position.php', { 
						 
                            method: 'post', 
                            asynchronous: true,
                            evalScripts: true,
                            postBody: listContents,
                            onFailure: function(response) {  alert(response.responseText); },
                            onComplete: function(response) { if ( updateDetails) { updateWordDetails(); } }
                            });
     }

     return false; 
}
function setOptions(pName, pValue,prev)
{
	//alert(prev);
	if(prev!=pValue)
	{
		if ( pName == 'color' || pValue == 'Sepia' )
		{
			
			new Ajax.Request('set-options.php', {
			method: 'post',
			asynchronous: true,
			evalScripts: true,
			parameters: { id: pValue },
			onLoading: function(response) { },
			onFailure: function(response) { alert(response.responseText); },
			onSuccess: function(response) { /*alert(response.responseText);*/
			window.location="index.php"; }
			});
		}
		else
		{
		   
		}
	}
   
}

function updateWordDetails()
{
	new Ajax.Updater('product-region', 'get-current-word.php', {
            method: 'post',
            parameters: { load: 'true' },
            onCreate: function(response) { Effect.Appear(ProductRegionUpdating, { duration: 0.1 }); },
            onComplete: function(response) { Effect.Fade(ProductRegionUpdating, { duration: 0.1 }); },
            asynchronous: true,
            evalScripts: false
        });
        if ($('floating').hasClassName('on')) {
            updateEaselRec(Sortable.sequence('word-block').length);
        }
}

function loadConfigurator(type,frameType,matcolor,id)
{
	if(frameType=='' && frame_flag==false)
	{
		alert("please select Frame");			
			
	}
	else
	{
					
			
						frame_flag=true;
						if(matcolor=='')
							{
								if(mat_type=='blank')
								{ 
									mat_type='White';
								}
								
							}
							else
							{
								mat_type=matcolor;
							}
						//	alert(frameType);
						//	alert(frame_type);
						if(matcolor=='')
						{
							if(frameType=='Weathered-White')
							{
								var frame0="frame-0 b-b0";
								var frame1="frame-1 b-b1";
								var frame2="frame-2 b-b2";
								var frame3="frame-3 b-b3";
								var frame4="frame-4 b-b4";
								var frame5="frame-5 b-b5";
								var frame6="frame-6 b-b6";
								var frame7="frame-7 b-b7";
								var frame8="frame-8 b-b8";
								var frame9="frame-9 b-b9";
								var frame10="frame-10 b-b10";
								var frame11="frame-11 b-b11";
								var frame12="frame-12 b-b12";
							}
						}
						else
						{
								if(frameType=='Weathered-White' || frame_type=='Weathered-White')
							{
								var frame0="frame-0 b-b0";
								var frame1="frame-1 b-b1";
								var frame2="frame-2 b-b2";
								var frame3="frame-3 b-b3";
								var frame4="frame-4 b-b4";
								var frame5="frame-5 b-b5";
								var frame6="frame-6 b-b6";
								var frame7="frame-7 b-b7";
								var frame8="frame-8 b-b8";
								var frame9="frame-9 b-b9";
								var frame10="frame-10 b-b10";
								var frame11="frame-11 b-b11";
								var frame12="frame-12 b-b12";
							}
						}
						if(matcolor=='')
						{
							if(frameType=='Weathered-Brown')
							{
								var frame0="frame-0 a-a0";
								var frame1="frame-1 a-a1";
								var frame2="frame-2 a-a2";
								var frame3="frame-3 a-a3";
								var frame4="frame-4 a-a4";
								var frame5="frame-5 a-a5";
								var frame6="frame-6 a-a6";
								var frame7="frame-7 a-a7";
								var frame8="frame-8 a-a8";
								var frame9="frame-9 a-a9";
								var frame10="frame-10 a-a10";
								var frame11="frame-11 a-a11";
								var frame12="frame-12 a-a12";
							}
						}
						else
						{
							if(frameType=='Weathered-Brown' || frame_type=='Weathered-Brown')
							{
								var frame0="frame-0 a-a0";
								var frame1="frame-1 a-a1";
								var frame2="frame-2 a-a2";
								var frame3="frame-3 a-a3";
								var frame4="frame-4 a-a4";
								var frame5="frame-5 a-a5";
								var frame6="frame-6 a-a6";
								var frame7="frame-7 a-a7";
								var frame8="frame-8 a-a8";
								var frame9="frame-9 a-a9";
								var frame10="frame-10 a-a10";
								var frame11="frame-11 a-a11";
								var frame12="frame-12 a-a12";
							}
						}
						if(matcolor=='')
						{
							if(frameType=='Black Beveled')
							{
								var frame0="frame-0 c-c0";
								var frame1="frame-1 c-c1";
								var frame2="frame-2 c-c2";
								var frame3="frame-3 c-c3";
								var frame4="frame-4 c-c4";
								var frame5="frame-5 c-c5";
								var frame6="frame-6 c-c6";
								var frame7="frame-7 c-c7";
								var frame8="frame-8 c-c8";
								var frame9="frame-9 c-c9";
								var frame10="frame-10 c-c10";
								var frame11="frame-11 c-c11";
								var frame12="frame-12 c-c12";
							}
						}
						else
						{
							if(frameType=='Black Beveled' || frame_type=='Black Beveled')
							{
								var frame0="frame-0 c-c0";
								var frame1="frame-1 c-c1";
								var frame2="frame-2 c-c2";
								var frame3="frame-3 c-c3";
								var frame4="frame-4 c-c4";
								var frame5="frame-5 c-c5";
								var frame6="frame-6 c-c6";
								var frame7="frame-7 c-c7";
								var frame8="frame-8 c-c8";
								var frame9="frame-9 c-c9";
								var frame10="frame-10 c-c10";
								var frame11="frame-11 c-c11";
								var frame12="frame-12 c-c12";
							}
								
						}
						
						if(matcolor=='')
						{
								if(frameType=='Black Beaded')
								{
									var frame0="frame-0 d-d0";
									var frame1="frame-1 d-d1";
									var frame2="frame-2 d-d2";
									var frame3="frame-3 d-d3";
									var frame4="frame-4 d-d4";
									var frame5="frame-5 d-d5";
									var frame6="frame-6 d-d6";
									var frame7="frame-7 d-d7";
									var frame8="frame-8 d-d8";
									var frame9="frame-9 d-d9";
									var frame10="frame-10 d-d10";
									var frame11="frame-11 d-d11";
									var frame12="frame-12 d-d12";
								}
						}
						else
						{
									if(frameType=='Black Beaded' || frame_type=='Black Beaded')
								{
									var frame0="frame-0 d-d0";
									var frame1="frame-1 d-d1";
									var frame2="frame-2 d-d2";
									var frame3="frame-3 d-d3";
									var frame4="frame-4 d-d4";
									var frame5="frame-5 d-d5";
									var frame6="frame-6 d-d6";
									var frame7="frame-7 d-d7";
									var frame8="frame-8 d-d8";
									var frame9="frame-9 d-d9";
									var frame10="frame-10 d-d10";
									var frame11="frame-11 d-d11";
									var frame12="frame-12 d-d12";
								}
						}
						if(matcolor=='')
						{
							if(frameType=='Walnut')
							{
								var frame0="frame-0 e-e0";
								var frame1="frame-1 e-e1";
								var frame2="frame-2 e-e2";
								var frame3="frame-3 e-e3";
								var frame4="frame-4 e-e4";
								var frame5="frame-5 e-e5";
								var frame6="frame-6 e-e6";
								var frame7="frame-7 e-e7";
								var frame8="frame-8 e-e8";
								var frame9="frame-9 e-e9";
								var frame10="frame-10 e-e10";
								var frame11="frame-11 e-e11";
								var frame12="frame-12 e-e12";
							}
						}
						else
						{
								if(frameType=='Walnut' || frame_type=='Walnut')
							{
								var frame0="frame-0 e-e0";
								var frame1="frame-1 e-e1";
								var frame2="frame-2 e-e2";
								var frame3="frame-3 e-e3";
								var frame4="frame-4 e-e4";
								var frame5="frame-5 e-e5";
								var frame6="frame-6 e-e6";
								var frame7="frame-7 e-e7";
								var frame8="frame-8 e-e8";
								var frame9="frame-9 e-e9";
								var frame10="frame-10 e-e10";
								var frame11="frame-11 e-e11";
								var frame12="frame-12 e-e12";
							}
						}
						if(matcolor=='')
						{
							if(frameType=='White')
							{
								var frame0="frame-0 f-f0";
								var frame1="frame-1 f-f1";
								var frame2="frame-2 f-f2";
								var frame3="frame-3 f-f3";
								var frame4="frame-4 f-f4";
								var frame5="frame-5 f-f5";
								var frame6="frame-6 f-f6";
								var frame7="frame-7 f-f7";
								var frame8="frame-8 f-f8";
								var frame9="frame-9 f-f9";
								var frame10="frame-10 f-f10";
								var frame11="frame-11 f-f11";
								var frame12="frame-12 f-f12";
							}
						}
						else
						{
							if(frameType=='White' || frame_type=='White')
							{
								var frame0="frame-0 f-f0";
								var frame1="frame-1 f-f1";
								var frame2="frame-2 f-f2";
								var frame3="frame-3 f-f3";
								var frame4="frame-4 f-f4";
								var frame5="frame-5 f-f5";
								var frame6="frame-6 f-f6";
								var frame7="frame-7 f-f7";
								var frame8="frame-8 f-f8";
								var frame9="frame-9 f-f9";
								var frame10="frame-10 f-f10";
								var frame11="frame-11 f-f11";
								var frame12="frame-12 f-f12";
							}
						}
						if(matcolor=='White' || mat_type=='White')
						{
							var mat0="mat-0 mat-a0";
							var mat1="mat-1 mat-a1";
							var mat2="mat-2 mat-a2";
							var mat3="mat-3 mat-a3";
							var mat4="mat-4 mat-a4";
							var mat5="mat-5 mat-a5";
							var mat6="mat-6 mat-a6";
							var mat7="mat-7 mat-a7";
							var mat8="mat-8 mat-a8";
							var mat9="mat-9 mat-a9";
							var mat10="mat-10 mat-a10";
							var mat11="mat-11 mat-a11";
							var mat12="mat-12 mat-a12";
						}
						if(matcolor=='Black' || mat_type=='Black')
						{
							var mat0="mat-0 mat-b0";
							var mat1="mat-1 mat-b1";
							var mat2="mat-2 mat-b2";
							var mat3="mat-3 mat-b3";
							var mat4="mat-4 mat-b4";
							var mat5="mat-5 mat-b5";
							var mat6="mat-6 mat-b6";
							var mat7="mat-7 mat-b7";
							var mat8="mat-8 mat-b8";
							var mat9="mat-9 mat-b9";
							var mat10="mat-10 mat-b10";
							var mat11="mat-11 mat-b11";
							var mat12="mat-12 mat-b12";
						}
						if(matcolor=='Tan' || mat_type=='Tan' )
						{
							var mat0="mat-0 mat-c0";
							var mat1="mat-1 mat-c1";
							var mat2="mat-2 mat-c2";
							var mat3="mat-3 mat-c3";
							var mat4="mat-4 mat-c4";
							var mat5="mat-5 mat-c5";
							var mat6="mat-6 mat-c6";
							var mat7="mat-7 mat-c7";
							var mat8="mat-8 mat-c8";
							var mat9="mat-9 mat-c9";
							var mat10="mat-10 mat-c10";
							var mat11="mat-11 mat-c11";
							var mat12="mat-12 mat-c12";
						}
						if(matcolor=='Cream Marble' || mat_type=='Cream Marble')
						{
							var mat0="mat-0 mat-d0";
							var mat1="mat-1 mat-d1";
							var mat2="mat-2 mat-d2";
							var mat3="mat-3 mat-d3";
							var mat4="mat-4 mat-d4";
							var mat5="mat-5 mat-d5";
							var mat6="mat-6 mat-d6";
							var mat7="mat-7 mat-d7";
							var mat8="mat-8 mat-d8";
							var mat9="mat-9 mat-d9";
							var mat10="mat-10 mat-d10";
							var mat11="mat-11 mat-d11";
							var mat12="mat-12 mat-d12";
						}
						if(matcolor=='Grey' || mat_type=='Grey')
						{
							var mat0="mat-0 mat-e0";
							var mat1="mat-1 mat-e1";
							var mat2="mat-2 mat-e2";
							var mat3="mat-3 mat-e3";
							var mat4="mat-4 mat-e4";
							var mat5="mat-5 mat-e5";
							var mat6="mat-6 mat-e6";
							var mat7="mat-7 mat-e7";
							var mat8="mat-8 mat-e8";
							var mat9="mat-9 mat-e9";
							var mat10="mat-10 mat-e10";
							var mat11="mat-11 mat-e11";
							var mat12="mat-12 mat-e12";
						}
						if(matcolor=='Baby Blue' || mat_type=='Baby Blue')
						{
							var mat0="mat-0 mat-f0";
							var mat1="mat-1 mat-f1";
							var mat2="mat-2 mat-f2";
							var mat3="mat-3 mat-f3";
							var mat4="mat-4 mat-f4";
							var mat5="mat-5 mat-f5";
							var mat6="mat-6 mat-f6";
							var mat7="mat-7 mat-f7";
							var mat8="mat-8 mat-f8";
							var mat9="mat-9 mat-f9";
							var mat10="mat-10 mat-f10";
							var mat11="mat-11 mat-f11";
							var mat12="mat-12 mat-f12";
						}
						if(matcolor=='Navy' || mat_type=='Navy')
						{
							var mat0="mat-0 mat-g0";
							var mat1="mat-1 mat-g1";
							var mat2="mat-2 mat-g2";
							var mat3="mat-3 mat-g3";
							var mat4="mat-4 mat-g4";
							var mat5="mat-5 mat-g5";
							var mat6="mat-6 mat-g6";
							var mat7="mat-7 mat-g7";
							var mat8="mat-8 mat-g8";
							var mat9="mat-9 mat-g9";
							var mat10="mat-10 mat-g10";
							var mat11="mat-11 mat-g11";
							var mat12="mat-12 mat-g12";
						}
						if(matcolor=='Green' || mat_type=='Green')
						{
							var mat0="mat-0 mat-h0";
							var mat1="mat-1 mat-h1";
							var mat2="mat-2 mat-h2";
							var mat3="mat-3 mat-h3";
							var mat4="mat-4 mat-h4";
							var mat5="mat-5 mat-h5";
							var mat6="mat-6 mat-h6";
							var mat7="mat-7 mat-h7";
							var mat8="mat-8 mat-h8";
							var mat9="mat-9 mat-h9";
							var mat10="mat-10 mat-h10";
							var mat11="mat-11 mat-h11";
							var mat12="mat-12 mat-h12";
						}
						if(matcolor=='Pink' || mat_type=='Pink')
						{
							var mat0="mat-0 mat-i0";
							var mat1="mat-1 mat-i1";
							var mat2="mat-2 mat-i2";
							var mat3="mat-3 mat-i3";
							var mat4="mat-4 mat-i4";
							var mat5="mat-5 mat-i5";
							var mat6="mat-6 mat-i6";
							var mat7="mat-7 mat-i7";
							var mat8="mat-8 mat-i8";
							var mat9="mat-9 mat-i9";
							var mat10="mat-10 mat-i10";
							var mat11="mat-11 mat-i11";
							var mat12="mat-12 mat-i12";
						}
						if(matcolor=='Red' || mat_type=='Red')
						{
							var mat0="mat-0 mat-j0";
							var mat1="mat-1 mat-j1";
							var mat2="mat-2 mat-j2";
							var mat3="mat-3 mat-j3";
							var mat4="mat-4 mat-j4";
							var mat5="mat-5 mat-j5";
							var mat6="mat-6 mat-j6";
							var mat7="mat-7 mat-j7";
							var mat8="mat-8 mat-j8";
							var mat9="mat-9 mat-j9";
							var mat10="mat-10 mat-j10";
							var mat11="mat-11 mat-j11";
							var mat12="mat-12 mat-j12";
						}
						
						if(matcolor=='Yellow' || mat_type=='Yellow')
						{
							var mat0="mat-0 mat-k0";
							var mat1="mat-1 mat-k1";
							var mat2="mat-2 mat-k2";
							var mat3="mat-3 mat-k3";
							var mat4="mat-4 mat-k4";
							var mat5="mat-5 mat-k5";
							var mat6="mat-6 mat-k6";
							var mat7="mat-7 mat-k7";
							var mat8="mat-8 mat-k8";
							var mat9="mat-9 mat-k9";
							var mat10="mat-10 mat-k10";
							var mat11="mat-11 mat-k11";
							var mat12="mat-12 mat-k12";
						}
						if(matcolor=='White Cloud' || mat_type=='White Cloud')
						{
							var mat0="mat-0 mat-l0";
							var mat1="mat-1 mat-l1";
							var mat2="mat-2 mat-l2";
							var mat3="mat-3 mat-l3";
							var mat4="mat-4 mat-l4";
							var mat5="mat-5 mat-l5";
							var mat6="mat-6 mat-l6";
							var mat7="mat-7 mat-l7";
							var mat8="mat-8 mat-l8";
							var mat9="mat-9 mat-l9";
							var mat10="mat-10 mat-l10";
							var mat11="mat-11 mat-l11";
							var mat12="mat-12 mat-l12";
						}
						
						//alert(count);
						//alert(frame_type);
							if(frame_type=='blank')
						{
								if(frameType!='')
								{
									frame_type=frameType;
								}
						
												if(count==0)
												{
													document.getElementById('word-block').innerHTML='<div id="letter-frame" class="frame-0 b-b0"/>'+'<div id="letter-mat" class="'+mat0+'"/>';
												}
												else if(count==1)
												{
													document.getElementById('word-block').innerHTML= document.getElementById('word-block').innerHTML+'<div id="letter-frame" class="'+frame1+'"/>'+'<div id="letter-mat" class="'+mat1+'"/>';
													
												}
												else if(count==2)
												{
													document.getElementById('word-block').innerHTML= document.getElementById('word-block').innerHTML+'<div id="letter-frame" class="'+frame2+'"/>'+'<div id="letter-mat" class="'+mat2+'"/>';
												}
												else if(count==3)
												{
													document.getElementById('word-block').innerHTML= document.getElementById('word-block').innerHTML+'<div id="letter-frame" class="'+frame3+'"/>'+'<div id="letter-mat" class="'+mat3+'"/>';
												}
												else if(count==4)
												{
													document.getElementById('word-block').innerHTML= document.getElementById('word-block').innerHTML+'<div id="letter-frame" class="'+frame4+'"/>'+'<div id="letter-mat" class="'+mat4+'"/>';
												}
												else if(count==5)
												{
													document.getElementById('word-block').innerHTML= document.getElementById('word-block').innerHTML+'<div id="letter-frame" class="'+frame5+'"/>'+'<div id="letter-mat" class="'+mat5+'"/>';
												}
												else if(count==6)
												{
													document.getElementById('word-block').innerHTML= document.getElementById('word-block').innerHTML+'<div id="letter-frame" class="'+frame6+'"/>'+'<div id="letter-mat" class="'+mat6+'"/>';
												}
												else if(count==7)
												{
													document.getElementById('word-block').innerHTML= document.getElementById('word-block').innerHTML+'<div id="letter-frame" class="'+frame7+'"/>'+'<div id="letter-mat" class="'+mat7+'"/>';
												}
												else if(count==8)
												{
													document.getElementById('word-block').innerHTML= document.getElementById('word-block').innerHTML+'<div id="letter-frame" class="'+frame8+'"/>'+'<div id="letter-mat" class="'+mat8+'"/>';
												}
												else if(count==9)
												{
													document.getElementById('word-block').innerHTML= document.getElementById('word-block').innerHTML+'<div id="letter-frame" class="'+frame9+'"/>'+'<div id="letter-mat" class="'+mat9+'"/>';
												}
												else if(count==10)
												{
													document.getElementById('word-block').innerHTML= document.getElementById('word-block').innerHTML+'<div id="letter-frame" class="'+frame10+'"/>'+'<div id="letter-mat" class="'+mat10+'"/>';
												}
												else if(count==11)
												{
													document.getElementById('word-block').innerHTML= document.getElementById('word-block').innerHTML+'<div id="letter-frame" class="'+frame11+'"/>'+'<div id="letter-mat" class="'+mat11+'"/>';
												}
												else if(count==12)
												{
													document.getElementById('word-block').innerHTML= document.getElementById('word-block').innerHTML+'<div id="letter-frame" class="'+frame12+'"/>'+'<div id="letter-mat" class="'+mat12+'"/>';
												}
						}
						else
						{
								if(frameType!='')
								{
									frame_type=frameType;
								}
											if(count==0)
												{
													//$('letter-frame').setAttribute("class",frame0);
													//$('letter-mat').setAttribute("class",mat0);
													var oldcname=$('letter-frame').className;
													$('letter-frame').removeClassName(oldcname);
													$('letter-frame').addClassName(frame0);
													var oldmatcname=$('letter-mat').className;
													$('letter-mat').removeClassName(oldmatcname);
													$('letter-mat').addClassName(mat0);

					
												}
												else if(count==1)
												{
													/*$('letter-frame').setAttribute('class',frame1);
													$('letter-mat').setAttribute("class",mat1);*/
													
													var oldcname=$('letter-frame').className;
													//alert(oldcname);
													$('letter-frame').removeClassName(oldcname);
													//alert(frame1);
													$('letter-frame').addClassName(frame1);
													//alert($('letter-frame').className);
													var oldmatcname=$('letter-mat').className;
													$('letter-mat').removeClassName(oldmatcname);
													$('letter-mat').addClassName(mat1);
												}
												else if(count==2)
												{
													//$('letter-frame').setAttribute('class',frame2);
													//$('letter-mat').setAttribute("class",mat2);
													var oldcname=$('letter-frame').className;
													$('letter-frame').removeClassName(oldcname);
													$('letter-frame').addClassName(frame2);
													var oldmatcname=$('letter-mat').className;
													$('letter-mat').removeClassName(oldmatcname);
													$('letter-mat').addClassName(mat2);
												}
												else if(count==3)
												{
													//$('letter-frame').setAttribute('class',frame3);
													//$('letter-mat').setAttribute("class",mat3);
													var oldcname=$('letter-frame').className;
													$('letter-frame').removeClassName(oldcname);
													$('letter-frame').addClassName(frame3);
													var oldmatcname=$('letter-mat').className;
													$('letter-mat').removeClassName(oldmatcname);
													$('letter-mat').addClassName(mat3);

												}
												else if(count==4)
												{
													//$('letter-frame').setAttribute('class',frame4);
													//$('letter-mat').setAttribute("class",mat4);
													var oldcname=$('letter-frame').className;
													$('letter-frame').removeClassName(oldcname);
													$('letter-frame').addClassName(frame4);
													var oldmatcname=$('letter-mat').className;
													$('letter-mat').removeClassName(oldmatcname);
													$('letter-mat').addClassName(mat4);
												}
												else if(count==5)
												{
													//$('letter-frame').setAttribute('class',frame5);
													//$('letter-mat').setAttribute("class",mat5);
													var oldcname=$('letter-frame').className;
													$('letter-frame').removeClassName(oldcname);
													$('letter-frame').addClassName(frame5);
													var oldmatcname=$('letter-mat').className;
													$('letter-mat').removeClassName(oldmatcname);
													$('letter-mat').addClassName(mat5);
												}
												else if(count==6)
												{
													//$('letter-frame').setAttribute('class',frame6);
													//$('letter-mat').setAttribute("class",mat6);
													var oldcname=$('letter-frame').className;
													$('letter-frame').removeClassName(oldcname);
													$('letter-frame').addClassName(frame6);
													var oldmatcname=$('letter-mat').className;
													$('letter-mat').removeClassName(oldmatcname);
													$('letter-mat').addClassName(mat6);
												}
												else if(count==7)
												{
													//$('letter-frame').setAttribute('class',frame7);
													//$('letter-mat').setAttribute("class",mat7);
													var oldcname=$('letter-frame').className;
													$('letter-frame').removeClassName(oldcname);
													$('letter-frame').addClassName(frame7);
													var oldmatcname=$('letter-mat').className;
													$('letter-mat').removeClassName(oldmatcname);
													$('letter-mat').addClassName(mat7);
												}
												else if(count==8)
												{
													//$('letter-frame').setAttribute('class',frame8);
													//$('letter-mat').setAttribute("class",mat8);
													var oldcname=$('letter-frame').className;
													$('letter-frame').removeClassName(oldcname);
													$('letter-frame').addClassName(frame8);
													var oldmatcname=$('letter-mat').className;
													$('letter-mat').removeClassName(oldmatcname);
													$('letter-mat').addClassName(mat8);
												}
												else if(count==9)
												{
													//$('letter-frame').setAttribute('class',frame9);
													//$('letter-mat').setAttribute("class",mat9);
													var oldcname=$('letter-frame').className;
													$('letter-frame').removeClassName(oldcname);
													$('letter-frame').addClassName(frame9);
													var oldmatcname=$('letter-mat').className;
													$('letter-mat').removeClassName(oldmatcname);
													$('letter-mat').addClassName(mat9);
													
												}
												else if(count==10)
												{
													//$('letter-frame').setAttribute('class',frame10);
													//$('letter-mat').setAttribute("class",mat10);
													var oldcname=$('letter-frame').className;
													$('letter-frame').removeClassName(oldcname);
													$('letter-frame').addClassName(frame10);
													var oldmatcname=$('letter-mat').className;
													$('letter-mat').removeClassName(oldmatcname);
													$('letter-mat').addClassName(mat10);
													
												}
												else if(count==11)
												{
													
													//$('letter-frame').setAttribute('class',frame11);
													//$('letter-mat').setAttribute("class",mat11);
													var oldcname=$('letter-frame').className;
													$('letter-frame').removeClassName(oldcname);
													$('letter-frame').addClassName(frame11);
													var oldmatcname=$('letter-mat').className;
													$('letter-mat').removeClassName(oldmatcname);
													$('letter-mat').addClassName(mat11);
												}
												else if(count==12)
												{
													//$('letter-frame').setAttribute('class',frame12);
													//$('letter-mat').setAttribute("class",mat12);
													var oldcname=$('letter-frame').className;
													$('letter-frame').removeClassName(oldcname);
													$('letter-frame').addClassName(frame12);
													var oldmatcname=$('letter-mat').className;
													$('letter-mat').removeClassName(oldmatcname);
													$('letter-mat').addClassName(mat12);
												}
							
						}
						//alert(matcolor);
						 if(frameType=='')
						 {
							
							$('mat'+id).setAttribute('class','mat-bg'+id+' active-on');
							for(var i=3;i<=9;i++)
							{
								if(i!=id)
								{
										$('mat'+i).setAttribute('class','mat-bg'+i+' active-off');
								}
								
							}
						 }
						 else
						 {
								$('framed'+id).setAttribute('class','frame-bg'+id+' active-on');
							for(var i=1;i<7;i++)
							{
								if(i!=id)
								{
										$('framed'+i).setAttribute('class','frame-bg'+i+' active-off');
								}
								
							}
						 }
				
		
	new Ajax.Request('set_frame.php', {
        method: 'post',
        asynchronous: true,
        evalScripts: true,
        parameters: {
			mt:mat_type,t:type,ft:frame_type },
        onLoading: function(response) { },
        onFailure: function(response) { alert(response.responseText); },
        onSuccess: function(response) {updateWordDetails();}
        });
	//create  object of sortable
				Sortable.create("word-block",{ tag: 'img',ghosting:false,constraint:false,overlap:'horizontal',
								onChange: function(item) 
								{
									
                    				var list = Sortable.options(item).element;
                    	$('word-block-updating').update(Sortable.serialize(list).escapeHTML());
                  	 		if(changeEffect) changeEffect.cancel();
                   	 				changeEffect = new Effect.Highlight('word-block-updating', {restoreColor:"transparent" });
               					 },
                    
                				onUpdate: function() 
								{
                    				new Ajax.Request("saveImageOrder.php", {
                        			method: "post",
                        			onLoading: function(){$('activityIndicator').show()},
                        			onLoaded: function(){$('activityIndicator').hide()},
									onSuccess: function(request) {/*alert(request.responseText);*/ updateWordDetails();},
                       				 parameters: { data: Sortable.serialize("word-block") } });
                				}				
           					 });
				
		
	}
}
function change_mat(p,v)
{
}