try{
    //if(typeof jQuery == 'undefined' || typeof DD_belatedPNG == 'undefined') {      //Edited for IE
	if(typeof jQuery == 'undefined') {
        alert("jQuery or pngFix is undefined!");
        
		throw 'err#gvsgy56283';
    } else{
		var Draw = function(obj){
            this.ele = '#'+obj.cardHolder;
			
            
            this.tmpDim = (obj.dim).split('x');
			this.maxDim = (obj.max).split('x');
            
            
			this.width = parseInt(this.tmpDim[0]);
            //alert(this.width);
			this.height = parseInt(this.tmpDim[1]);
			this.varsePos=true;
			this.logoPos=true;
			this.signPos=true;
            this.textPos=true;
			this.text_diePos=true;
            this.drag = obj.drag;
            this.axis = obj.axis;
			this.topPos = 40;
            this.output = obj.out;
			this.varse = {path:'',code:'nafi',x:0,y:0,font:'',size:0,color:'',val:'',_w:0,_h:0,src:''};
			this.logo = {path:'',code:'nafi',x:0,y:0,font:'',size:0,color:'',val:'',_w:0,_h:0,src:''};
			this.sign = {path:'',code:'nafi',x:0,y:0,font:'',size:0,color:'',val:'',_w:0,_h:0,src:''};
            this.text = {path:'',code:'nafi',x:0,y:0,font:'',size:0,color:'',val:'',_w:0,_h:0,src:''};
			this.text_die = {path:'',code:'nafi',x:0,y:0,font:'',size:0,color:'',val:'',_w:0,_h:0,src:''};
            
            if(obj.style.background=='null' || obj.style.background=='undefined')
                obj.style.background = '#White';
            
			this.background = obj.style.background;
			this.img = obj.img;
            
            
            
            
            /*this.css =$.extend(obj.style,{
				width:this.width,
				height:this.height,
			});*/
            this.css = $.extend({}, obj.style, {width:this.width,height:this.height});   
            
            //alert(this.img)
            
			$(this.ele).css(this.css);
            if(this.img)
            $(this.ele).append('<img src="'+this.img+'" width="'+this.width+'" height="'+this.height+'" \/>');
			$(this.ele).append('<div id="'+obj.cardHolder+'_drawAddLogo" class="drawSlide"></div>');
            //$(this.ele).append('<div id="'+obj.cardHolder+'_overlay" style="display:none;">Updating..</div>');
			$(this.ele).append('<div id="'+obj.cardHolder+'_drawAddSign" class="drawSlide"></div>');
			$(this.ele).append('<div id="'+obj.cardHolder+'_drawAddVarse" class="drawSlide"></div>');
            $(this.ele).append('<div id="'+obj.cardHolder+'_drawAddText" class="drawSlide"></div>');
			$(this.ele).append('<div id="'+obj.cardHolder+'_drawAddTextDie" class="drawSlide"></div>');
            $(this.ele).append('<div id="'+obj.cardHolder+'_drawAddTextVarse" class="drawSlide" style="width:1000px"></div>');
			$(this.ele).append('<div id="'+obj.cardHolder+'_output" style="display:none;"></div>');
			
            
            this.out = '#'+obj.cardHolder+'_output';
			$(this.out).append('<input type="hidden" value="'+obj.style.background+'" id="'+obj.cardHolder+'_output_background" name="'+this.output+'[background]" \/>');
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_cDim" name="'+this.output+'[cDim]" \/>');
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_mDim" name="'+this.output+'[mDim]" \/>');
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_varse_src" name="'+this.output+'[varse][src]" \/>');
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_varse_top" name="'+this.output+'[varse][top]" \/>');
            $(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_varse_left" name="'+this.output+'[varse][left]" \/>');
            $(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_varse_val" name="'+this.output+'[varse][val]" \/>');
            $(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_varse_font" name="'+this.output+'[varse][font]" \/>');
            $(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_varse_size" name="'+this.output+'[varse][size]" \/>');
            $(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_varse_color" name="'+this.output+'[varse][color]" \/>');
            
            //added below 2 line on 26-07-2011 when we got there are 2 field missing like height and width!
            $(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_varse_width" name="'+this.output+'[varse][width]" \/>');
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_varse_height" name="'+this.output+'[varse][height]" \/>');
            
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_logo_src" name="'+this.output+'[logo][src]" \/>');
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_logo_top" name="'+this.output+'[logo][top]" \/>');
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_logo_left" name="'+this.output+'[logo][left]" \/>');
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_sign_src" name="'+this.output+'[sign][src]" \/>');
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_sign_left" name="'+this.output+'[sign][left]" \/>');
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_sign_top" name="'+this.output+'[sign][top]" \/>');
            
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_text_val" name="'+this.output+'[text][val]" \/>');
            $(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_text_top" name="'+this.output+'[text][top]" \/>');
            $(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_text_left" name="'+this.output+'[text][left]" \/>');
            $(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_text_font" name="'+this.output+'[text][font]" \/>');
            $(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_text_size" name="'+this.output+'[text][size]" \/>');
            $(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_text_color" name="'+this.output+'[text][color]" \/>');
            
            $(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_text_die_val" name="'+this.output+'[text_die][val]" \/>');
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_text_die_top" name="'+this.output+'[text_die][top]" \/>');
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_text_die_left" name="'+this.output+'[text_die][left]" \/>');
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_text_die_font" name="'+this.output+'[text_die][font]" \/>');
			$(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_text_die_size" name="'+this.output+'[text_die][size]" \/>');
            $(this.out).append('<input type="hidden" value="" id="'+obj.cardHolder+'_output_text_die_color" name="'+this.output+'[text_die][color]" \/>');
			
            $(this.out).append('<input type="hidden" value="false" id="'+obj.cardHolder+'_output_blank" name="'+this.output+'[blank]" \/>');
              
			
            /*$('#'+obj.cardHolder+'_overlay').dialog({
                bgiframe: true,
                autoOpen: false,
                resizable: false,
                height:140,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.7
                }
            });*/
            //closed by jewel on date: 05-10-11
            
            
			var arVersion = navigator.appVersion.split("MSIE")
			var version = parseFloat(arVersion[1])
			
			$('#'+obj.cardHolder+'_output_cDim').val(obj.dim);
			$('#'+obj.cardHolder+'_output_mDim').val(obj.max);
			
			if (version >= 6.0 && version <7){
				//DD_belatedPNG.fix('.drawSlide img');     //Edited for IE 
			}
			this.ratio = function(key,v){
                return parseFloat(this.tmpDim[key])*parseFloat(v)/parseFloat(this.maxDim[key]);
			};
            this.blank = function(){
                $(this.ele).children().hide();
                $('#'+obj.cardHolder+'_output_blank').val('true');
            }
            this.show = function(){
                $(this.ele).children().show();
                $('#'+obj.cardHolder+'_output_blank').val('flase');
            }
            
            
            this.placeImage = function(data,status){// type, overlay id, container id, output id, relateddata  
                var tmp = '#'+obj.cardHolder+data.container;
                if(data.empty){
                    $(tmp).hide();
                    return 0;
                }
                else $(tmp).show();
                if(!status){            
                    var p = '#'+obj.cardHolder+data.output;
                    if(data.srcM){                  
                        $(p+'src').val(data.srcM); 
                    }                                        
                    return 0;
                }
                
                
                //if(!$('#'+obj.cardHolder+data.overlay).dialog('isOpen'))$('#'+obj.cardHolder+data.overlay).dialog('open');        
                //closed by jewel on date: 05-10-11
                
                
                var image = new Image();
                var mainObj = this;    
                
               
               
                //image.src = data.src;
                var _w = mainObj[data.type]._w;
                var _h = mainObj[data.type]._h;
                
                
                

                
                var myImg = $(image).attr({src: data.src + '?random=' + (new Date()).getTime()}).bind('load', function(){                  
                                 
                    
                    //$('#'+obj.cardHolder+data.overlay).dialog('close');
                    //closed by jewel on date: 05-10-11
                    
                    
                    var xWidth = this.width*(mainObj.width/mainObj.maxDim[0]);
                    //console.log('xWidth verse width: '+ xWidth);
                    var xHeight = this.height*(mainObj.height/mainObj.maxDim[1]);
                    $(tmp).html('<img src="'+data.src+'" width="'+xWidth+'" height="'+xHeight+'" \/>');
                                          
                                                                     
                    if(mainObj.drag)
                        $(tmp).draggable({
                            stop:function(){
                                var p = '#'+obj.cardHolder+data.output;
                                $(p+'top').val($(this).position().top);
                                $(p+'left').val($(this).position().left);
                                mainObj[data.type].x = $(this).position().left;
                                mainObj[data.type].y = $(this).position().top;  
                            },
                            axis:mainObj.axis
                        });
                    
                    
                    
                    
                                                    
                    if(mainObj[data.type+'Pos']){
                        var tmpLeft = ((data.x)?((data.x)-(xWidth/2)):(mainObj.width/2)-(xWidth/2)); 
                       
                        if(data.cardPreview || data.envpreview)
                           tmpLeft = data.x;
                           
                        if(data.inEditMode){
                            $(tmp).css({top:parseFloat(data.y), left:tmpLeft});       
                        } else {
                            $(tmp).css({top:(data.y)?mainObj.ratio(1,data.y):mainObj.topPos, left:tmpLeft});    
                        }
                        
                       mainObj[data.type+'Pos']=false;
                    }else{       
                        var _left= $(tmp).position().left+((mainObj.axis.toLowerCase()!='x')?(_w/2-xWidth/2):0);
                        var _top = $(tmp).position().top+((mainObj.axis.toLowerCase()!='y')?(_h/2-xHeight/2):0); 
                        $(tmp).css({top:_top, left:_left});
                    }           
                    var p = '#'+obj.cardHolder+data.output;
                                         
                   
                    $(p+'top').val($(tmp).position().top);
                                                          
                    $(p+'left').val($(tmp).position().left);
                    if(data.srcM)$(p+'src').val(data.srcM);
                    
                    
                    
                    if(data.text){
                        $(p+'val').val(data.text);//deleting the customized text varse
                        $(p+'src').val('');
                    }
                    if(data.style){
                        if(data.style.fontFamily)$(p+'font').val(data.style.fontFamily);
                        if(data.style.color)$(p+'color').val(data.style.color);
                        if(data.style.fontSize)$(p+'size').val(data.style.fontSize);
                    }                               
                    if(data.srcM)mainObj[data.type].code = data.srcM;
                    
                    
                   
                        mainObj[data.type].x = $(tmp).position().left;
                        mainObj[data.type].y = $(tmp).position().top;    
                   
                    
                    mainObj[data.type].src = data.src;
                    mainObj[data.type]._w = xWidth;
                    mainObj[data.type]._h = xHeight;
                
                    mainObj[data.type].width = xWidth;
                    mainObj[data.type].height = xHeight;
                    $('#'+obj.cardHolder+'_output_'+data.type+'_width').val(xWidth);
                    $('#'+obj.cardHolder+'_output_'+data.type+'_height').val(xHeight);

                
                    //$('#'+obj.cardHolder+'_overlay').dialog('close');
                    //closed by jewel on date: 05-10-11
                
                });
                
                //$('#'+obj.cardHolder+'_overlay').dialog('close');      //Extra hack! 02-08-2011     
                //closed by jewel on date: 05-10-11
   
            }
            
            
            this.placeImageDie = function(data,status){// type, overlay id, container id, output id, relateddata  
                var tmp = '#'+obj.cardHolder+data.container;

                if(data.empty){
                    $(tmp).hide();
                    return 0;
                }
                else $(tmp).show();
                if(!status){            
                    var p = '#'+obj.cardHolder+data.output;
                    if(data.srcM){                  
                        $(p+'src').val(data.srcM); 
                    }                                        
                    return 0;
                }
                
                
                //if(!$('#'+obj.cardHolder+data.overlay).dialog('isOpen'))$('#'+obj.cardHolder+data.overlay).dialog('open'); 
                //closed by jewel on date: 05-10-11
                       
                var image = new Image();
                var mainObj = this;    
                
                
                //image.src = data.src;
                var _w = mainObj[data.type]._w;
                var _h = mainObj[data.type]._h;
                
                
                
                var myImg = $(image).attr({src: data.src + '?random=' + (new Date()).getTime()}).bind('load', function(){                  
                    
                
                    //$('#'+obj.cardHolder+data.overlay).dialog('close');
                    //closed by jewel on date: 05-10-11
                    
                    var xWidth = this.width*(mainObj.width/mainObj.maxDim[0]);
                    //console.log('xWidth verse width: '+ xWidth);
                    var xHeight = this.height*(mainObj.height/mainObj.maxDim[1]);
                    
                    $(tmp).html('<img src="'+data.src+'" width="'+xWidth+'" height="'+xHeight+'" \/>');
                                          
                                   
                                                                     
                    if(mainObj.drag)
                        $(tmp).draggable({
                            stop:function(){
                                var p = '#'+obj.cardHolder+data.output;
                                $(p+'top').val($(this).position().top);
                                $(p+'left').val($(this).position().left);
                                mainObj[data.type].x = $(this).position().left;
                                mainObj[data.type].y = $(this).position().top;  
                            },
                            axis:mainObj.axis
                        });
                    
                    
                    
                    
                    //alert(mainObj[data.type+'Pos']);                                
                    if(mainObj[data.type+'Pos']){
                        //var tmpLeft = ((data.x)?mainObj.ratio(0,data.x):(mainObj.width/2)-(xWidth/2));    //If you use this line it will point the verse left side on exact data.x position not data.x position as verse center position
                        //var tmpLeft = ((data.x)?mainObj.ratio(0,(data.x)-(xWidth/2)):(mainObj.width/2)-(xWidth/2)); //03-Nov-2010 Trying to centering with admin defined position for x
                        
                        var tmpLeft = ((data.x)?((data.x)-(xWidth/2)):(mainObj.width/2)-(xWidth/2)); 
                       
                        //alert(data.cardPreview + ' CardPreview');
                        if(data.cardPreview || data.envpreview)
                           tmpLeft = data.x;
                           
                        
                        /*console.log('Main container width :' + mainObj.width);   
                        console.log('Verse Width: '+ xWidth);
                        console.log('Requested Verse Position x as parameter :' + data.x);   
                        console.log('Verse Position x :' + tmpLeft);   */
                        
                        
                        /*if(data.y+10 > mainObj.height)   {
                            data.y = mainObj.height - 50;   //Just overwriding y axis if verse position is larger then main object height.
                        }*/
                       
                       
                       //alert(data.y);
                       //alert(mainObj.topPos);
                       //alert(mainObj.ratio(1, data.y));
                        //$(tmp).css({top:parseFloat(data.y), left:tmpLeft});
                        if(data.inEditMode){
                            $(tmp).css({top:parseFloat(data.y), left:tmpLeft});       
                        } else {
                            $(tmp).css({top:(data.y)?mainObj.ratio(1,data.y):mainObj.topPos, left:tmpLeft});    
                        }
                        
                       
                       
                        mainObj[data.type+'Pos']=false;
                        //mainObj.topPos+=(xHeight+10); 
                        //mainObj.topPos+=(xHeight+10); 
                    }else{       
                    
                        
                                     
                        var _left= $(tmp).position().left+((mainObj.axis.toLowerCase()!='x')?(_w/2-xWidth/2):0);
                        var _top = $(tmp).position().top+((mainObj.axis.toLowerCase()!='y')?(_h/2-xHeight/2):0); 
                        $(tmp).css({top:_top, left:_left});
                    }           
                    var p = '#'+obj.cardHolder+data.output;
                                         
                   
                    $(p+'top').val($(tmp).position().top);
                                                          
                    $(p+'left').val($(tmp).position().left);
                    if(data.srcM)$(p+'src').val(data.srcM);
                    
                    
                    
                    if(data.text){
                        $(p+'val').val(data.text);//deleting the customized text varse
                        $(p+'src').val('');
                    }
                    if(data.style){
                        if(data.style.fontFamily)$(p+'font').val(data.style.fontFamily);
                        if(data.style.color)$(p+'color').val(data.style.color);
                        if(data.style.fontSize)$(p+'size').val(data.style.fontSize);
                    }                               
                    if(data.srcM)mainObj[data.type].code = data.srcM;
                    
                    
                   
                        mainObj[data.type].x = $(tmp).position().left;
                        mainObj[data.type].y = $(tmp).position().top;    
                   
                    
                    mainObj[data.type].src = data.src;
                    mainObj[data.type]._w = xWidth;
                    mainObj[data.type]._h = xHeight;
                
                    mainObj[data.type].width = xWidth;
                    mainObj[data.type].height = xHeight;
                    
                    
                    $('#'+obj.cardHolder+'_output_'+data.type+'_width').val(xWidth);
                    $('#'+obj.cardHolder+'_output_'+data.type+'_height').val(xHeight);

                
                    //$('#'+obj.cardHolder+'_overlay').dialog('close');
                    //closed by jewel on date: 05-10-11
                
                });
                
                //$('#'+obj.cardHolder+'_overlay').dialog('close');      //Extra hack! 02-08-2011     
                //closed by jewel on date: 05-10-11
   
            }
            
            
            
            this.text2Image = function(data){// type, overlay id, container id, output id, relateddata
                var mainObj = this;
                
                if(data.text=='') return true;
                
                var strText = data.text;
                strText = strText.replace('&', 'AAAAAAAAAAND');
                
                
                $.ajax({
                    type: "POST",
                    url: obj.url,          
                    data: 'text='+strText+'&font='+data.style.fontFamily+'&color='+data.style.color+'&size='+data.style.fontSize+'&cDim='+obj.dim+'&mDim='+obj.max,
                    beforeSend: function(){
                        //$('#'+obj.cardHolder+data.overlay).dialog('open');
                        //closed by jewel on date: 05-10-11
                    },                                                                                       
                    success: function(msg){           
                        if(msg == 'error') {          
                            //$('#'+obj.cardHolder+data.overlay).dialog('close');
                            //closed by jewel on date: 05-10-11
                            alert(msg);
                        } 
                        else {                                            
                            var tmpData = $.extend(data,{
                                src:msg
                            });                      
                            mainObj.placeImage(tmpData,true); 
                            //$('#'+obj.cardHolder+'_overlay').dialog('close');
                            //closed by jewel on date: 05-10-11
                        }
                    }
                });
                return 0;
            }
            
            
            this.text2ImageDie = function(data){// type, overlay id, container id, output id, relateddata
                var mainObj = this;
                
                
                if(data.text=='') return true;
                
                var strText = data.text;
                strText = strText.replace('&', 'AAAAAAAAAAND');
                
                
                $.ajax({
                    type: "POST",
                    url: obj.url,          
                    data: 'text='+strText+'&font='+data.style.fontFamily+'&color='+data.style.color+'&size='+data.style.fontSize+'&cDim='+obj.dim+'&mDim='+obj.max,
                    beforeSend: function(){
                        //$('#'+obj.cardHolder+data.overlay).dialog('open');
                        //closed by jewel on date: 05-10-11
                    },                                                                                       
                    success: function(msg){           
                        if(msg == 'error') {          
                            //$('#'+obj.cardHolder+data.overlay).dialog('close');
                            //closed by jewel on date: 05-10-11
                            alert(msg);
                        } 
                        else {                                            
                            var tmpData = $.extend(data,{
                                src:msg
                            });                      
                            
                            mainObj.placeImageDie(tmpData,true); 
                            //$('#'+obj.cardHolder+'_overlay').dialog('close');
                            //closed by jewel on date: 05-10-11
                        }
                    }
                });
                return 0;
            }
            
            
            this.showOverlay = function(){
                 //$('#'+obj.cardHolder+'_overlay').dialog('open');   
                 //closed by jewel on date: 05-10-11
            }
            
            this.addText = function(data){ 
                displayLoadingMsg();
                var tmpData = $.extend(data,{
                    overlay:'_overlay',
                    container:'_drawAddText',
                    output:'_output_text_',
                    type:'text'
                });
                
                if(data.src){
                    this.placeImage(tmpData,true);   
                } else {
                    
                if($('#textPerDieCut').val()==''){
                    $('#die_cut_drawAddText').html(''); 
                }
                
                    
                if($('#textPer').val()==''){
                    $('#test_drawAddText').html(''); 
                }
                    
                
                if($('#textEnv').val()==''){
                    $('#envelopCust_drawAddText').html(''); 
                    $('#envelopCust_output_text_val').val(''); 
                }
                    
                
                this.text2Image(tmpData); 
                }
                
                hideLoadingMsg();
                
            }
            
            
            this.addDieText = function(data){ 
                displayLoadingMsg();
                var tmpData = $.extend(data,{
                    overlay:'_overlay',
                    container:'_drawAddTextDie',
                    output:'_output_text_die_',
                    type:'text_die'
                });
                
                
                if($('#textPerDieCut').val()==''){
                    $('#die_cut_drawAddTextDie').html(''); 
                }
                
                this.text2ImageDie(tmpData); 
                hideLoadingMsg();
            }
            
            
            
			this.addVarse = function(data){
                displayLoadingMsg();
                var tmpData = $.extend(data,{
                    overlay:'_overlay',
                    container:'_drawAddVarse',
                    output:'_output_varse_',
                    type:'varse'
                });      
                if(data.text)this.text2Image(tmpData);
                else this.placeImage(tmpData,true); 
                hideLoadingMsg();
			}
			this.addLogo = function(data){
				var tmpData = $.extend(data,{
                    overlay:'_overlay',
                    container:'_drawAddLogo',
                    output:'_output_logo_',
                    type:'logo'
                });  
                this.placeImage(tmpData,false);
			}
			this.addSign = function(data){
				var tmpData = $.extend(data,{
                    overlay:'_overlay',
                    container:'_drawAddSign',
                    output:'_output_sign_',
                    type:'sign'
                });                                   
                this.placeImage(tmpData,false);
			}
		}
	}
}catch(keyError){
    alert(keyError);
}