/* ********************************************************************************
 * ******************************************************************************** 
 * these below should reflect the id's of the elements used to set text elements
 * ********************************************************************************
 *********************************************************************************/
    var TXT_TEXT = "txtText";
    var TXT_FONTSIZE = "txtSize";
    var TXT_FONTFAMILY = "font";
    var TXT_UPDATE = "btEditText";
    var CHECKBOX_CENTERED = "chbxCenter";
    
    var TOP= "top";
    var LEFT = "left";
/* ********************************************************************************
 * ********************************************************************************
 * ********************************************************************************
 * ********************************************************************************
 **********************************************************************************/


var __builder = null;
var _SELECTED = null;
var zindexCnt = 200;
var canvasElements = [];
var canvasclick = true;
var canvasSelected = false;
var _TOP = $(TOP);
var _LEFT = $(LEFT);



function urlDecode( text )
{
   // Replace + with ' '
   // Replace %xx with equivalent character
   // Put [ERROR] in output if %xx is invalid.
   var HEXCHARS = "0123456789ABCDEFabcdef"; 
   var encoded = text;
   var plaintext = "";
   var i = 0;
   while (i < encoded.length) {
       var ch = encoded.charAt(i);
	   if (ch == "+") {
	       plaintext += " ";
		   i++;
	   } else if (ch == "%") {
			if (i < (encoded.length-2) 
					&& HEXCHARS.indexOf(encoded.charAt(i+1)) != -1 
					&& HEXCHARS.indexOf(encoded.charAt(i+2)) != -1 ) {
				plaintext += unescape( encoded.substr(i,3) );
				i += 3;
			} else {
				alert( 'Bad escape combination near ...' + encoded.substr(i) );
				plaintext += "%[ERROR]";
				i++;
			}
		} else {
		   plaintext += ch;
		   i++;
		}
	} // while
   return plaintext;
   
}   



function updateTextControlPanel(elm)
{
   
    $('txtText').value = urlDecode(elm.getProperty('txt'));
    $('txtSize').value = elm.getProperty('size');
    $('font').value = elm.getProperty('font');
    $('txtColor').value = elm.getProperty('color');
    $('btEditText').removeProperty('disabled');
    
}
function showSpinner(injectIntoElement)
{
    
    if(!window.ie)
    {
        this.fakeImg = new Image();
        this.fakeImg.setProperty('id','spinner');
        this.fakeImg.src = 'images/spinner.gif';
        
    }
    else
    {
        this.fakeImg = new Element('img',{src: 'images/spinner.gif'});
        this.fakeImg.setAttribute('id','spinner');
    }
    this.fakeImg.width = 16;
    this.fakeImg.height = 16;
    this.fakeImg.injectInside(injectIntoElement);
    
}
function toggleCanvasSelected(on)
{
    if(on)
    {
    
        $ES('.canvasDashedBorder' ,'canvasContainer' ).each(function(item){
            item.removeClass('selectedCanvasBorderOff');
        });  
        $('canvas').addClass('canvasSelected');
        if(_SELECTED != null) _SELECTED.unselect();
        _SELECTED = null;
    }
    else
    {
        $ES('.canvasDashedBorder' ,'canvasContainer' ).each(function(item){
            item.addClass('selectedCanvasBorderOff');
        });  
        $('canvas').removeClass('canvasSelected');
    }
}





var ResizableElement = new Class({
    options: {
        parent: null,
        type: null,
        wrapperCoords:null,
        moveToCoords:null,
        hide:false,
        centered:false
    },
    initialize: function(el, options){
        this.element = $(el);
        this.setOptions(options);
        //debugger;
        
        if(this.options.moveToCoords != null)
        {
            this.load(this.options.moveToCoords);
        }
        else
        {
            this.element.injectInside(this.options.parent);
            this.initResizer();
            this.element.parentNode.setStyle('z-index',zindexCnt++);
        }
        canvasElements.push(this);
        
    },
    initResizer:function()
    {
        var canvasCoords = this.options.parent.getCoordinates();
        this.element = $(this.element);
        var imgCoords = this.element.getCoordinates();
        //console.info('image: %s',Json.toString(imgCoords));
        var imageWidth = imgCoords.width;
        var imageHeight = imgCoords.height;
        var x = canvasCoords.width;
        var y = canvasCoords.height;
        
        
        if(this.options.type != 'TEXT')
        {
        
            //console.info('original sizes width: %s height: %s',x,y);
            /*  this is for very large clipart  */
            
            if (imageWidth > x) {
			    imageHeight = imageHeight * (x / imageWidth); 
			    imageWidth = x; 
			    if (imageHeight > y) { 
				    imageWidth = imageWidth * (y / imageHeight); 
				    imageHeight = y; 
			    }
		    } else if (imageHeight > y) { 
			    imageWidth = imageWidth * (y / imageHeight); 
			    imageHeight = y; 
			    if (imageWidth > x) { 
				    imageHeight = imageHeight * (x / imageWidth); 
				    imageWidth = x;
			    }
		    }
            
            
            this.element.width = imageWidth;
            this.element.height = imageHeight;
        
        }
        
        //console.info('after re-sizes width: %s height: %s',imageWidth,imageHeight);
        
        
                
        
    
        this.customResizeObj = new Ext.Resizable(this.element, {
            wrap:true,
            pinned:true,
            minWidth:25,
            minHeight: 25,
            preserveRatio: true,
            handles: 'all',
            draggable:true,
            dynamic:true
        });
        
        
        
        this.addDottedBorder();
        this.resetCurrentlySelected();
        this.addEvents();
        this.element.parentNode.setStyle('position','absolute');
    
        var coords = this.element.parentNode.getCoordinates();
        //$('top').innerHTML = Json.toString(coords);
        //console.info('coords: %s', Json.toString(coords) );
        this.addResizeHandlerEvents();
       
       //console.info('wrapper: %s',Json.toString(coords));
        
    },
    reinitImage:function(newImg)
    {   
        var oldZ_Index = this.element.parentNode.getStyle('z-index');
        
        var _left  = this.element.parentNode.getStyle('left');//.toInt() + 10 + 'px';
        var _top = this.element.parentNode.getStyle('top');//.toInt() + 10 + 'px';
        
        var oldCoords = this.element.parentNode.getCoordinates();
        
    if(!this.options.allowDimensionChange)
    {
        newImg.style.left = _left;
        newImg.style.top = _top;
        newImg.style.position = 'absolute';
        if(this.options.type != 'TEXT')
        {
        newImg.style.width = oldCoords.width.toInt()-4 + 'px';
        newImg.style.height = oldCoords.height.toInt()-4 + 'px';
        }

            //newImg.setStyles(   {'left':_left, 'top':_top, 'position':'absolute' , 'width':oldCoords.width.toInt()-4 + 'px', 'height':oldCoords.height.toInt()-4 + 'px'} );
    }
	else
	{
	    newImg.style.left = _left;
	    newImg.style.top = _top;
	    newImg.style.position = 'absolute';
            //newImg.setStyles(   {'left':_left, 'top':_top, 'position':'absolute' } );
        }
        this.options.allowDimensionChange = false;
        
        this.customResizeObj.proxy.remove();
        this.destroyCurrentWrapper();
        
        this.element = newImg;
        //this.element.injectInside(this.options.parent);
        this.options.parent.appendChild(this.element);
        this.initResizer();
        this.element.parentNode.setStyle('z-index',oldZ_Index);
        
        if(this.options.centered) this.toggleCenter(true);
        
        this.updateHTMLControls();
    },
    destroyCurrentWrapper:function()
    {
        this.element.parentNode.remove();
    },
    addResizeHandlerEvents:function()
    {
        this.customResizeObj.type = this.options.type;
        this.customResizeObj.superClass = this;
        this.customResizeObj.wrapper = this.element.parentNode;
        this.customResizeObj.element = this.element;
        this.customResizeObj.wrapperCoords = this.element.getCoordinates();
        this.customResizeObj.on("resize", this.onResizeHandler);
        
    },
    onResizeHandler:function()
    {
        if(this.type == "TEXT")
        {
            var newCoords = this.element.getCoordinates();
            //var newCoords = this.wrapper.getCoordinates();
            //[new font size]=[old font size]*[new pixel width]/[old pixel width]
            //var diffAmnt = newCoords.width - this.wrapper.getCoordinates().width ;
            var diffAmnt = newCoords.width - this.wrapperCoords.width ;
            diffAmnt = (diffAmnt < 0) ? diffAmnt * -1 : diffAmnt;
            if(diffAmnt > 0)
            {
                var old = this.superClass.options.size;
                this.superClass.options.size = this.superClass.options.size * ( newCoords.width / this.wrapperCoords.width );
                this.superClass.options.size = this.superClass.options.size.round();
                //this.superClass.options.size = this.superClass.options.size - 6;
                this.superClass.reinitSrc();
            }
            this.wrapperCoords = newCoords;
        }
        /*else if(this.type == 'CLIPART')
        {
            this.superClass.ClipArtResizeHandler();
            this.superClass.reinitSrc();
        }
        */
    },
    deleteNode:function()
    {   
        this.element.parentNode.remove();
        for(i=0; i<canvasElements.length; i++)
        {
            if(canvasElements[i] === this)
            {
                //console.warn("removing %s",this.options.text);
                canvasElements.remove(this);
            }
        }
    },
    addEvents:function()
    {
        //add click listener
        var thisClass = this;
        this.element.parentNode.addEvent('click',function(){
            thisClass.resetCurrentlySelected();
            thisClass.updateHTMLControls();
            canvasclick = false;
            canvasSelected = false;
        });
        this.element.parentNode.addEvent('mouseenter',function(){
            var coords = this.getCoordinates();
            //$('top').innerHTML = coords.top;
            //$('left').innerHTML = coords.left;
            if(thisClass != _SELECTED)
            {
                thisClass.addMouseOverWrapper();
            }
        });
        this.element.parentNode.addEvent('mouseleave',function(){
            if(thisClass != _SELECTED)
            {
                thisClass.removeMouseOverWrapper();
            }
            
        });
        
        
    },
    removeMouseOverWrapper:function()
    {
        //this.element.parentNode.removeClass('mouseOverWrapper');
        this.element.parentNode.removeClass('mouseOverWrapper');
        this.element.parentNode.addClass('regularBorder');
    },
    addMouseOverWrapper:function()
    {
        /*  this will have to change once you introduce the changing background on the canvas, it won't work anymore, 
         *  you'll have to use setStyle instead and put it to the border color, this is a lame fix, maybe you could set
         *  the existing border color to transparent
        */
        //this.element.parentNode.addClass('mouseOverWrapper');
        this.element.parentNode.addClass('mouseOverWrapper');
        this.element.parentNode.removeClass('regularBorder');
    },
    resetCurrentlySelected:function()
    {
        if(_SELECTED != null)
        {
            _SELECTED.unselect();
        }
        _SELECTED = this;
        this.setCursor('move');
        this.showHandles();
        this.showDottedBorders();
        this.removeMouseOverWrapper();
        
    },
    unselect:function()
    {
        this.hideHandles();
        this.hideDottedBorders();
        this.setCursor('default');
    },
    addDottedBorder:function()
    {
        new Element('div',{'class' : 'dashedBorder borderHoriz borderNorth'}).injectAfter(this.element);
        new Element('div',{'class' : 'dashedBorder borderHoriz borderSouth'}).injectAfter(this.element);
        new Element('div',{'class' : 'dashedBorder borderVert borderEast'}).injectAfter(this.element);
        new Element('div',{'class' : 'dashedBorder borderVert borderWest'}).injectAfter(this.element);
    },
    setCursor:function(cursorType)
    {
        this.element.style.cursor = cursorType;
    },
    hideHandles:function()
    {
        this.toggleDisplay('.x-resizable-handle','none');
    },
    showHandles:function()
    {
        this.toggleDisplay('.x-resizable-handle','block');
    },
    hideDottedBorders:function()
    {
        this.toggleDisplay('.dashedBorder','none');   
    },
    showDottedBorders:function()
    {
        this.toggleDisplay('.dashedBorder','block');
    },
    toggleDisplay:function (_class,mode)
    {
        $ES(_class,this.element.parentNode).each(function(handle){
            handle.setStyle('display',mode);
        });
    },
    updateHTMLControls:function()
    {
        if(this.options.type == "TEXT")
        {
            $(TXT_TEXT).value = urlDecode(this.options.text);
            $(TXT_FONTSIZE).value = this.options.size;
            $(TXT_FONTFAMILY).value = this.options.font;
            //$(TXT_UPDATE).disabled = false;
        }
        $(CHECKBOX_CENTERED).checked = this.options.centered;
    },
    setCoordinates:function(coords)
    {
        this.element.top = coords.element.top;
        this.element.left = coords.element.left;
        this.element.height = coords.element.height;
        this.element.width = coords.element.width;
    },
    load:function(coords)
    {
        this.element.setStyles( {'display':'none', 'position':'absolute'} );
        this.element.injectInside(this.options.parent);
        this.element.setStyles( {'top':coords.element.top + 'px','left':coords.element.left + 'px','width':coords.element.width + 'px' , 'height':coords.element.height + 'px', 'display':'block'} );
        this.initResizer();
        this.element.parentNode.setStyle('z-index',zindexCnt++);
        this.updateHTMLControls();
    },
    reinitSrc:function()
    {
        var img = new Image();
        img.superClass = this;
        img.onload = this.reinitOnLoad;
        img.src  = this.loadedURL();
            
        //var reImage = new Asset.image(this.loadedURL(), { onload: this.reinitOnLoad }); /*    this is buggy and was firing past onload events again and again */
    },
    reinitOnLoad:function()
    {   this.superClass.reinitImage(this);       
    },
    loadedURL: function()
	{
	    switch(this.options.type)
	    {
	        case 'TEXT':
	            return "FontHandler.ashx?text="+ this.options.text +"&fontSize="+this.options.size+"&color="+this.options.color+"&font=" + this.options.font ;        
	            break;
	        case 'CLIPART':
	            if(this.options.color == null) this.options.color = 'ffffff';
				if(this.options.color.indexOf('#') == 0) this.options.color =  this.options.color.substring(1);
	            var extraParams= '';
	            if(this.options.optimize) 
	            {   var coords = this.element.parentNode.getCoordinates();
	                
	                extraParams += "&width=" + (coords.width.toInt() - 4) + "&height=" + (coords.height.toInt() - 4 );
	                //console.warn('wrapper %s', Json.toString(coords) );
	                //console.warn('optimizing %s', extraParams);
	                this.options.optimize = null;
	            }
                return 'ClipArtHandler.ashx?path=' +this.options.path + '&color=' + this.options.color + extraParams;
	            break;
	    }   
    },
    toggleCenter:function(setCenter)
    {
        if(setCenter)
        {
            this.options.centered = true;
            var parentCoords = this.options.parent.getCoordinates();
            var wrapperCoords = this.element.parentNode.getCoordinates();
            var elCoords = this.element.getCoordinates();
            
//            console.info('parent: %s', Json.toString( parentCoords ) );
//            console.info('wrapper: %s', Json.toString( wrapperCoords ) );
//            console.info('element: %s', Json.toString( elCoords ) );
            
            var center = {};
            center.X = (parentCoords.width / 2 ) - (elCoords.width/2);
            center.Y = (parentCoords.height / 2 ) - (elCoords.height/2);
            var canvasCoords = this.options.parent.getCoordinates();
            //this.element.parentNode.setStyles( {'top':center.Y + 'px' , 'left': center.X + 'px'  } );  
            this.element.parentNode.setStyles( {  'left': center.X + 'px'  } );  
        }
        else this.options.centered = false;
    },
    sendToBack:function()
    {
        //this.element.parentNode.getStyle('z-index');
        //console.info('------------------------------------------');
        var min = 1000;
        var cur = this.element.parentNode.getStyle('z-index');
        //console.info('cur %s min %s',cur,min);
        for(i=0; i<canvasElements.length; i++)
        {
            var curElZ = canvasElements[i].element.parentNode.getStyle('z-index').toInt();
            if(curElZ < cur && this != canvasElements[i])
            {
                var newVal = curElZ.toInt() + 1;
                canvasElements[i].element.parentNode.setStyle('z-index', newVal);
                //console.info('setting %s to %s', curElZ, curElZ+1);
                if(curElZ.toInt() < min)    min = curElZ.toInt();
            }
            //console.info('cur: %s min: %s curElZ: %s',cur,min,curElZ);
        }
        if(min != 1000)
            this.element.parentNode.setStyle('z-index', min);
        
    },
    bringToFront:function()
    {
        //this.element.parentNode.getStyle('z-index');
        //console.info('------------------------------------------');
        var max = -1;
        var cur = this.element.parentNode.getStyle('z-index');
        //console.info('cur %s max %s',cur,max);
        for(i=0; i<canvasElements.length; i++)
        {   
            //console.info('%s' ,canvasElements[i].options.type);
            var curElZ = canvasElements[i].element.parentNode.getStyle('z-index').toInt();
            if(curElZ > cur && this != canvasElements[i])
            {
                var newVal = curElZ.toInt() - 1;
                canvasElements[i].element.parentNode.setStyle('z-index',newVal);
                //console.info('setting %s to %s', curElZ, newVal  );
                if(curElZ > max)    max = curElZ;
            }
            //console.info('cur: %s max: %s curElZ: %s',cur,max,curElZ);
        }
        if(max > -1)
            this.element.parentNode.setStyle('z-index', max);
    }
    
    
});
ResizableElement.implement(new Options, new Events);


ResizableElement.Text = ResizableElement.extend({
    options: 
    {
		text: 'hello world',
		font: "Arial",
		color: '#000000',
		size: '20',
		height: null,
		width: null,
		type: 'TEXT'
		
	},
	initialize: function(options)
	{   this.setOptions(options);
	    //_textClass = this;
	    this.img = new Image();
	    this.img.superClass = this;
        this.img.onload = this.onLoadEvent;
        this.img.src  = this.loadedURL();
	    //this.img = new Asset.image(this.loadedURL(), {  onload: this.onLoadEvent });
        this.loadSpinner();
	    
	},
	loadSpinner:function()
    {
        showSpinner(this.options.parent);
    },
    onLoadEvent:function()
    {
        this.img = this;
        this.element = this;
        try
        {
            if($('spinner'))
                $('spinner').remove();
            this.superClass.parent(this.img);
            
        }
        catch(e)
        {
            alert('onTextLoadEvent: ' +e);
        };
        
    },
    updateText:function(text,font,color,size)
    {   
        
        
        color = (color.indexOf('#') == 0) ? color.substring(1) : color;
        
        if(this.options.text != text) this.options.allowDimensionChange = true;
        if(this.options.font != font) this.options.allowDimensionChange = true;
        if(this.options.size != size) this.options.allowDimensionChange = true;
        
        this.options.text = text;
        this.options.font = font;
        this.options.color = color;
        this.options.size = size;
        
        var spinner = new Image();
        spinner.src = 'images/spinner.gif';
        $(spinner).id = 'spinner';
        $(spinner).setStyles( {'position':'absolute','top':this.element.getStyle('top'), 'left':this.element.getStyle('left'), 'z-index':this.element.parentNode.getStyle('z-index').toInt() + 1} );
        $(spinner).injectBefore(this.element);
        this.reinitSrc();
        
    }
 });

ResizableElement.Image = ResizableElement.extend({
    options :
    {   type: "IMAGE",
        height: null,
        width: null,
        imageName: null,
        path: null,
        isClipArt:false
    },
    initialize: function(path,options)
    {
        this.setOptions(options);
        this.options.path = path;
        
	    this.img = new Image();
	    this.img.superClass = this;
        this.img.onload = this.onLoadEvent;
        
        this.img.src =  'upload/' + this.options.path;
	    this.loadSpinner();
        
        
    },
    loadSpinner:function()
    {
        showSpinner(this.options.parent);
    },
    onLoadEvent:function()
    {
        this.img = this;
        if($('spinner'))
            $('spinner').remove();
        this.superClass.parent(this.img);
        
    }
    
 });
 
 ResizableElement.ClipArt = ResizableElement.extend({
    options :
    {   type: "CLIPART",
        height: null,
        width: null,
        imageName: null,
        path: null, 
        color:'000000'
    },
    initialize: function(path,options)
    {
        this.setOptions(options);
        this.options.path = path;
        
        this.img = new Image();
	    this.img.superClass = this;
        this.img.onload = this.onLoadEvent;
        this.img.src =  this.loadedURL();
        showSpinner(this.options.parent);
    },
    onLoadEvent:function()
    {
        this.img = this;
        if($('spinner'))
                $('spinner').remove();
        
        this.superClass.parent(this.img);
    },
    updateClipArtColor:function (color)
    {   this.options.color = color;
        var spinner = new Image();
        spinner.src = 'images/spinner.gif';
        $(spinner).id = 'spinner';
        $(spinner).setStyles( {'position':'absolute','top':this.element.getStyle('top'), 'left':this.element.getStyle('left'), 'z-index':this.element.parentNode.getStyle('z-index').toInt() + 1} );
        $(spinner).injectBefore(this.element);
        
        this.reinitSrc();
    },
    ClipArtResizeHandler:function()
    {
        this.options.optimize = true;
        var elCoords = this.element.getCoordinates();
        var wrapperCoords = this.element.parentNode.getCoordinates();
        //console.info('elCoords: %s', Json.toString(elCoords) );
        //console.info('wrapperCoords: %s', Json.toString(wrapperCoords) );
    }
   
    
});


var Builder = new Class({
    options:
    {
        canvas:null
    },
    initialize: function(canvas){
        this.canvas = $(canvas);
    },
    addTextElement: function (text,font,color,size)
    {
        if(text.length > 0)
        {
            var txt = this.URLEncode(text);
           var textElement = new ResizableElement.Text({'parent':this.canvas,'text':txt, 'font':font,'color':color,'size':size});
        }
        
        if($('spinner') && window.ie)
        {    $('spinner').remove();
        }
        
    },
    addImageElement:function(path)
    {
        
        //alert('path: ' + path);
        var imageElement = new ResizableElement.Image(path,{'parent':this.canvas});
        try{ top.TB_remove(); } catch(e) {};
        //alert('hello');
        if($('spinner') && window.ie)
        {    $('spinner').remove();
        }
    },
    updateTextElement:function(text,font,color,size)
    {
        var txt= this.URLEncode(text);
           
        if(_SELECTED != null)   _SELECTED.updateText(txt,font,color,size);
    },
    displayColorPicker: function()
    {
	
	    var pallete = $('pallete');
	    var colors = ['#ffffff','#000000','#383f99','#2b5fc4','#93b8fc','#aae0fa','#bce474', '#9fbc2e','#7ac95e','#57ba46', '#1ca651', '#fff4a5', '#f8dc93', '#feda00', '#fdc822', '#fab325', '#f8931d', '#f6b5a1', '#dd6ba9', '#ec3024', '#e54545', '#b72122'];
	    var builder = this;
	    colors.each(function(color){
		    var div = new Element('div');
		    div.setStyle('background-color',color);
		    div.addClass('palletColor');
		    div.injectInside(pallete);
		    div.addEvent('click',function(){
		       if(_SELECTED != null) 
		       {
                    switch(_SELECTED.options.type)
                    {
                        case 'TEXT':
                            _SELECTED.updateText(_SELECTED.options.text,_SELECTED.options.font, color,_SELECTED.options.size);
                            break;
                        case 'CLIPART':
                            _SELECTED.updateClipArtColor(color);
                    }	
		       }
		       else if(canvasSelected)
		       {
                    builder.canvas.setStyle('background-color', color);
               }
		    });
	    });
    },
    TrimPound: function(str)
    {
	    if(str.indexOf('#') == 0)
	    {
	        return str.substring(1);
	    }
	    return str;
    },
    SaveToXML:function()
    {
    },
    CheckXMLState:function() 
    {
	//var scheck = this.xmlDoc.readyState.value;
	//if (scheck == 4) 
	//this.readXMLFromDoc();
    },
    LoadFromXML:function(xmlAsString)
    {
        if(window.ie) 
        {   /*  for ie brownsers    */
            this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            this.xmlDoc.async = false;
            this.xmlDoc.onreadystatechange = this.CheckXMLState;
		    
        }
        else
        {   /*  for mozilla browsers    */
            this.xmlDoc = document.implementation.createDocument("","",null);
            //xmlDoc.load("note.xml");
            //xmlDoc.onload=function-name
            this.xmlDoc.onload = this.readXMLFromDoc;
            
        }
        //this.xmlDoc.superClass = this;
        
        if(window.ie)   this.xmlDoc.loadXML(xmlAsString);
        else
        {
            parser = new DOMParser();
            this.xmlDoc = parser.parseFromString(xmlAsString,'text/xml');
        }
        //this.xmlDoc.load( file);
        this.readXMLFromDoc();
    },
    readXMLFromDoc:function()
    {
           
        var canvasColor =  this.xmlDoc.documentElement.getAttribute('color');
        this.canvas.setStyle('background-color',canvasColor);
        var elements = this.xmlDoc.documentElement.getElementsByTagName('ELEMENT'); 
        var canvasCoords = this.canvas.getCoordinates();
        for(i=0; i<elements.length; i++)
        {   
            var _el = elements[i];
            var _sizer = {};
            _sizer.type = _el.getElementsByTagName('type')[0].childNodes[0].nodeValue;
            var elementCoords = {};  elementCoords.element = {};
            var _elementNode = _el.getElementsByTagName('content')[0];
            var _pdfNode = _el.getElementsByTagName('pdfPosition')[0];
            
			elementCoords.element.top = canvasCoords.top + (_pdfNode.getAttribute('top') - canvasCoords.top);
            elementCoords.element.left = canvasCoords.left + (_pdfNode.getAttribute('left') - canvasCoords.left);

			//elementCoords.element.top = canvasCoords.top + (_elementNode.getAttribute('top') - canvasCoords.top);
            //elementCoords.element.left = canvasCoords.left + (_elementNode.getAttribute('left') - canvasCoords.left);
            //console.info('elLeft: %s , canvasLeft: %s  _pdfNode.Left: %s',_elementNode.getAttribute('left'), canvasCoords.left,_pdfNode.getAttribute('left'));
            
            //elementCoords.element.left = canvasCoords.left.toInt() + ( _pdfNode.getAttribute('left') - canvasCoords.left ) ;
            //console.info('elementCoords.element.left: %s', elementCoords.element.left);
            elementCoords.element.width = _elementNode.getAttribute('width') ;
            elementCoords.element.height = _elementNode.getAttribute('height'); 
            elementCoords.element.width = _el.getElementsByTagName('wrapper')[0].getAttribute('width') - 4 ;
            elementCoords.element.height = _el.getElementsByTagName('wrapper')[0].getAttribute('height') -4 ;
            //console.info('loading node type %s', _sizer.type);
            switch(_sizer.type)
            {
                case "TEXT":
                    _sizer.text = _el.getElementsByTagName('text')[0].childNodes[0].nodeValue;
                    _sizer.font = _el.getElementsByTagName('font')[0].childNodes[0].nodeValue;
                    _sizer.color = _el.getElementsByTagName('color')[0].childNodes[0].nodeValue;
                    _sizer.size = _el.getElementsByTagName('size')[0].childNodes[0].nodeValue;
                    var foo =  new ResizableElement.Text({'parent':this.canvas,'text':_sizer.text, 'font':_sizer.font,'color':_sizer.color,'size':_sizer.size, 'moveToCoords':elementCoords});
                    //console.info('text \'%s\' seemed to load',_sizer.text);
                    break;
                case "IMAGE":        
                    var path = _el.getElementsByTagName('path')[0].childNodes[0].nodeValue;
                    var imageElement = new ResizableElement.Image(path,{'parent':this.canvas, 'moveToCoords':elementCoords });
                    break;
                case "CLIPART":
                    var path = _el.getElementsByTagName('path')[0].childNodes[0].nodeValue;
                    //var path = _el.getElementsByTagName('path')[0].textContent;
                    //var color = _el.getElementsByTagName('color')[0].textContent;
                    var color = _el.getElementsByTagName('color')[0].childNodes[0].nodeValue;
                    var clipArtElement = new ResizableElement.ClipArt(path,{'parent':this.canvas, 'moveToCoords':elementCoords ,'color': color});
                    //console.info('clipart \'%s\' seemed to load',path);
                    break;
            }
        }   
    },
    SaveCanvasToXML:function()
    {
       var canvasCoords = $('canvas').getCoordinates();
        var xml = "<canvas color=\""+this.canvas.getStyle('background-color')+"\" width=\""+canvasCoords.width+"\" height=\""+canvasCoords.height+"\" top=\""+canvasCoords.top+"\" left=\""+canvasCoords.left+"\" bannerSize=\""+$('bannerSizes').value+"\">\n";
        var lastz = 0;
        var curz = 1000;
        var curind = 0;
        for(i=0; i<canvasElements.length; i++)
        {
            curz = 1000;
            for(x=0; x<canvasElements.length; x++)
            {
                if(canvasElements[x].element.parentNode.getStyle('z-index').toInt() > lastz && canvasElements[x].element.parentNode.getStyle('z-index').toInt() < curz)
                    {
                        curz = canvasElements[x].element.parentNode.getStyle('z-index').toInt();
                        curind = x;
                    }
            }
            var _el = canvasElements[curind];
            xml += "\t<ELEMENT type=\""+_el.options.type+"\">\n";
            xml += "\t\t<options>\n";
            for(opt in _el.options)
            {
                if(typeof _el.options[opt] != 'object')     xml += "\t\t\t<" + opt + ">" + _el.options[opt] + "</" + opt+ ">\n";
            }
            xml += "\t\t</options>\n";
            var contentCoords = _el.element.getCoordinates();
            var wrapperCoords = _el.element.parentNode.getCoordinates();
            var canvasCoords = _el.element.parentNode.parentNode.getCoordinates();
            var pdfTop = contentCoords.top - canvasCoords.top ;
            var pdfLeft =  contentCoords.left - canvasCoords.left ;
            xml += "\t\t<content width=\""+contentCoords.width+"\" height=\""+contentCoords.height+"\" top=\""+contentCoords.top+"\" left=\""+contentCoords.left+"\"></content>\n";
            xml += "\t\t<wrapper width=\""+wrapperCoords.width+"\" height=\""+wrapperCoords.height+"\" top=\""+wrapperCoords.top+"\" left=\""+wrapperCoords.left+"\"></wrapper>\n";
            xml += "\t\t<pdfPosition width=\""+contentCoords.width+"\" height=\""+contentCoords.height+"\" top=\""+ pdfTop +"\" left=\""+ pdfLeft +"\"></pdfPosition>\n";
            xml += "\t</ELEMENT>\n";
	    lastz = curz;
        }   
        xml += "</canvas>";
        //console.info(xml);
        return xml;
    },
    handleCanvasClick:function()
    {
        toggleCanvasSelected(false);
        if(canvasclick)
        {//do canvas stuff
            toggleCanvasSelected(true);
            canvasSelected = true;
        }
        canvasclick = true; /*  this always has to be set back to true  */
    },
    addClipArt:function (name)
    {
        
        var clipArtElement = new ResizableElement.ClipArt(name,{'parent':this.canvas});
        try{ top.TB_remove(); } catch(e) {};
        if($('spinner') && window.ie)
        {    $('spinner').remove();
        }
    },
    showPDF:function()
    {
        var xml = this.SaveCanvasToXML();
        xml = this.URLEncode(xml);
        //console.info(xml);
        window.open('LargerProof.aspx?xml=' + xml,'pdf','width=800,height=600,menubar=yes,status=yes,location=yes,toolbar=yes,scrollbars=yes,resizable=yes');
        
    },
    URLEncode: function  (clearString) 
    {
        var output = '';
        var x = 0;
        clearString = clearString.toString();
        var regex = /(^[a-zA-Z0-9_.]*)/;
        while (x < clearString.length) 
        {
            var match = regex.exec(clearString.substr(x));
            if (match != null && match.length > 1 && match[1] != '') 
            {
	            output += match[1];
                x += match[1].length;
            } 
            else 
            {
                if (clearString[x] == ' ')
                output += '+';
                else 
                {
                    var charCode = clearString.charCodeAt(x);
                    var hexVal = charCode.toString(16);
                    output += '%' + ( hexVal.length < 2 ? '0' : '' ) + hexVal.toUpperCase();
                }
                x++;
            }
        }
        return output;
    },
    redo:function()
    {
        //console.info('redo');
    },
    undo:function()
    {
        //console.info('undo');
    }
    
});


var UndoRedoEvent = new Class({
    options:
    {
        type:null
    },
    initialize: function(options){
        this.setOptions(options);
    }
});