$(function(){

    // to add a color give it a name, hex value, and then a label which will show up underneath the color picker
    	Editor.addColor('background', '#000', 'Background', 'background');
		Editor.addColor('border', '#fff', 'Border', 'border');
		Editor.addColor('dots', '#fff', 'Dots', 'dots');
	    Editor.addColor('names', '#fff', 'Names', 'wording');
		Editor.addColor('ampersand', '#FD0036', '&', 'wording');
	 	 Editor.addColor('text-other', '#fff', 'Other Text', 'wording');
    
    
    // setup paper // 600x429
    Editor.buildPaper('threefivefive', 'vertical');
    
    /**
     * Theme Definition
     */

    // add background for text area
    
	
	 Editor.addShape('Background',{
        'shape':'rectangle',
        'x': 0,
        'y': 0,
		'width': 429,
        'height': 600,
        'color': 'background',
		'label': 'Bottom Left',
		 'behind': 'Border-h',
        'stroke': 0
    });
	
	
		Editor.addShape('Border-h',{
        'shape':'rectangle',
        'x': 0,
        'y': 75.6,
		'width': 532.32,
        'height': 4.8,
        'color': 'border',
		'stroke': 0
    });
	
	Editor.addShape('Border-h2',{
        'shape':'rectangle',
        'x': 0,
        'y': 478,
		'width': 429,
        'height': 3.7,
        'color': 'border',
		'stroke': 0
    });
	
	Editor.addShape('Border-h3',{
        'shape':'rectangle',
        'x': 0,
        'y': 219,
		'width': 158,
        'height': 3.7,
        'color': 'border',
		'stroke': 0
    });

	Editor.addShape('Border-h4',{
        'shape':'rectangle',
        'x': 0,
        'y': 259,
		'width': 158,
        'height': 3.7,
        'color': 'border',
		'stroke': 0
    });
	
	Editor.addShape('Border-v',{
        'shape':'rectangle',
        'x': 155,
        'y': 81,
		'width': 3.7,
        'height': 399,
        'color': 'border',
        'stroke': 0
    });
	
	Editor.addShape('Border-v2',{
        'shape':'rectangle',
        'x': 284,
        'y': 481,
		'width': 3.7,
        'height': 120,
        'color': 'border',
        'stroke': 0
    });
	
	
	


//IMAGES

 Editor.addImage('image4',{
        'src': 'uploads/grey.jpg',
        'x': 286,
        'y': 478,
		'width': 144,   // note this is the min-width of the container, not the image
        'height': 123,   // note this is the min-height of the container, not the image
         'behind': 'Border-h',
		'label': 'Bottom Right',
		rotationSlider: false
    });
 
	 Editor.addImage('image3',{
        'src': 'uploads/grey.jpg',
        'x': 0,
        'y': 80,
		'width': 158,   // note this is the min-width of the container, not the image
        'height':143,   // note this is the min-height of the container, not the image
         'behind': 'Border-h',
		'label': 'Side Top Image',
		rotationSlider: false
    });
	
	 Editor.addImage('image2',{
        'src': 'uploads/grey.jpg',
        'x': 0,
        'y': 262,
		'width': 156,   // note this is the min-width of the container, not the image
        'height':216,   // note this is the min-height of the container, not the image
         'behind': 'Border-h',
		'label': 'Side Left Image',
		rotationSlider: false
    });
	
	  Editor.addImage('image',{
        'src': 'uploads/grey.jpg',
        'x': 158,
        'y': 78,
		'width': 272,   // note this is the min-width of the container, not the image
        'height': 403,   // note this is the min-height of the container, not the image
         'behind': 'Border-h',
		'label': 'Main Image',
		rotationSlider: false
		
    });
	
	
	
//TEXT
	
  
  Editor.addText('Save',{
        'x': 214.5,
        'y': 47,
        'font-color': 'text-other',
        'font-family':'Bickley Script',
        'font-size': '28px',
		'font-weight': 'bold',
        'label': 'Headline',
        'text': 'Please Save the Date for Our Wedding!',
		    });
	
	 
   

    // // add the text for first person's name
   
   Editor.addText('date',{
        'x': 80,
        'y': 240, 
        'font-color': 'text-other',
        'font-family':'Copperplate Gothic',
        'font-size': '20px',
		'font-weight': 'bold',
        'label': 'Date',
		'text': '12.12.14'
    });
	

	
	Editor.addText('ampersand',{
        'x': 142,
        'y': 524, 
        'font-color': 'ampersand',
        'font-family':'Bickley Script',
        'font-size': '60px',
        'label': 'Ampersand',
		'text': '&',
		'draggable': true
    });
	
	   
    Editor.addText('name1',{
        'x': 73,
        'y': 521, 
        'font-color': 'names',
        'font-family':'Bickley Script',
        'font-size': '42px',
		'font-weight': 'bold',
        'label': 'Names',
		'text': 'Latrice',
		'draggable': true
    });
	
	 Editor.addText('name2',{
        'x': 215,
        'y': 521, 
        'font-color': 'names',
        'font-family':'Bickley Script',
        'font-size': '42px',
		'font-weight': 'bold',
        'label': 'Names',
		'text': 'Michael',
		'draggable': true
    });
	
	
    
   

    Editor.addText('location',{
        'x': 147,
        'y': 553, 
        'font-color': 'text-other',
        'font-family':'Copperplate Gothic',
        'font-size': '10px',
		'font-weight': 'bold',
        'label': 'Line 1',
        'text': 'Houston, TX - Invitation to Follow',
		'draggable': true
    });
	
	Editor.addText('web',{
        'x': 147,
        'y': 571, 
        'font-color': 'text-other',
        'font-family':'Copperplate Gothic',
        'font-size': '10px',
		'font-weight': 'bold',
        'label': 'Line 2',
        'text': 'www.brideandgroom.ourwedding.com',
		'draggable': true
    });
	
		
				Editor.addText('addlline',{
        'x': 148,
        'y': 567, 
        'font-color': 'text-other',
        'font-family':'Copperplate Gothic',
        'font-size': '12px',
        'label': 'Extra Line',
        'text': '',
		'draggable': true
    });

	
	

    // // add shape
	
    Editor.addCircles('dottedCircles',{
        'number': 68,   // # of circles
        'x': 0,         // x coord of first circle
        'y': 71,    // y coord of first circle
        'radius': 2,    // size of circle in radius (pixels)
        'spacing': 8,  // # of pixels in between each circle
        'direction': 'horizontal', // options are horizontal or vertical, default to horizontal
        'color': 'dots'
    });
	
	 Editor.addCircles('dottedCircles2',{
        'number': 20,   // # of circles
        'x': 0,         // x coord of first circle
        'y': 226,    // y coord of first circle
        'radius': 2,    // size of circle in radius (pixels)
        'spacing': 8,  // # of pixels in between each circle
        'direction': 'horizontal', // options are horizontal or vertical, default to horizontal
        'color': 'dots'
    });
	
	 Editor.addCircles('dottedCircles3',{
        'number': 20,   // # of circles
        'x': 0,         // x coord of first circle
        'y': 254,    // y coord of first circle
        'radius': 2,    // size of circle in radius (pixels)
        'spacing': 8,  // # of pixels in between each circle
        'direction': 'horizontal', // options are horizontal or vertical, default to horizontal
        'color': 'dots'
    });
	
	 Editor.addCircles('dottedCircles4',{
        'number': 36,   // # of circles
        'x': 0,         // x coord of first circle
        'y': 487,    // y coord of first circle
        'radius': 2,    // size of circle in radius (pixels)
        'spacing': 8,  // # of pixels in between each circle
        'direction': 'horizontal', // options are horizontal or vertical, default to horizontal
        'color': 'dots'
    });
 
});// end of document ready