<|start_filename|>editor/scripts/model/shape.js<|end_filename|>
﻿var BaseShape = BaseElement.extend({
    init: function (config, layer) {
        this._super(config, layer);
        this.properties = this.properties || [];

        this.width = this.width || 100;
        this.height = this.height || 100;
        this.scale = this.scale || 1;
        this.deg = this.deg || 0;

        if (!this.x) {
            var canvasWidth = this.layer.getCanvas().getWidth();
            this.x = this.cornerOffset ? this.getStageWidth() / 2 - (this.width * this.scale) / 2 : this.getStageWidth() / 2;
        }
        if (!this.y) {
            var canvasHeight = this.layer.getCanvas().getHeight();
            this.y = this.cornerOffset ? this.getStageHeight() / 2 - (this.height * this.scale) / 2 : this.getStageHeight() / 2;
        }      

        this.group = new Kinetic.Group({
            x: this.x,
            y: this.y,
            width: this.width,
            height: this.height,
            draggable: true,
            dragOnTop: false,
            scale: {
                x: this.scale,
                y: this.scale
            },
            rotationDeg: this.deg
        });


        if (this.cornerOffset === undefined)
            this.group.setOffset(this.width / 2, this.height / 2);

        // changed from click to mousedown because in 4.3.1 after 
        // the drag background was selected for some reason
        this.group.on('mousedown tap dragstart', function (evt) {
            if (this.ready) {
                //this.selectThis();
                //this.onSelect(this);
                //this.fire('select', this);
                this.select();
            }
        }.bind(this));

        this.group.on("dragmove", function (evt) {
            var pos = this.group.getPosition();
            this.setPosition(pos.x, pos.y);
            this.updateAnchorPosition();
        }.bind(this));

        this.layer.add(this.group);

        if (!this.zindex) { this.group.moveToTop(); }
    },
    getStageWidth: function () {
        return this.layer.getStage().getWidth() / this.layer.getStage().getScale().x;
    },
    getStageHeight: function () {
        return this.layer.getStage().getHeight() / this.layer.getStage().getScale().y;
    },
    dispose: function () {
        this.group.remove();
        this.anchor.remove();
        this.drawStage();
    },
    moveToTop: function () {
        this.group.moveToTop();
        this.anchor.moveToTop();        
    },
    moveToBottom: function () {
        this.anchor.moveToBottom();
        this.group.moveToBottom();        
    },
    setPosition: function (x, y) {
        this.x = x;
        this.y = y;
    },
    select: function () {
        this.selected = true;

        if (!this.boundingBox) {
            this.boundingBox = new Kinetic.Rect({
                width: this.width,
                height: this.height,
                stroke: '#00A8FF',
                strokeWidth: 1.5 / this.scale
            });

            this.group.add(this.boundingBox);
            this.addAnchor();
        }

        this.boundingBox.show();
        this.anchor.show();

        this._super();
    },
    deselect: function () {
        this.selected = false;

        if (this.boundingBox) {
            this.boundingBox.hide();
            this.anchor.hide();
        }
    },
    updateAnchorPosition: function () {
        var pos = this.group.getPosition();
        var len = 0;
        if (this.cornerOffset) {
            len = this._distance({ x: 0, y: 0 }, { x: (this.width * this.scale), y: 0 });
            this.startAngle = this._angle({ x: pos.x, y: pos.y }, { x: pos.x + this.width, y: pos.y });
        } else {
            this.startAngle = this._angle({ x: pos.x, y: pos.y }, { x: pos.x + this.width / 2, y: pos.y - this.height / 2 });
            len = this._distance({ x: 0, y: 0 }, { x: (this.width * this.scale) / 2, y: -1 * (this.height * this.scale) / 2 });
        }

        var newPoint = this._getPointAt(this.group.getPosition(), len, this.group.getRotationDeg() + this.startAngle);

        this.anchor.setPosition(newPoint.x, newPoint.y);
    },
    update: function () {
        var pos = this.group.getPosition();
        var apos = this.anchor.getPosition();
        var aofs = this.anchor.getOffset();

        // anchor absolute position
        var abs = { x: apos.x - aofs.x, y: apos.y - aofs.y };
        var angle = this._angle(pos, abs);
        this.deg = angle - this.startAngle - this.anchor.getRotationDeg();
        this.group.setRotationDeg(this.deg);

        var origLen = 0;
        if (this.cornerOffset)
            origLen = this._distance(pos, { x: pos.x + (this.width * this.scale), y: pos.y });
        else
            origLen = this._distance(pos, { x: pos.x + (this.width * this.scale) / 2, y: pos.y - (this.height * this.scale) / 2 });

        var newLen = this._distance(pos, abs);

        this.scale = (this.scale * newLen) / origLen;
        this.group.setScale(this.scale, this.scale);

        this.boundingBox.setStrokeWidth(1.5 / this.scale);
    },
    _angle: function (center, p1) {
        var p0 = {
            x: center.x, y: center.y - Math.sqrt(Math.abs(p1.x - center.x) * Math.abs(p1.x - center.x)
                    + Math.abs(p1.y - center.y) * Math.abs(p1.y - center.y))
        };
        return (2 * Math.atan2(p1.y - p0.y, p1.x - p0.x)) * 180 / Math.PI;
    },
    _getPointAt: function (center, radius, angle) {
        angle *= Math.PI / 180;
        return {
            x: center.x + Math.sin(Math.PI - angle) * radius,
            y: center.y + Math.cos(Math.PI - angle) * radius
        };
    },
    _distance: function (point1, point2) {
        var xs = point2.x - point1.x;
        xs = xs * xs;

        var ys = point2.y - point1.y;
        ys = ys * ys;

        return Math.sqrt(xs + ys);
    },
    addAnchor: function () {
        this.anchor = new Kinetic.Circle({
            stroke: "#666",
            fill: "#ddd",
            strokeWidth: 2,
            radius: environment.hasTouch ? 24 : 16,
            dragOnTop: false,
            draggable: true
        });

        this.anchor.on("dragmove", function () {
            this.update(this);
        }.bind(this));
        this.anchor.on("mousedown touchstart", function () {
            //this.group.setDraggable(false);
            //this.moveToTop();
        }.bind(this));
        this.anchor.on("dragend", function (e) {
            //this.group.setDraggable(true);
        }.bind(this));
        this.anchor.on("mouseover", function () {
            document.body.style.cursor = "pointer";
            this.anchor.setStrokeWidth(4);
            this.drawStage();
        }.bind(this));
        this.anchor.on("mouseout", function () {
            document.body.style.cursor = "default";
            this.anchor.setStrokeWidth(2);
            this.drawStage();
        }.bind(this));

        this.updateAnchorPosition();

        this.layer.add(this.anchor);
    },
    setSize: function (width, height) {
        this.width = width;
        this.height = height;
        this.group.setSize(width, height);

        if (this.cornerOffset === undefined)
            this.group.setOffset(this.width / 2, this.height / 2);

        if (this.boundingBox) {
            this.boundingBox.setSize(width, height);
            this.updateAnchorPosition();
        }
    },
    setHeight: function (height) {
        this.height = height;
        this.group.setHeight(height);

        if (this.cornerOffset === undefined)
            this.group.setOffset(this.width / 2, this.height / 2);

        if (this.boundingBox) {
            this.boundingBox.setHeight(height);
            this.updateAnchorPosition();
        }
    },
    setScale: function (scale) {
        this.scale = scale;
        this.group.setScale(scale);
    },
    applyFilter: function (image, config, callback) {

        //if (config.name === 'None')
        //    this.filterConfig = null;
        //else
        //    this.filterConfig = config;

        ////var filter = Kinetic.Filters[config.title];
        //var filter = eval(config.name);
        //if (!filter) {
        //    callback(image);
        //    return;
        //}

        if (config.name === 'none' || environment.filtersDisabled) {
            this.filterConfig = null;
            callback(image);
            return;
        }

        this.filterConfig = config;

        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;

        var scope = this;
        this.fire('download-start', this);
        Caman(canvas, image.src, function () {
            this[config.name]();
            this.render(function (a) {
                var dataUrl = canvas.toDataURL('image/jpeg', 0.84);
                var imageObj = new Image();
                imageObj.onload = function () {
                    canvas = null;
                    callback(imageObj);
                    scope.fire('download-complete', this);
                };
                imageObj.src = dataUrl;
            });
        });

        //var context = canvas.getContext('2d');
        //context.drawImage(image, 0, 0);
        //var imageData = context.getImageData(0, 0, image.width, image.height);
        ////filter(imageData, config);

        //var f = new filter();
        //f.filter(imageData, config);


        //context.putImageData(imageData, 0, 0);
        //var dataUrl = canvas.toDataURL();
        //var imageObj = new Image();
        //imageObj.onload = function () {
        //    callback(imageObj);
        //}
        //imageObj.src = dataUrl;
    },
    setShadowColor: function (color) {
        this._getShadowedShape().setShadowColor(color);
    },
    getShadowColor: function () {
        return this._getShadowedShape().getShadowColor();
    },
    setShadowBlur: function (value) {
        console.log(value);
        this._getShadowedShape().setShadowBlur(value);
    },
    getShadowBlur: function () {
        return this._getShadowedShape().getShadowBlur();
    },
    setShadowOffset: function (offset) {
        this._getShadowedShape().setShadowOffset(offset);
    },
    getShadowOffset: function () {
        return this._getShadowedShape().getShadowOffset();
    },
    setShadowOpacity: function (value) {
        this._getShadowedShape().setShadowOpacity(value);
    },
    getShadowOpacity: function () {
        return this._getShadowedShape().getShadowOpacity();
    },

    getShadowConfig: function () {        
        return this._getShadowedShape().hasShadow() ? this._getPropertyConfig(['ShadowColor', 'ShadowOffset', 'ShadowBlur', 'ShadowOpacity']) : [];
    },
    getConfig: function () {
        return jQuery.extend(true, { x: Math.round(this.x), y: Math.round(this.y), width: this.width, height: this.height, scale: this.scale, deg: this.deg, zindex: this.group.getZIndex() }, this._super());
    }
});

<|start_filename|>editor/style/editor.css<|end_filename|>
﻿.content { padding-top: 15px; }
    .content h2 { display: none; }

.editor { -ms-touch-action: none; padding: 50px 0 180px 0; position: relative; background: #606060 url(img/transparent_dark.png); border: solid 1px #ccc; box-shadow: rgba(0,0,0,0.2) 0 0 6px; }
.editor-not-supported { display: none; }
.slow-device { display: none; }
    .slow-device .buttons { padding: 50px 0; text-align: center; }
    .slow-device .button { width: 130px; margin: 0 5px; }
    .slow-device .note { padding-top: 50px; color: #999; font-size: 0.9em; }

.editor-navbar { position: absolute; height: 30px; background-color: #f5f5f5; background-image: linear-gradient(to bottom, #f8f8f8, #e3e3e3 ); top: 0; width: 100%;  border-bottom: solid 1px #AAAAAB; }
    .editor-navbar li { float: left; width: 100px; text-align: center; }
    .editor-navbar li.last { float: right; }
        .editor-navbar li span { color: #666; display: block; padding: 5px 0 5px 0; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
        .editor-navbar li:hover span { color: #000; }

#editor-canvas-container { background: #fff; }

#editor-canvas-container { z-index: 1; }
    #editor-canvas-container .kineticjs-content { display: block !important;  }

.editor-body { position: relative; width: 600px; margin: 0 auto; overflow: hidden; }

/* ----- Editor Popup Windows ----- */
.editor-win { width: 100%; position: absolute; z-index: 20; background: #f3f3f3; left: 0; top: 0; display: none; }
.editor-win-active { animation:slide-top 0.6s; -webkit-animation:slide-top 0.6s; display: block; }
.editor-win-head { padding: 5px 50px 5px 10px; }
    .editor-win-head h3 { font-size: 1.6em; font-weight: bold; line-height: 30px; margin: 0; color: #333; }
    .editor-win-head a { position: absolute; display: block; right: 10px; top: 05px; width: 32px; height: 32px; background: url(img/button_sprite.png) no-repeat -64px 0px; cursor: pointer; }
        .editor-win-head a:hover { background-position: -64px -32px; }
        .editor-win-head a span { display: none; }
        .editor-win-head input { width: 100%; }

.editor-win .thumbnail, .editor-win .thumb-user { width: 100px; height: 75px; float: left; margin: 10px 5px 10px 5px; border: 1px solid #ddd; border-radius: 4px; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; cursor: pointer; }
    .editor-win .thumbnail:hover, .editor-win .thumb-user:hover { border-color: #0088cc; }
.editor-win .thumbnail img { border-radius: 4px; }

.editor-win-contents { border-top: solid 1px #afafaf; background: #fff; clear: both; overflow: auto; }
.editor-win-single .editor-win-contents { padding: 10px; overflow: auto; }
.editor-win-content { display: none; padding: 10px; }
    .editor-win-content.active { display: block; }

.editor-win-contents .load-more {
    clear:both;
    border:solid 1px #aaa;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    color: #999;
    margin:5px;
    padding: 5px;
}

.editor-win-nav { clear: both; padding: 0 5px; }
    .editor-win-nav li { float: left; width: 16.5%; padding-right: 2px; text-align: center; }
    .editor-win-nav li a { display: block; border: solid 1px #afafaf; border-bottom: none; background: #f3f3f3; border-radius: 5px 5px 0 0; font-weight: bold; color: #aaa; padding: 5px 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
        .editor-win-nav li.active a { background: #fff; margin-bottom: -1px; color: #696969; padding-bottom: 6px; }
            .editor-win-nav li a:hover { text-decoration: none; }

.editor-win-toolbar {
    background-color: #f3f3f3;
    border-top: solid 1px #dfdfdf;
    padding: 5px;
    background-image: linear-gradient(to bottom, #f9f9f9, #dfdfdf);
}
.editor-win-toolbar span {
    display: inline-block;
    padding: 3px 0 4px 0;
    font-size: 0.8em;
    margin: 0 5px;
    width: 100px;
    cursor: pointer;
}

.editor-win-nav .toolbar-sub span {
    width: auto;
    font-size: 1.1em;
    border-bottom: dashed 1px #aaa;
}
.editor-win-nav .toolbar-sub span:hover {
    border-bottom-style: solid;
}

.editor-win-footer.visible {
    padding: 10px;
    text-align: center;
}
.editor-win-footer button {
    width: 160px;
}

.editor-win-crop .jcrop-holder {
     margin: 0 auto; vertical-align: middle;
}
.editor-win-crop .editor-win-contents {
    padding: 10px;
}

.card-save-form { display: none; padding: 15px 10px; }
    .card-save-form .form {
        margin-bottom: 1em;
    }
    .card-save-form .status-error { margin-top:15px; display: block; }
    .card-save-form #socialLoginList {
        margin-bottom: 1em;
    }
    .card-save-form-download p {
        margin-bottom: 0.5em;
    }
.card-save-form-login {
    padding: 5px;
    background-color: #F0FFF0;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.editor-win-text textarea { display: block; height: 100px; }
.editor-win-text .thumbnail { width: auto !important; height: auto !important; float: none; display: block; padding: 5px; background: #fcfcfc; }
.editor-win-text .editor-win-footer {
    border-top: solid 1px #afafaf;
}
.editor-win-text .editor-win-footer label {
    margin-top: 0;
}

.custom-photo-list .thumb-user { position: relative; }
    .custom-photo-list .thumb-user .remove { position: absolute; top: 0; right: 0; width: 20px; height: 20px; background-color: #c00; color: #fff; line-height: 20px; text-align: center; font-weight: bold; opacity: 0.7; border-radius: 0 0 0 5px; }

.file-drop-zone { border: dashed 3px #aaa; padding: 10px; text-align: center; font-size: 1.4em; margin: 10px; background: #fff; }
    .file-drop-zone.drag-over { border-color: #666; color: #666; }

/* ----- Editor Tools ----- */
.editor-tools { position: absolute; bottom: 0; width: 100%; }

.editor-toolbar { background-color: #f1f1f1; background-image: linear-gradient(to bottom, #f3f3f3, #dfdfdf); box-shadow: 0 1px 0 #CCCEDB inset; height: 65px; position: relative; overflow: hidden; }
.editor-toolbar ul { position: absolute; }

.editor-toolbar li {
    text-align: center;
    line-height: 18px;
    padding-bottom: 5px;
    color: #666;
    width: 72px;
    float: left;
    transition: all 0.2s ease-in-out;
    display: none;
    vertical-align: middle;
    cursor: pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.editor-toolbar:before { content: " "; position: absolute; left: 0; height: 100%; width: 15px; z-index: 11; background: linear-gradient(to right, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); }
.editor-toolbar:after { content: " "; position: absolute; right: 0; height: 100%; width: 15px; background: linear-gradient(to left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%); }

    
    .editor-toolbar li:hover { background-color: rgba(0, 0, 0, 0.06); }
    .editor-toolbar li.active, .editor-toolbar li.active:hover { background: #DFDFDF; border-left: solid 1px #CCCEDB; border-right: solid 1px #CCCEDB; }
.editor-toolbar li.disabled { color: #aaa; }
    .editor-toolbar li.disabled:hover { background-color: transparent; cursor: default; }
    .editor-toolbar li.disabled i { opacity: 0.5; }

.ecc-editor-icon { display: block; width: 32px; height: 32px;  margin: 5px auto; background: url(img/toolbar.png) no-repeat center top; }
.ecc-editor-icon-trash { background-position: left top; }
.ecc-editor-icon-front { background-position: -32px top; }
.ecc-editor-icon-shadow { background-position: -64px top; }
.ecc-editor-icon-filter { background-position: -96px top; }
.ecc-editor-icon-border { background-position: -128px top; }
.ecc-editor-icon-frame { background-position: -160px top; }
.ecc-editor-icon-crop { background-position: -192px top; }
.ecc-editor-icon-color { background-position: -224px top; }
.ecc-editor-icon-text-style { background-position: -256px top; }
.ecc-editor-icon-text-stroke { background-position: -288px top; }
.ecc-editor-icon-font { background-position: -320px top; }
.ecc-editor-icon-text { background-position: -352px top; }
.ecc-editor-icon-swap { background-position: -384px top; }
.ecc-editor-icon-contrast { background-position: -416px top; }
.ecc-editor-icon-brightness { background-position: -448px top; }
.ecc-editor-icon-opacity { background-position: -480px top; }
.ecc-editor-icon-upload { background-position: -512px top; }
.ecc-editor-icon-flip { background-position: -544px top; }
.ecc-editor-icon-back { background-position: -576px top; }

/* ----- Editor Property Pan ----- */
.editor-pan { position: absolute; left: 0; bottom: 65px; width: 100%; display: none; }
.editor-pan-body { height: 120px; background-color: #DFDFDF; border-top: solid 1px #CCCEDB; }
.editor-pan-content { -webkit-user-select: none; -moz-user-select: none; overflow: hidden; height: 100%; position: relative; padding: 0 15px; }
    .editor-pan-content.active { display: block !important; }
    .editor-pan-content ul { position: absolute; height: 100%; width: 5000px; z-index: 10; }

.editor-pan-content:before { content: " "; position: absolute; left: 0; width: 15px; height: 100%; z-index: 11; background-image: linear-gradient(to right, #dfdfdf, rgba(223, 223, 223, 0));  }
.editor-pan-content:after { content: " "; position: absolute; right: 0; width: 30px; height: 100%; z-index: 11; background-image: linear-gradient(to left, #dfdfdf, rgba(223, 223, 223, 0)); }

.editor-pan-edit-text .editor-pan-content { -webkit-user-select: auto; -moz-user-select: auto; padding: 5px; }
.editor-pan-edit-text textarea { width: 100%; height: 100%; }

.editor-pan-nav { position: absolute; bottom: 120px; width: 100%; padding: 0 5px; }
    .editor-pan-nav a.cancel { float: right; margin-right: 15px; }
    .editor-pan-nav ul { }
    .editor-pan-nav li { float:left; width: 25%; padding: 0 1px; }
.editor-pan-nav li a {
    display: block;  
    border-radius: 5px 5px 0 0;
    text-align: center;
    font-weight: bold; 
    color: #aaa; 
    padding: 5px 0;
    line-height: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: #f1f1f1;
    border: solid 1px #CCCEDB;
    border-bottom: none;
    margin-bottom: 1px;
}
    .editor-pan-nav li.active a { background: #DFDFDF; margin-bottom: 0px; line-height: 17px; color: #4f4f4f; }
        .editor-pan-nav li a:hover { text-decoration: none; }

.user-photo-selector { padding: 10px; }

.property-item { float: left; width: 85px; padding: 5px 5px 5px 0; }
    .property-item .thumb { height: 80px; border-radius: 4px; background-color: #fff; background-repeat: no-repeat; cursor: pointer; }
    .property-item-image { width: 105px; }
        .property-item-image img { width: 100%; height: 100%; border-radius: 4px; }
.property-item .label { margin-top: 5px; padding: 0 4px; background: #000; color: #fff; font-size: 0.8em; border-radius: 10px; text-align: center;text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.property-item.selected .label { background-color: #39f; }
.color-item-selector { background: transparent; }
.color-transparent .thumb { background: url(img/transparent.png); border: solid 1px #ccc; }
.color-transparent .thumb, .sp-replacer, .sp-preview { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
.sp-replacer { height: 80px; }
.sp-preview { height: 100%; width: 55px; }

.editor-pan a.prev, .editor-pan a.next, .editor-pan a.cancel { background: url(img/carousel_sprite.png); width: 50px; height: 50px; display: block; }
    .editor-pan a.prev span, .editor-pan a.next span, .editor-pan a.cancel span { display: none; }
.editor-pan a.prev { left: -25px; top: 35px; }
    .editor-pan a.prev:hover { background-position: 0 -50px; }
    .editor-pan a.prev.disabled { background-position: 0 -100px; }
.editor-pan a.next { right: -25px; top: 35px; background-position: -50px 0; }
    .editor-pan a.next:hover { background-position: -50px -50px; }
    .editor-pan a.next.disabled { background-position: -50px -100px; }
.editor-pan a.cancel { width: 40px; height: 38px; border: solid 1px #afafaf; border-top: none; background-position: -102px -55px; background-color: #e6e6e6; border-radius: 0 0 25px 25px; }
    .editor-pan a.cancel:hover { background-position: -102px -5px; }

.editor-pan-slider p { margin: 0; padding: 5px; }
.editor-pan-slider input { width: 45px; margin: 5px auto 0 auto; display: block; text-align: center; }
.editor-pan-slider-double p { padding-bottom: 0; }
.editor-pan-slider span { display: inline-block; width: 10%; color: #666; vertical-align: baseline; font-size: 1.1em; text-align: center; }
.editor-pan-slider .range-slider { display: inline-block; width: 80%; height: 16px; margin-top: 15px;}
    .editor-pan-slider .range-slider div { width: 24px; height: 24px; cursor: pointer; }

.editor-pan-content-filter .thumb { background-image: url(img/filters.jpg); }
.editor-pan-content-fontfamily .thumb { background-image: url(img/fonts.png); } 
.editor-pan-content-textalign .thumb { background-image: url(img/align.png); } 
.editor-pan-content-frame .thumb { background-image: url(img/frames.jpg); } 

.thumb-filter-none { background-position: 0% top; }
.thumb-filter-vintage { background-position: 5% top; }
.thumb-filter-lomo { background-position: 10% top; }
.thumb-filter-clarity { background-position: 15% top; }
.thumb-filter-sin-city { background-position: 20% top; }
.thumb-filter-sunrise { background-position: 25% top; }
.thumb-filter-cross-process { background-position: 30% top; }
.thumb-filter-orange-peel { background-position: 35% top; }
.thumb-filter-love { background-position: 40% top; }
.thumb-filter-grungy { background-position: 45% top; }
.thumb-filter-jarques { background-position: 50% top; }
.thumb-filter-pinhole { background-position: 55% top; }
.thumb-filter-old-boot { background-position: 60% top; }
.thumb-filter-glowing-sun { background-position: 65% top; }
.thumb-filter-hazy-days { background-position: 70% top; }
.thumb-filter-her-majesty { background-position: 75% top; }
.thumb-filter-nostalgia { background-position: 80% top; }
.thumb-filter-hemingway { background-position: 85% top; }
.thumb-filter-concentrate { background-position: 90% top; }

.thumb-fontfamily-open-sans { background-position: 0% 0%; }
.thumb-fontfamily-oswald { background-position: 2% top; }
.thumb-fontfamily-droid-serif { background-position: 4% top; }
.thumb-fontfamily-ubuntu { background-position: 6% top; }
.thumb-fontfamily-roboto-condensed { background-position: 8% top; }
.thumb-fontfamily-lobster { background-position: 10% top; }
.thumb-fontfamily-nunito { background-position: 12% top; }
.thumb-fontfamily-rokkitt { background-position: 14% top; }
.thumb-fontfamily-raleway { background-position: 16% top; }
.thumb-fontfamily-unkempt { background-position: 18% top; }
.thumb-fontfamily-cuprum { background-position: 20% top; }
.thumb-fontfamily-cabin { background-position: 22% top; }
.thumb-fontfamily-special-elite { background-position: 24% top; }
.thumb-fontfamily-abel { background-position: 26% top; }
.thumb-fontfamily-anton { background-position: 28% top; }
.thumb-fontfamily-changa-one { background-position: 30% top; }
.thumb-fontfamily-the-girl-next-door { background-position: 32% top; }
.thumb-fontfamily-crafty-girls { background-position: 34% top; }
.thumb-fontfamily-chewy { background-position: 36% 0%; }
.thumb-fontfamily-pacifico { background-position: 38% 0%; }
.thumb-fontfamily-dancing-script { background-position: 40% 0%; }
.thumb-fontfamily-shadows-into-light { background-position: 42% 0%; }
.thumb-fontfamily-calligraffitti { background-position: 44% 0%; }
.thumb-fontfamily-righteous { background-position: 46% 0%; }
.thumb-fontfamily-black-ops-one { background-position: 48% 0%; }
.thumb-fontfamily-rock-salt { background-position: 50% 0%; }
.thumb-fontfamily-tangerine { background-position: 52% 0%; }
.thumb-fontfamily-fredoka-one { background-position: 54% 0%; }
.thumb-fontfamily-abril-fatface { background-position: 56% 0%; }
.thumb-fontfamily-orbitron { background-position: 58% 0%; }

.thumb-textalign-left { background-position: 0% 0%; }
.thumb-textalign-center { background-position: 25% 0%; }
.thumb-textalign-right { background-position: 50% 0%; }

.thumb-frame-nothing { background-position: 0% 0%; }
.thumb-frame-border-narrow { background-position: 10% 0%; }
.thumb-frame-border-medium { background-position: 20% 0%; }
.thumb-frame-border-thick { background-position: 30% 0%; }
.thumb-frame-shadow-frame { background-position: 40% 0%; }
.thumb-frame-shadow-frame-round { background-position: 50% 0%; }
.thumb-frame-shadow-frame-thick { background-position: 60% 0%; }
.thumb-frame-shadow-frame-thick-round { background-position: 70% 0%; }
.thumb-frame-grunge { background-position: 80% 0%; }
.thumb-frame-letter-banner { background-position: 90% 0%; }
.thumb-frame-photo-border { background-position: 100% 0%; }


/* ----- Helper styles ----- */
.editor-progress {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 20px;
    background: rgba(0, 0, 0, 0.4) url(img/loader.gif) no-repeat 10px center;
    padding: 5px 5px 3px 35px;
    font-weight: bold;
    color: #fff;
    border-radius: 8px 0 0 0;
    font-size: 12px;
    display: none;
}

/* ----- Styled iScroll scrollbars ----- */
.iScrollHorizontalScrollbar {
	position: absolute;
	z-index: 9999;
	height: 5px;
	left: 2px;
	right: 2px;
	bottom: 2px;
}

.iScrollIndicator {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}

.iScrollHorizontalScrollbar .iScrollIndicator {
	height: 100%;
}

/* ------ Responsive ----- */
@media all and (max-width: 600px) {
    .editor { border: none; box-shadow: none; }
    .editor-body { width: auto; }
    .editor-toolbar { padding: 0; border-radius: 0; border-left: none; border-right: none; }
    .editor-tools { border-radius: 0; }
    .property-item { width: 65px; }
        .property-item .thumb { height: 60px; background-size: auto 60px; }
        .property-item .label { line-height: 16px; font-size: 0.7em; }
    .sp-replacer { height: 60px; }
    .sp-preview { width: 35px; }
    .editor-pan-body { height: 95px; }
    .editor-pan-nav { bottom: 95px; }
    .editor-pan-slider .range-slider { margin-top: 5px; }
    .editor-pan-slider input { font-size: 1em; padding: 2px 4px; }
}

@media all and (max-width:600px) and (orientation: portrait) {
    aside, footer { display: none; }
    html, body, .container, .main, .content, .editor { height: 100%; }
    .content { padding: 0; }
}

@media all and (max-width: 450px ) {
    .editor-win-nav li, .editor-toolbar li , .editor-pan-nav li { font-size: 0.8em; }
        .editor-pan-nav li a { font-weight: normal; }


    .editor-toolbar li { width: 55px; }

    .editor-pan { z-index: 12; }

    .editor-win .thumbnail, .editor-win .thumb-user { width: 80px; height: 60px; }
        .editor-win .thumbnail img, .editor-win .thumb-user img { width: 80px; }

    .editor-pan-slider p { padding-bottom: 5px; font-size: 0.8em; }
    .editor-pan-slider span { font-size: 0.9em; }
    .editor-pan-slider input { margin-top: 2px; background-color: #e6e6e6; }
}

<|start_filename|>editor/scripts/model/clipart.js<|end_filename|>
﻿var Clipart = BaseShape.extend({
    init: function (config) {
        this._super(config);
    },
    draw: function () {
        this.loadImages([this.src], function (images) {
            this.imgObj = images[this.src];

            this.img = new Kinetic.Image({
                image: this.imgObj
                //scaleX: -1,
                //x: this.width
                //scaleY: -1,
                //y: this.height
            });
            
            //this.img.createImageHitRegion();

            this.applyProperties(function () {
                this.group.add(this.img);
                this.redraw();

                this.ready = true;
                this.fire('ready', this);
            });
        }.bind(this));
    },
    redraw: function () {
        this.drawStage();
    },
    setFillColor: function (color) {
        this.img.clearFilter();
        if (color == 'transparent') {
            this.fillColor = null;
        } else {
            this.fillColor = color;
            this.img.setFilterColorFill(color);
            this.img.setFilter(Kinetic.Filters.ColorFill);            
        }
    },
    getFillColor: function () {
        return this.fillColor;
    },
    setFilter: function (config, callback) {
        this.img.setImage(this.imgObj);
        this.applyFilter(this.imgObj, config, function (filteredImage) {
            this.img.setImage(filteredImage);
            callback(this);
        }.bind(this));
    },
    getFilter: function () {
        return this.filterConfig;
    },
    setOpacity: function(opacity) {
        this.img.setOpacity(opacity);
        this.redraw();
    },
    getOpacity: function() {
        return this.img.getOpacity();
    },
    setFlipHorizontal: function () {
        if (this.flipHorizontal) {
            this.flipHorizontal = null;
            this.img.setScaleX(1);
            this.img.setX(0);
        } else {
            this.flipHorizontal = true;
            this.img.setScaleX(-1);
            this.img.setX(this.width);
        }
    },
    getFlipHorizontal: function () {
        return this.flipHorizontal;
    },
    getProperties: function () {
        var cfg = this.getShadowConfig();
        if (this.filterConfig) {
            cfg = cfg.concat(this._getPropertyConfig('Filter'));
        }
        if (this.fillColor) {
            cfg = cfg.concat(this._getPropertyConfig('FillColor'));
        }
        if (this.flipHorizontal) {
            cfg = cfg.concat(this._getPropertyConfig('FlipHorizontal'));
        }
        return cfg;
    },
    getConfig: function () {
        return jQuery.extend({ src: this.src }, this._super());
    },
    _getShadowedShape: function () {
        return this.img;
    }
});

<|start_filename|>editor/scripts/editor/win.js<|end_filename|>
var WinManager = BaseObject.extend({
	init: function(config) {
	    this._super(config);

	    var that = this;

	    $(document).on('click', '.editor-win .editor-cancel', function () { that.close() });

	    $(document).on('click', '.editor-win .thumbnail', function () {
	        that.close();
	        var item = that.card.drawItemById($(this).attr('data-ecc-id'));
	        item.select();
	        return false;
	    });

	    $(document).on('click', '.editor-win-nav a', function () {
	        var win = $(this).parents('.editor-win');
	        win.find('.editor-win-content').removeClass('active').filter($(this).attr('href')).addClass('active');
	        win.find('.editor-win-nav li').removeClass('active')
	        $(this).parents('li').addClass('active');
	        that._lazyLoad();
	        return false;
	    });

	},
	_lazyLoad: function () {
	    $("img.lazy").lazyload({
	        container: $('.editor-win-contents')
	    });
	},
	_create: function (id, title) {
	    var win = $('<div class="editor-win ' + id + '"></div>').appendTo(this.container);
	    win.append('<div class="editor-win-head"><h3>' + title + '</h3><a class="editor-cancel"><span>Close</span></a></div>');
	    win.append('<div class="editor-win-body"><ul class="editor-win-nav border-box clearfix"></ul><div class="editor-win-contents border-box"></div><div class="editor-win-footer"></div></div>');
	    return win;
	},
	_show: function (win) {
	    win.css('z-index', 22).addClass('editor-win-active');
	    win.find('.editor-win-contents').outerHeight($(this.container).innerHeight() - win.find('.editor-win-head').outerHeight() - win.find('.editor-win-nav').outerHeight() - win.find('.editor-win-footer').outerHeight() - 2);
	},
	close: function () {
	    $('.editor-win').removeClass('editor-win-active');
	},
	cropPhoto: function (src) {
	    var id = 'editor-win-crop';
	    var win = $('.' + id);
	    //var crop = null;
	    //var scale = null;
	    var that = this;
	    this.jcrop = {};
        

	    var displayImage = function (imgSrc) {
	        if (that.jcrop.api) { that.jcrop.api.destroy(); }
	        var contents = win.find('.editor-win-contents');
	        contents.html('');
	        var img = $('<img alt="" />').appendTo(contents).get(0);

	        img.onload = function () {	            
                var cw = contents.width()
                , ch = contents.height()
                , size = getImageSize(getImage());

	            var scale = cw / size.width;

	            if (scale * size.height > ch)
	                scale = ch / size.height;

	            that.jcrop.scale = scale;

	            var nw = Math.floor(scale * size.width);
	            var nh = Math.floor(scale * size.height);

	            img.style.width = nw + 'px';
	            img.style.height = nh + 'px';
	            
	            $(img).Jcrop({
	                setSelect: [0, 0, nw, nh],
	                aspectRatio: 4 / 3,
	                onSelect: function (c) {	                    
	                    that.jcrop.crop = c;
	                }
	            }, function () {
	                that.jcrop.api = this;
	            });
	        };
	        img.src = imgSrc;
	    };

	    var getImage = function () {
	        return $('.' + id + ' img').get(0);
	    };

	    if (win.length == 0) {
	        win = this._create(id, 'Crop your image');
	        var nav = win.find('.editor-win-nav');
	        nav.addClass('editor-win-toolbar');

	        $('<span class="editor-win-crop-tool"><i class="ecc-icon ecc-icon-rotate-right"></i> Rotate right 90&deg;</span>').appendTo(nav).click(function () {
	            displayImage(rotateImage(getImage(), 90));
	        });

	        $('<span class="editor-win-crop-tool"><i class="ecc-icon ecc-icon-rotate-left"></i> Rotate left 90&deg;</span>').appendTo(nav).click(function () {
	            displayImage(rotateImage(getImage(), -90));
	        });

	        $('<span class="editor-win-crop-tool"><i class="ecc-icon ecc-icon-rotate-180"></i> Rotate 180&deg;</span>').appendTo(nav).click(function () {
	            displayImage(rotateImage(getImage(), 180));
	        });

	        $('<span class="editor-win-crop-tool"><i class="ecc-icon ecc-icon-flip-vertical"></i> Flip vertical</span>').appendTo(nav).click(function () {
	            displayImage(flipVertical(getImage()));
	        });

	        $('<span class="editor-win-crop-tool"><i class="ecc-icon ecc-icon-flip-horizontal"></i> Flip horizontal</span>').appendTo(nav).click(function () {
	            displayImage(flipHorizontal(getImage()));
	        });

	        var footer = win.find('.editor-win-footer').addClass('visible');
	        $('<button class="button">Done</button>').appendTo(footer).click(function () {
	            var canvas = document.createElement('canvas');
	            canvas.width = 800;
	            canvas.height = 600;
	            var scale = that.jcrop.scale;
	            var crop = that.jcrop.crop;
	            var context = canvas.getContext('2d');
	            context.drawImage(getImage(), Math.floor(crop.x / scale), Math.floor(crop.y / scale), Math.floor(crop.w / scale), Math.floor(crop.h / scale), 0, 0, 800, 600);
	            var dataUrl = canvas.toDataURL('image/jpeg', 0.84);
	            this.card.getSelected().setPhoto(dataUrl);

	            this.close();
	        }.bind(this));
	    }
	    
	    this._show(win);
	    displayImage(src);
	},
	saveCard: function () {
	    this.shapeSelector('save', 'Save Your Creation');
	},
	shapeSelector: function (type, title) {
	    var id = 'editor-win-' + type;
	    var win = $('.' + id);
	    if (win.length == 0) {
	        win = this._create(id, title);

	        var nav = win.find('.editor-win-nav');
	        var contents = win.find('.editor-win-contents');            

	        if (type == 'save') {
	            $('.card-save-form').appendTo(contents).show();
	        } else {
	            var list = $('<ul></ul>').appendTo(contents);
	            var more = $('<div class="load-more">Load More...</div>').appendTo(contents);
	            var search = $('<input type="text" />');
	            var popular = $('<div class="toolbar-sub"><strong>Popular: </strong></div>').appendTo(nav);

	            win.find('.editor-win-head h3').replaceWith(search).wrap('<div class="editor-win-search border-box"></div>');

	            if (type === 'text') {
	                this._addCustomTextTab(win);
	                popular.append('<span>Love</span><span>Life</span><span>Humor</span><span>Wisdom</span><span>Birthday</span>');
                    search.attr('placeholder', 'Search for Text Quotes...')
	            } else {
	                popular.append('<span>Love</span><span>Nature</span><span>People</span><span>Badge</span><span>Abstract</span><span>Funny</span><span>Celebration</span><span>Christmas</span>');
	                search.attr('placeholder', 'Search for Clipart...')
	            }

	            var wpnt = null;

	            nav.addClass('editor-win-toolbar');

	            var filtered = null;

	            var filter = function (q) {
	                filtered = [];
	                var rg = new RegExp(q, 'i');
	                for (var i = 0; i < this.shapes.length; ++i) {	                    
	                    if (this.shapes[i].type == type && (this.shapes[i].tags.search(rg) != -1 || (this.shapes[i].title != null && this.shapes[i].title.search(rg) != -1))) {
	                        filtered[filtered.length] = this.shapes[i];
	                    }
	                }
	            };

                // populate
	            filter('');

	            var loadMore = function () {
	                var loadedCount = list.find('li').length;
	                var limit = (loadedCount + 30);
	                if (limit > filtered.length)
	                    limit = filtered.length;
	                for (var i = loadedCount; i < limit; ++i) {
	                    var shape = filtered[i];
	                    var emd = (shape.src != null) ? '<img src="' + environment.assetThumbPath.format(shape.src) + '" alt="" />' : shape.title;
	                    list.append('<li class="thumbnail" data-ecc-id="' + shape.id + '">' + emd + '</li>');
	                }
	                if (limit >= filtered.length) {
	                    more.hide();
	                } else {
	                    more.show();
	                }
	                $.waypoints('refresh');
	            };

	            more.waypoint(function () {
	                wpnt = $(this);
	                wpnt.waypoint('disable');
	                console.log('load more');
	                loadMore();
	                wpnt.waypoint('enable');	                
	            }, {
	                offset: 'bottom-in-view',
	                context: contents
	            });
	            
	            loadMore();

	            more.on('click', function () {
	                loadMore();
	            });

	            var searchList = function () {
	                filter(search.val());
	                list.html('');
	                list.scrollTop();
	                loadMore();
	            };

	            search.on('input', function () {
	                searchList();
	            });

	            popular.find('span').click(function () {
	                search.val($(this).text());
	                searchList();
	            });
	        }
	    }
	    this._show(win);
	    this._lazyLoad();
	},
	_addCustomTextTab: function (win) {
	    var footer = win.find('.editor-win-footer').addClass('visible form');
	    footer.append('<label for="text_custom_input">Add your custom text here</label>');
	    footer.append('<textarea cols="30" rows="5" id="text_custom_input" value="Put your text here..." />');
	    $('<button>Insert Text</button>').appendTo(footer).click(function () {
	        var txt = $('#text_custom_input').val();
	        if (txt !== null && txt !== '') {
	            var cfg = { type: 'text', title: txt, x: 300, y: 250, width: 450, scale: 1 };
	            this.card.drawItem(cfg);
	        }
	        this.close();
	    }.bind(this));
	}
});

<|start_filename|>editor/scripts/editor/progressbar.js<|end_filename|>
﻿var ProgressBar = Class.extend({
    init: function (config) {
        this.elem = $(config.elem);
        this.counter = 0;
    },
    show: function (msg) {
        this.counter++;
        this.elem.html('<span>' + msg + '</span>').show();
    },
    hide: function () {
        this.counter--;
        if (this.counter === 0) {
            this.elem.hide();
        }
    }
});

<|start_filename|>editor/scripts/model/text.js<|end_filename|>
﻿var Text = BaseShape.extend({
    init: function (config) {
        this.localFonts = ['Arial', 'Georgia'];
        this.cornerOffset = true;

        // if width is no provided we calculate it based on the number of words
        if (!config.width) {
            config.width = 400;
        }

        this._super(config);
    },
    draw: function () {
        this.txt = new Kinetic.Text({
            width: this.width,
            text: this.title,
            fill: 'black',
            fontSize: 24,
            lineHeight: 1.2,
            fontFamily: 'Arial',
            lineJoin: 'round'
        });

        this.group.add(this.txt);

        this.applyProperties(function () {
            this._updateHeight();
            this.redraw();

            this.ready = true;
            this.fire('ready', this);
        });
    },
    redraw: function () {
        this.drawStage();
    },
    update: function () {
        this._super();
        
        this.setSize(this.scale * this.group.getWidth(), this.scale * this.group.getHeight());

        this.scale = 1;
        this.group.setScale(1, 1);        

        this.txt.setWidth(this.width);
        if (this.stroke) { this.stroke.setWidth(this.width); }

        this.setHeight(this.txt.getHeight());
    },
    setText: function (txt) {
        if (this.selected) { this.title = txt; this.txt.setText(txt); }
        if (this.stroke) { this.stroke.setText(txt); }
        this._updateHeight();
        this.redraw();
    },
    getText: function () {
        return this.txt.getText();
    },
    setFontSize: function (size) {
        this.txt.setFontSize(size);
        if (this.stroke) { this.stroke.setFontSize(size); }
        this._updateHeight();
    },
    getFontSize: function () {
        return this.txt.getFontSize();
    },
    setLineHeight: function (height) {
        this.txt.setLineHeight(height);
        if (this.stroke) { this.stroke.setLineHeight(height); }
        this._updateHeight();
    },
    getLineHeight: function () {
        return this.txt.getLineHeight();
    },
    setFontFamily: function (family, callback) {
        if (jQuery.inArray(family, this.localFonts) !== -1) {
            this._setFontFamily(family);
            callback(this);
        } else {
            this._loadFont(family, function () {
                this._setFontFamily(family);
                callback(this);
            }.bind(this));
        }
    },
    getFontFamily: function () {
        return this.txt.getFontFamily();
    },
    setTextAlign: function (align) {
        this.txt.setAlign(align);
        if (this.stroke) { this.stroke.setAlign(align); }
    },
    getTextAlign: function () {
        return this.txt.getAlign();
    },
    setTextFill: function (color) {
        this.txt.setFill(color);
        if (this.stroke) { this.stroke.setFill(color); }
    },
    getTextFill: function () {
        return this.txt.getFill();
    },
    setStrokeColor: function (color) {
        this._createStroke();
        this.stroke.setStroke(color);
    },
    getStrokeColor: function () {
        if (this.stroke)
            return this.stroke.getStroke();
    },
    setStrokeWidth: function (width) {
        if (width === 0) {
            this._removeStroke();
        } else {
            this._createStroke();
            this.stroke.setStrokeWidth(width);
        }
    },
    getStrokeWidth: function () {
        if (this.stroke)
            return this.stroke.getStrokeWidth();
    },
    setOpacity: function (opacity) {
        this.txt.setOpacity(opacity);
        if (this.stroke) { this.stroke.setOpacity(opacity); }
    },
    getOpacity: function () {
        return this.txt.getOpacity();
    },
    getProperties: function () {
        var cfg = this.getShadowConfig();        
        cfg = cfg.concat(this._getPropertyConfig(['TextFill', 'FontSize', 'FontFamily', 'LineHeight', 'TextAlign']));
        if (this.stroke) {
            cfg = cfg.concat(this._getPropertyConfig(['StrokeColor', 'StrokeWidth']));
        }
        return cfg;
    },
    getConfig: function () {
        return jQuery.extend({ title: this.title }, this._super());
    },
    _updateHeight: function () {
        this.setHeight(this.txt.getHeight());
    },
    _setFontFamily: function (family) {
        this.txt.setFontFamily(family);
        if (this.stroke) { this.stroke.setFontFamily(family); }
        this._updateHeight();
    },
    _loadFont: function (family, complete) {
        this.fire('progress-start', 'Loading Font', this);
        this.ready = false;
		
        var scope = this;
		var loadComplete = function() {
            complete();
            scope.ready = true;
            scope.fire('progress-complete', scope);		
		};
		
        WebFont.load({
            google: {
                families: [family]
            },
            active: function () {
				loadComplete();
            },
            inactive: function () {
                loadComplete();
				scope.fire('error', 'The font could not be loaded', this);
            }
        });
    },
    _createStroke: function () {
        if (!this.stroke) {
            this.stroke = this.txt.clone();
            this.stroke.disableFill(); // this causes the shadow to be applied to the stroke
            this.stroke.setOpacity(this.txt.getOpacity())
            this.group.add(this.stroke);
            this.stroke.moveToBottom();

            this._transferShadow(this.txt, this.stroke);
        }
    },
    _removeStroke: function () {
        if (this.stroke) {

            this._transferShadow(this.stroke, this.txt);

            this.stroke.remove();
            this.stroke = null;
        }
    },
    _getShadowedShape: function () {
        return this.stroke || this.txt;
    },
    _transferShadow: function (src, dest) {
        if (src.hasShadow()) {
            dest.setShadowColor(src.getShadowColor());
            dest.setShadowBlur(src.getShadowBlur());
            dest.setShadowOffset(src.getShadowOffset());
            dest.setShadowOpacity(src.getShadowOpacity());
            src.disableShadow();
            dest.enableShadow();
        }
    },
});


<|start_filename|>editor/scripts/editor/pan.js<|end_filename|>
var PanManager = BaseObject.extend({
    init: function (config) {
        this._super(config);

        var that = this;

        $(document).on('click', '.editor-prop-pan .cancel', function () { that.close() });

        $(document).on('click', '.editor-pan-nav a', function (e) {
            e.preventDefault();
            var pan = $(this).parents('.editor-pan');
            var content = pan.find('.editor-pan-content').removeClass('active').filter($(this).attr('href')).addClass('active');
            pan.find('.editor-pan-nav li').removeClass('active')
            $(this).parents('li').addClass('active');            
            that._refreshScroller(content);
        });
    },
    show: function (item, type) {
        var pan = $('.editor-prop-pan-' + type);
        
        if (pan.length === 0) {
            for (var i = 0; i < this.propertySettings.length; ++i) {
                if (this.propertySettings[i].type == type) {
                    pan = this.drawPropertyPan(propertySettings[i]);
                    break;
                }
            }
        }

        // handle .selected and active tab stuff
        var contents = pan.find('.editor-pan-content').removeClass('active');
        contents.each(function (index) {
            var c = $(this);
            var val = item.getProperty(c.data('type'));
            if (c.hasClass('user-photo-selector')) {
                c.find('input').val('');
            } else if (c.hasClass('color')) {
                c.find('input').spectrum("set", val || '#000');
            } else if (c.hasClass('range')) {
                c.find('.range-slider').val(val || 0);
            } else if (c.hasClass('double-range')) {
                c.find('.range-slider-one').val(val[0] || 0);
                c.find('.range-slider-two').val(val[1] || 0);
            } else {
                c.find('li').removeClass('selected');
                if (val) {
                    c.find('li').each(function (index, elem) {                        
                        if (JSON.stringify($(elem).data('val')) === JSON.stringify(val)) {
                            $(elem).addClass('selected');
                        }
                    });
                }
            }
        });

        pan.find('.editor-pan-nav li').removeClass('active').first().addClass('active');
        var content = contents.first().addClass('active');
        pan.hide().fadeIn('fast');
        this._refreshScroller(content);
    },
    close: function () {
        $('.editor-pan').fadeOut('fast');
        $('.editor-toolbar li').removeClass('active');
        return false;
    },
    drawPropertyPan: function (propSetting) {
        
        var pan = $('<div class="editor-pan editor-prop-pan editor-prop-pan-' + propSetting.type + '"></div>').appendTo(this.container);
        var body = $('<div class="editor-pan-body"></div>').appendTo(pan);

        var tabs = [];
        if (propSetting.items) {
            for (var i = 0; i < propSetting.items.length; ++i) {
                var id = 'editor_pan_content_' + propSetting.items[i].type + '_' + i;
                tabs[tabs.length] = { id: id, title: propSetting.items[i].title };
                this.drawPropertyContent(id, propSetting.items[i], body);
            }
        } else {
            this.drawPropertyContent('editor_pan_content_' + propSetting.type, propSetting, body);
        }

        var nav = $('<div class="editor-pan-nav border-box"></div>').appendTo(pan);

        if (tabs.length > 1) {
            var nav = $('<ul></ul>').appendTo(nav);
            $.each(tabs, function (index, item) {
                $('<li class="border-box"><a href="#' + item.id + '">' + item.title + '</a></li>').appendTo(nav);
            });
        }

        return pan;
    },
    drawPropertyContent: function (id, propSetting, parent) {
        var content = $('<div class="editor-pan-content editor-pan-content-{0}" id="{1}"></div>'.format(propSetting.type.toLowerCase(), id)).data('type', propSetting.type).appendTo(parent);
        if (propSetting.data instanceof Array) {
            this.drawPropertyListSelector(propSetting, content);
        } else if (propSetting.data instanceof Object) {
            content.addClass(propSetting.data.type);
            switch (propSetting.data.type) {
                case 'color':
                    this.drawPropertyColorSelector(propSetting.type, propSetting.data, content);
                    break;
                case 'range':
                    this.drawPropertyRangeSelector(propSetting.type, propSetting.data, content, false);
                    break;
                case 'double-range':
                    this.drawPropertyRangeSelector(propSetting.type, propSetting.data, content, true);
                    break;
                case 'user-photo':
                    this.drawPropertyUserPhotoSelector(propSetting.type, propSetting.data, content);
                    break;
            }
        }

        content.hide();
    },

    drawPropertyListSelector: function (propSetting, parent) {
        var ul = $('<ul></ul>').appendTo(parent);
        for (var i = 0; i < propSetting.data.length; ++i) {
            var data = propSetting.data[i];
            var elem = $('<li class="property-item border-box"><div class="thumb thumb-{1}-{2}">&nbsp;</div><div class="label border-box"><span>{0}</span></div></li>'.format(data.title, propSetting.type.toLowerCase(), data.title.toLowerCase().replace(" ", "-"))).data('val', data.value).appendTo(ul);

            if (propSetting.thumb)
                elem.addClass('property-item-image').find('.thumb').html('').append('<img class="lazy" data-original="' + environment.assetThumbPath.format(data.value) + '" src="' + environment.contentPath + 'misc/grey.gif" alt="' + data.title + '" />');
        }

        this.drawPropertyCarousel(ul, parent, data.length);
        
        var $this = this;
        ul.find('li').on('tap', function (elem) {
            if (parent.data('scroller').moved) { return false; }
            $(this).parents('.editor-prop-pan').find('.editor-pan-content-' + propSetting.type.toLowerCase() + ' li').removeClass('selected');
            $(this).addClass('selected');
            $this.applyProperty(propSetting.type, $(this).data('val'));
        });
    },

    _loadThumbs: function () {
        $("img.lazy").lazyload();
    },
    _refreshScroller: function (scrollerContainer) {
        var scroller = scrollerContainer.data('scroller');
        if (scroller) {
            scroller.refresh()
            this._loadThumbs();
        }
    },
    drawPropertyColorSelector: function (type, data, parent) {
        var colorList = ['#000000', '#ffffff', '#f6311d', '#f7663c', '#f89a3c', '#f9ce3c', '#fcff3d', '#41ff34', '#249b33', '#2b61cb', '#3e00cb', '#380098', '#650098', '#9700cb', '#f8639b', '#f81ecd', '#f7289b', '#f62e6a', '#000000', '#444444', '#777777', '#878787', '#aaaaaa', '#bababa', '#dddddd', '#ffffff'];

        var ul = $('<ul></ul>').appendTo(parent);
        if (data.transparent) {
            ul.append('<li class="property-item color-item color-transparent border-box" data-val="transparent"><div class="thumb">&nbsp;</div><div class="label border-box"><span>Transparent</span></div></li>');
        }

        var li = $('<li class="property-item color-item color-item-selector border-box"></li>').appendTo(ul)
        var colorInput = $('<input type="text" />').appendTo(li);
        $('<div class="label border-box"><span>Select Color</span></div>').appendTo(li);

        var $this = this;

        colorInput.spectrum({
            color: "#000",
            showButtons: false,
            move: function (color) {
                $this.applyProperty(type, color.toHexString());
            }.bind(this)
        });

        for (var i = 0; i < colorList.length; ++i) {
            ul.append('<li class="property-item color-item border-box" data-val="{0}"><div class="thumb" style="background-color:{0}">&nbsp;</div><div class="label border-box"><span>{0}</span></div></li>'.format(colorList[i]));
        }

        this.drawPropertyCarousel(ul, parent, colorList.length);

        parent.find('.color-item').on('tap', function () {
            if (parent.data('scroller').moved) { return false; }
            $this.applyProperty(type, $(this).attr('data-val'));
        });
    },
    drawPropertyCarousel: function (ul, parent, length) {

        var scroller = new IScroll(parent.get(0), { scrollX: true, scrollY: false, tap: true, mouseWheel: true, mouseWheelSpeed: 40, scrollbars: 'custom', interactiveScrollbars: true });

        var width = 0;
        ul.find('li').each(function () {
            width += $(this).outerWidth();
        });
        ul.width(width + 30);

        parent.data('scroller', scroller);
        
        scroller.on('scrollEnd', function () {
            this._loadThumbs();
        }.bind(this));
    },
    drawPropertyRangeSelector: function (type, data, parent, double) {
        var wrap = $('<div class="editor-pan-slider"></div>').appendTo(parent);
        wrap.append('<p>' + data.tip + '</p>');
        var slider1 = $('<div class="noUiSlider range-slider range-slider-one"></div>').appendTo(wrap);
        $('<span class="min">Min</span>').insertBefore(slider1);
        $('<span class="max">Max</span>').insertAfter(slider1);
        var sliderVal = null;
        if (data.serialize)
            sliderVal = $('<input type="text" readonly="readonly" />').appendTo(wrap);
        var slider2 = null;
        if (double) {
            wrap.addClass('editor-pan-slider-double');
            slider2 = $('<div class="noUiSlider range-slider range-slider-two"></div>').appendTo(wrap);
            $('<span class="min">Min</span>').insertBefore(slider2);
            $('<span class="max">Max</span>').insertAfter(slider2);
        }
        parent.find('.range-slider').noUiSlider({
            range: [data.min, data.max],
            step: data.step,
            start: data.start,
            handles: 1,
            slide: function (e) {
                this.applyProperty(type, double ? [slider1.val(), slider2.val()] : slider1.val());
            }.bind(this),
            serialization: {
                to: data.serialize ? sliderVal : false,
                resolution: data.step
            }
        });
    },
    drawPropertyUserPhotoSelector: function (type, data, parent) {
        var wrap = $('<div class="user-photo-selector"></div>').appendTo(parent);
        if (window.File && window.FileReader && window.FileList && window.Blob && isFileInputSupported) {
            wrap.append('<p>Select your photo:</p>');

            var fileInput = $('<input type="file" size="30" id="photo_custom_input" />').appendTo(wrap);

            var that = this;
            var processLocalFiles = function (files) {
                for (var i = 0, f; f = files[i]; i++) {

                    if (!f.type.match('image.*')) { continue; }

                    var reader = new FileReader();
                    reader.onload = (function (theFile) {
                        return function (e) {
                            // the only way to reset the value of the file input in ie
                            // is to replace it with a new control
                            fileInput.replaceWith(fileInput = fileInput.clone(true));
                            that.close();
                            that.winManager.cropPhoto(e.target.result);
                        };
                    })(f);
                    reader.readAsDataURL(f);
                }
            };

            fileInput.appendTo(wrap).on('change', function (evt) {
                processLocalFiles(evt.target.files);
            });
        } else {
            wrap.append('<div>The <a href="http://en.wikipedia.org/wiki/HTML5_File_API">HTML5 File API</a> is not supported in this browser. Please upgrade your browser to a more recent one!</div>');
        }
    },
    applyProperty: function (type, value) {
        var sel = this.card.getSelected();
        sel.setProperty(type, value, function () {
            sel.redraw();
        });
    },
    editText: function (item) {
        var pan = $('.editor-pan-edit-text');

        if (pan.length === 0) {
            pan = $('<div class="editor-pan editor-prop-pan editor-pan-edit-text"></div>').appendTo(this.container).hide();
            var b = $('<div class="editor-pan-body"></div>').appendTo(pan);
            var content = $('<div class="editor-pan-content border-box active"><textarea rows="4" cols="50"></textarea></div>').appendTo(b);
        }

        $('.editor-pan-edit-text textarea').val(item.title);

        $('.editor-pan-edit-text textarea').bind("input paste", function () {
            item.setText($(this).val())
        });

        pan.show();
    }
});

<|start_filename|>editor/scripts/model/bg.js<|end_filename|>
﻿var Background = BaseElement.extend({
    init: function (config) {
        this._super(config);
    },
    draw: function () {

        // other objects might want to access this item before the related image has been loaded
        this.bg = new Kinetic.Image({
            width: this.stageWidth,
            height: this.stageHeight
        });

        this.layer.add(this.bg);

        this.loadImages([this.src], function (images) {

            this.photoImage = this.photoImageOrig = images[this.src];

            this.bg.on('mousedown tap', function (e) {
                this.select();
            }.bind(this));

            this.updateOrder();

            this.applyProperties(function () {
                this._setFill();                         
                this.redraw();

                this.ready = true;
                this.fire('ready', this);
            });

        }.bind(this));
    },
    redraw: function () {
        this.drawStage();
    },
    select: function () {
        this.selected = true;
        this._super();
    },
    dispose: function () {
        this.bg.remove();
        this.drawStage();
    },
    getPhoto: function () {
        return this.src;
    },
    setPhoto: function (imgSrc) {
       
        this.loadImages([imgSrc], function (images) {
            //this.photoX = this.photoY = this.photoW = this.photoH = null;

            this.src = imgSrc;
            this.photoImage = this.photoImageOrig = images[imgSrc];
                    
            this.setFilter(this.filter, function () {
                this.redraw();
            }.bind(this));

        }.bind(this));
    },
    setFilter: function (config, callback) {
        // don't apply any filters when the device is slow
        if (environment.slow) {
            this.filter = null;
            this._setFill();
            callback(this);
            return;
        }

        var filters = [];
        if (config == null || config.name === 'none') {
            this.filter = null;
        } else {
            this.filter = config;
            filters[filters.length] = config;
        }
        
        this._applyFilters(this.photoImageOrig, filters, function (image) {
            this.photoImage = this.renderedImage = image;
            this._applyAdjustments(function () {
                this._setFill();
                callback(this);
            }.bind(this));
        }.bind(this));
    },
    getFilter: function () {
        return this.filter;
    },
    _applyAdjustments: function (callback) {
        var adjustments = [];
        if (this.contrast && this.contrast !== 0) {
            adjustments[adjustments.length] = { name: 'contrast', params: this.contrast };
        }
        if (this.brightness && this.brightness !== 0) {
            adjustments[adjustments.length] = { name: 'brightness', params: this.brightness };
        }
        this._applyFilters(this.renderedImage || this.photoImageOrig, adjustments, function (image) {
            this.photoImage = image;
            this._setFill();
            callback(this);
        }.bind(this));
    },
    setContrast: function (adjust, callback) {
        // don't apply contrast when the device is very slow
        if (environment.verySlow) {
            this.contrast = 0;
            callback(this);
            return;
        }

		this.contrast = adjust;
		this._applyAdjustments(callback);
	},
	getContrast: function() {
		return this.contrast || 0;
	},
	setBrightness: function (adjust, callback) {
	    // don't apply brightness when the device is very slow
	    if (environment.verySlow) {
	        this.brightness = 0;
	        callback(this);
	        return;
	    }

		this.brightness = adjust;
		this._applyAdjustments(callback);
	},
	getBrightness: function(callback) {
		return this.brightness || 0;
	},	
	setFrame: function (frameSrc, callback) {
	    
	    if (frameSrc == null) {
	        if (this.frame) {
	            this.frame.remove();
	            this.frame = null;
	            if (this.frameFillColor) { this.frameFillColor = null; }
	            this.redraw();
	        }
            callback(this);
            return;
        }

	    this.loadImages([frameSrc], function (images) {
	        this.frameSrc = frameSrc;
            if (!this.frame) {
                this.frame = new Kinetic.Image({
                    width: this.stageWidth,
                    height: this.stageHeight
                });                
                this.layer.add(this.frame);
                this.updateOrder();
            }

            this.frame.setImage(images[frameSrc]);
            this.frame.createImageHitRegion(function () {
                if (this.frameFillColor) {
                    this.setFrameFillColor(this.frameFillColor);
                }
                callback(this);
            }.bind(this));
        }.bind(this));
    },
    getFrame: function () {
        return (this.frame != null) ? this.frameSrc : null;
    },
    setFrameFillColor: function (color) {
        if (this.frame) {            
            this.frame.clearFilter();
            if (color == 'transparent') {
                this.frameFillColor = null;                
            } else {
                this.frameFillColor = color;
                this.frame.setFilterColorFill(color);
                this.frame.setFilter(Kinetic.Filters.ColorFill);
            }
        }
    },
    getFrameFillColor: function () {
        return this.frameFillColor;
    },
    updateOrder: function () {
        this.bg.moveToBottom();
        if (this.frame)
            this.frame.moveToTop();
    },
    //updateCrop: function (x, y, w, h) {
    //    this.photoX = x;
    //    this.photoY = y;
    //    this.photoW = w;
    //    this.photoH = h;

    //    this._setFill();
    //    this.drawStage();
    //},
    //getAspectRatio: function () {
    //    return (this.stageWidth / this.stageHeight);
    //},
    getProperties: function () {
        var cfg = [];
        if (this.filter) {
            cfg = cfg.concat(this._getPropertyConfig('Filter'));
        }

        if (this.frame) {
            cfg = cfg.concat(this._getPropertyConfig('Frame'));
        }

        if (this.frameFillColor) {
            cfg = cfg.concat(this._getPropertyConfig('FrameFillColor'));
        }
		
        if (this.contrast && this.contrast != 0) {
            cfg = cfg.concat(this._getPropertyConfig('Contrast'));
        }
		
        if (this.brightness && this.brightness != 0) {
            cfg = cfg.concat(this._getPropertyConfig('Brightness'));
        }

        return cfg;
    },
    getConfig: function () {
        return jQuery.extend({ src: this.src, zindex: 0 }, this._super());
    },
    _setFill: function () {
        //this.photoX = this.photoX || 0;
        //this.photoY = this.photoY || 0;
        //this.photoW = this.photoW || this.bg.getWidth();

        //if (this.photoW - this.photoX > this.photoImage.width)
        //    this.photoW = this.photoImage.width - this.photoX;

        //this.photoH = (this.bg.getHeight() * this.photoW) / this.bg.getWidth();

        //if (this.photoH - this.photoY > this.photoImage.height) {
        //    this.photoH = this.photoImage.height - this.photoY;
        //    this.photoW = (this.bg.getWidth() * this.photoH) / this.bg.getHeight();
        //}

        this.bg.setImage(this.photoImage);

        //this.bg.setCrop({
        //    x: this.photoX,
        //    y: this.photoY,
        //    width: this.photoW,
        //    height: this.photoH
        //});
    },
    _applyFilters: function (image, filters, callback) {

        if(filters == null || filters.length == 0){
            callback(image);
            return;
        }

        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;

        var scope = this;
        this.fire('progress-start', 'Applying Filters', this);
        Caman(canvas, image.src, function () {
            for(var i = 0; i <filters.length; ++i) { 
                this[filters[i].name](filters[i].params);
            }
            this.render(function (a) {
                var dataUrl = canvas.toDataURL();
                var imageObj = new Image();
                imageObj.onload = function () {
                    canvas = null;
                    callback(imageObj);
                    scope.fire('progress-complete', this);
                };
                imageObj.src = dataUrl;
            });
        });
    }
});

<|start_filename|>editor/scripts/editor/data.js<|end_filename|>
﻿var shapes = [{
    id: 2330, type: 'clipart', tags: 'badge,speech,bubble,sticker,balloon', width: 500, height: 379, scale: 0.6, src: 'clipart/speech_bubble_one.png'
}, {
    id: 2100, type: 'clipart', tags: 'fly,bird,nature', width: 429, height: 543, scale: 0.5, src: 'clipart/bird.png'
}, {
    id: 2130, type: 'clipart', tags: 'nature,rose,flower,red,love', width: 303, height: 332, scale: 0.7, src: 'clipart/rose_open.png'
}, {
    id: 2150, type: 'clipart', tags: 'heart,love,red', width: 282, height: 261, scale: 1, src: 'clipart/heart.png'
}, {
    id: 2160, type: 'clipart', tags: 'heart,break,broken,love', width: 472, height: 411, scale: 0.6, src: 'clipart/heart_broken.png'
}, {
    id: 2170, type: 'clipart', tags: 'sunflower,flower,nature', width: 273, height: 394, scale: 1, src: 'clipart/sunflower.png'
}, {
    id: 2180, type: 'clipart', tags: 'ink,splash,abstract,art', width: 407, height: 370, scale: 0.5, src: 'clipart/ink_splash.png'
}, {
    id: 2181, type: 'clipart', tags: 'ink,splash,abstract,art,grunge', width: 360, height: 381, scale: 0.9, src: 'clipart/ink_splash_2.png'
}, {
    id: 2190, type: 'clipart', tags: 'coffee,stain,abstract', width: 381, height: 296, scale: 0.5, src: 'clipart/coffee_stain.png'
}, {
    id: 2200, type: 'clipart', tags: 'peacock,feather,animal,nature,bird', width: 618, height: 616, scale: 0.5, src: 'clipart/peacock_feather.png'
}, {
    id: 2220, type: 'clipart', tags: 'people,bride,love,marriage,white,dress,girl,woman,lady', width: 441, height: 680, scale: 0.7, src: 'clipart/bride.png'
}, {
    id: 2240, type: 'clipart', tags: 'white,porsche,car,vehicle', width: 553, height: 306, scale: 0.7, src: 'clipart/white_porsche.png'
}, {
    id: 2250, type: 'clipart', tags: 'people,kiss,couple,love,silhouette', width: 521, height: 472, scale: 0.7, src: 'clipart/kissing_couple.png'
}, {
    id: 2270, type: 'clipart', tags: 'splash,color,abstract', width: 531, height: 493, scale: 0.5, src: 'clipart/splash_color.png'
}, {
    id: 2280, type: 'clipart', tags: 'people,lips,love,red,women,girl', width: 526, height: 351, scale: 0.5, src: 'clipart/lips_open.png'
}, {
    id: 2290, type: 'clipart', tags: 'people,lips,love,red,woman,girl', width: 489, height: 225, scale: 0.7, src: 'clipart/lips.png'
}, {
    id: 2300, type: 'clipart', tags: 'people,kiss,lips,love,red,women,girl', width: 325, height: 159, scale: 0.7, src: 'clipart/kiss_one.png'
}, {
    id: 2310, type: 'clipart', tags: 'people,kiss,lips,love,red,women,girl', width: 338, height: 206, scale: 0.6, src: 'clipart/kiss_two.png'
}, {
    id: 2320, type: 'clipart', tags: 'people,hot,chick,girl,bikini,woman', width: 151, height: 558, scale: 0.8, src: 'clipart/hot_chick.png'
}, {
    id: 2350, type: 'clipart', tags: 'badge,speech,bubble,sticker,balloon', width: 589, height: 408, scale: 0.6, src: 'clipart/speech_bubble_two.png'
}, {
    id: 2360, type: 'clipart', tags: 'badge,speech,bubble,sticker,balloon', width: 471, height: 344, scale: 0.7, src: 'clipart/speech_bubble_three.png'
}, {
    id: 2370, type: 'clipart', tags: 'people,shopping,girl,woman,hot,sexy,silhouette,bags', width: 264, height: 600, scale: 0.8, src: 'clipart/shopping_girl.png'
}, {
    id: 2380, type: 'clipart', tags: 'people,pretty,face,cute,girl,woman', width: 500, height: 589, scale: 0.8, src: 'clipart/pretty_face.png'
}, {
    id: 2390, type: 'clipart', tags: 'people,pretty,face,cute,girl,woman', width: 500, height: 589, scale: 0.8, src: 'clipart/pretty_face_two.png'
}, {
    id: 2410, type: 'clipart', tags: 'people,jesus,silhouette,religon,god', width: 400, height: 429, scale: 0.7, src: 'clipart/jesus.png'
}, {
    id: 2430, type: 'clipart', tags: 'people,silhouette,girl,hot,sexy,woman', width: 357, height: 700, scale: 0.6, src: 'clipart/silhouette_girl_one.png'
}, {
    id: 2440, type: 'clipart', tags: 'butterfly,nature,insect', width: 505, height: 434, scale: 0.7, src: 'clipart/butterfly.png'
}, {
    id: 2450, type: 'clipart', tags: 'teddy,bear,heart,love,cute,gift', width: 395, height: 444, scale: 0.7, src: 'clipart/bear_heart.png'
}, {
    id: 2460, type: 'clipart', tags: 'badge,roadblock,road,block,sticker', width: 480, height: 354, scale: 0.7, src: 'clipart/roadblock.png'
}, {
    id: 2470, type: 'clipart', tags: 'pink,heart,love', width: 600, height: 509, scale: 0.6, src: 'clipart/heart_pink.png'
}, {
    id: 2480, type: 'clipart', tags: 'badge,speech,bubble,sticker,balloon', width: 450, height: 443, scale: 0.6, src: 'clipart/speech_bubble_four.png'
}, {
    id: 2490, type: 'clipart', tags: 'badge,speech,bubble,sticker,balloon', width: 500, height: 310, scale: 0.6, src: 'clipart/speech_bubble_five.png'
}, {
    id: 2500, type: 'clipart', tags: 'badge,speech,bubble,sticker,balloon', width: 450, height: 243, scale: 0.7, src: 'clipart/speech_bubble_six.png'
}, {
    id: 2510, type: 'clipart', tags: 'badge,speech,bubble,sticker,balloon', width: 450, height: 358, scale: 0.7, src: 'clipart/speech_bubble_seven.png'
}, {
    id: 2520, type: 'clipart', tags: 'yacht,boat,holiday,ocean,sailing,rich', width: 800, height: 298, scale: 0.7, src: 'clipart/yacht.png'
}, {
    id: 2530, type: 'clipart', tags: 'badge,smiley,sticker,yellow', width: 395, height: 396, scale: 0.8, src: 'clipart/smiley_sticker.png'
}, {
    id: 2540, type: 'clipart', tags: 'red,sport,car,fast,rich', width: 600, height: 319, scale: 0.7, src: 'clipart/sport_car.png'
}, {
    id: 2560, type: 'clipart', tags: 'football,sport', width: 450, height: 450, scale: 0.7, src: 'clipart/football.png'
}, {
    id: 2570, type: 'clipart', tags: 'basketball,sport', title: 'Basketball', width: 450, height: 446, scale: 0.7, src: 'clipart/basketball.png'
}, {
    id: 2580, type: 'clipart', tags: 'badge,tv,retro,television', width: 600, height: 688, scale: 0.6, src: 'clipart/retro_tv.png'
}, {
    id: 2590, type: 'clipart', tags: 'clover,flower,nature', width: 450, height: 530, scale: 0.6, src: 'clipart/clover.png'
}, {
    id: 2600, type: 'clipart', tags: 'halloween,pumpkin,scary', width: 396, height: 429, scale: 0.6, src: 'clipart/halloween_pumpkin.png'
}, {
    id: 2610, type: 'clipart', tags: 'air,balloon,fly,sky', width: 450, height: 554, scale: 0.6, src: 'clipart/balloon.png'
}, {
    id: 2630, type: 'clipart', tags: 'christmas,tree,nature', width: 450, height: 546, scale: 0.8, src: 'clipart/colorful_christmas.png'
}, {
    id: 2640, type: 'clipart', tags: 'christmas,tree,nature', width: 393, height: 600, scale: 0.8, src: 'clipart/christmas_tree.png'
}, {
    id: 2650, type: 'clipart', tags: 'badge,audio,cassette,retro,music', width: 483, height: 294, scale: 0.8, src: 'clipart/audio_cassette.png'
}, {
    id: 2660, type: 'clipart', tags: 'lifestyle,gamble,gambling,casino,cards,play,game', width: 567, height: 312, scale: 0.8, src: 'clipart/gambling.png'
}, {
    id: 2670, type: 'clipart', tags: 'paint,painter,palette,art,color,colour', width: 450, height: 560, scale: 0.7, src: 'clipart/painter_palette.png'
}, {
    id: 2690, type: 'clipart', tags: 'christmas,santa,gift,celebration', width: 456, height: 431, scale: 0.8, src: 'clipart/santa.png'
}, {
    id: 2700, type: 'clipart', tags: 'badge,love,heart,bird,label', width: 572, height: 440, scale: 0.8, src: 'clipart/be_mine.png'
}, {
    id: 2710, type: 'clipart', tags: 'people,fashion,girl,woman,sexy,hot,lady,silhouette,model', width: 210, height: 600, scale: 0.8, src: 'clipart/fashion_girl.png'
}, {
    id: 2720, type: 'clipart', tags: 'people,baby,girl,kid,cute,birth', width: 450, height: 449, scale: 0.8, src: 'clipart/baby_girl.png'
}, {
    id: 2730, type: 'clipart', tags: 'badge,hello,kitty,sticker,christmas', width: 450, height: 454, scale: 0.8, src: 'clipart/hello_kitty_christmas.png'
}, {
    id: 2750, type: 'clipart', tags: 'abstract,grunge,splatter', width: 505, height: 418, scale: 0.8, src: 'clipart/grunge_splatter.png'
}, {
    id: 2760, type: 'clipart', tags: 'people,fashion,girl,woman,sexy,hot,lady,silhouette,model', width: 271, height: 600, scale: 0.8, src: 'clipart/sexy_model.png'
}, {
    id: 2770, type: 'clipart', tags: 'people,victory,hand,silhouette', width: 329, height: 600, scale: 0.7, src: 'clipart/victory.png'
}, {
    id: 2780, type: 'clipart', tags: ',celebration,balloons,celebrate,party', width: 500, height: 598, scale: 0.7, src: 'clipart/balloons.png'
}, {
    id: 2790, type: 'clipart', tags: 'heart,love', width: 450, height: 404, scale: 0.7, src: 'clipart/heart_two.png'
}, {
    id: 2800, type: 'clipart', tags: 'abstracy,color,splash,grunge', width: 600, height: 561, scale: 0.8, src: 'clipart/multicolored_splashes.png'
}, {
    id: 2810, type: 'clipart', tags: 'abstracy,color,splash,grunge', width: 650, height: 541, scale: 0.8, src: 'clipart/colorful_splashes.png'
}, {
    id: 2820, type: 'clipart', tags: 'badge,wooden,banner,note', width: 650, height: 419, scale: 0.7, src: 'clipart/wooden_banner.png'
}, {
    id: 2830, type: 'clipart', tags: 'badge,mushroom,banner,note', width: 650, height: 200, scale: 0.7, src: 'clipart/mushroom_banner.png'
}, {
    id: 2840, type: 'clipart', tags: 'abstractt,ink,brush', width: 561, height: 114, scale: 0.7, src: 'clipart/ink_brush_one.png'
}, {
    id: 2850, type: 'clipart', tags: 'abstractt,ink,brush', width: 367, height: 50, scale: 0.8, src: 'clipart/ink_brush_two.png'
}, {
    id: 2860, type: 'clipart', tags: 'abstractt,ink,brush', width: 500, height: 157, scale: 0.7, src: 'clipart/ink_brush_three.png'
}, {
    id: 2870, type: 'clipart', tags: 'abstractt,ink,brush', width: 450, height: 108, scale: 0.8, src: 'clipart/ink_brush_four.png'
}, {
    id: 2880, type: 'clipart', tags: 'abstractt,ink,brush', width: 500, height: 75, scale: 0.7, src: 'clipart/ink_brush_five.png'
}, {
    id: 2890, type: 'clipart', tags: 'floral,flower,heart,love', width: 600, height: 542, scale: 0.7, src: 'clipart/floral_heart.png'
}, {
    id: 2900, type: 'clipart', tags: 'people,woman,girl,lady,silhoette,head', width: 471, height: 665, scale: 0.7, src: 'clipart/retro_woman.png'
}, {
    id: 2910, type: 'clipart', tags: 'badge,valentine,love,banner,note,heart', width: 600, height: 521, scale: 0.7, src: 'clipart/valentine_banner.png'
}, {
    id: 2920, type: 'clipart', tags: 'lotus,blossoms,flower,nature', width: 537, height: 438, scale: 0.8, src: 'clipart/lotus_blossoms.png'
}, {
    id: 2950, type: 'clipart', tags: 'floral,flower,nature', width: 585, height: 437, scale: 0.8, src: 'clipart/floral_decoration.png'
}, {
    id: 2960, type: 'clipart', tags: 'abstracy,color,splash,grunge,spray,blob', width: 571, height: 398, scale: 0.8, src: 'clipart/spray_blob.png'
}, {
    id: 2970, type: 'clipart', tags: 'people,girl,woman,sexy,hot,lady,silhouette,party,dance,model', width: 320, height: 596, scale: 0.8, src: 'clipart/dance_girl_one.png'
}, {
    id: 2980, type: 'clipart', tags: 'people,girl,woman,sexy,hot,lady,silhouette,party,dance,model', width: 261, height: 601, scale: 0.8, src: 'clipart/dance_girl_two.png'
}, {
    id: 2990, type: 'clipart', tags: 'people,girl,woman,sexy,hot,lady,silhouette,party,dance,model', width: 273, height: 598, scale: 0.8, src: 'clipart/dance_girl_three.png'
}, {
    id: 3000, type: 'clipart', tags: 'people,girl,woman,sexy,hot,lady,silhouette,party,dance,model', width: 283, height: 687, scale: 0.8, src: 'clipart/dance_girl_four.png'
}, {
    id: 3010, type: 'clipart', tags: 'people,girl,woman,sexy,hot,lady,silhouette,party,dance,model', width: 340, height: 602, scale: 0.8, src: 'clipart/dance_girl_five.png'
}, {
    id: 3020, type: 'clipart', tags: 'people,girl,woman,sexy,hot,lady,silhouette,party,dance,model', width: 395, height: 653, scale: 0.8, src: 'clipart/dance_girl_six.png'
}, {
    id: 3030, type: 'clipart', tags: 'flower,note,sticker,nature', width: 501, height: 467, scale: 0.8, src: 'clipart/flower_greeting.png'
}, {
    id: 3040, type: 'clipart', tags: 'flower,note,sticker,nature', width: 501, height: 513, scale: 0.8, src: 'clipart/flower_greeting_two.png'
}, {
    id: 3050, type: 'clipart', tags: 'music,note,silhouette,celebration', width: 751, height: 261, scale: 0.7, src: 'clipart/music_note.png'
}, {
    id: 3060, type: 'clipart', tags: 'lovegrunge,heart,silhouette', width: 552, height: 332, scale: 0.7, src: 'clipart/grunge_heart_one.png'
}, {
    id: 3061, type: 'clipart', tags: 'love,grunge,heart,silhouette', width: 563, height: 336, scale: 0.7, src: 'clipart/grunge_heart_two.png'
}, {
    id: 3062, type: 'clipart', tags: 'love,grunge,heart,silhouette', width: 522, height: 421, scale: 0.7, src: 'clipart/grunge_heart_three.png'
}, {
    id: 3063, type: 'clipart', tags: 'love,grunge,heart,silhouette', width: 451, height: 412, scale: 0.7, src: 'clipart/grunge_heart_four.png'
}, {
    id: 3064, type: 'clipart', tags: 'love,grunge,heart,silhouette', width: 501, height: 496, scale: 0.7, src: 'clipart/grunge_heart_five.png'
}, {
    id: 3066, type: 'clipart', tags: 'art,pencil,brush,painting', width: 265, height: 449, scale: 0.7, src: 'clipart/art_supply.png'
}, {
    id: 3067, type: 'clipart', tags: 'bath,tub,shower,bubble', width: 472, height: 475, scale: 0.7, src: 'clipart/bathtub.png'
}, {
    id: 3068, type: 'clipart', tags: 'birthday,plane,gift,red,fly,celebration', width: 492, height: 401, scale: 0.7, src: 'clipart/birthday_plane.png'
}, {
    id: 3069, type: 'clipart', tags: 'people,couple,propose,silhouette,love', width: 356, height: 440, scale: 0.8, src: 'clipart/couple_propose.png'
}, {
    id: 3070, type: 'clipart', tags: 'people,couple,kiss,silhouette,love', width: 171, height: 505, scale: 0.8, src: 'clipart/couple_kissing.png'
}, {
    id: 3071, type: 'clipart', tags: 'people,couple,hand,silhouette,love', width: 428, height: 505, scale: 0.8, src: 'clipart/couple_holding_hands.png'
}, {
    id: 3072, type: 'clipart', tags: 'bear,heart,cute,love,teddy', width: 429, height: 554, scale: 0.8, src: 'clipart/bear_heart_two.png'
}, {
    id: 3073, type: 'clipart', tags: 'heart,love', width: 476, height: 411, scale: 0.8, src: 'clipart/heart_three.png'
}, {
    id: 3074, type: 'clipart', tags: 'balloon,blue,celebration', width: 239, height: 508, scale: 0.8, src: 'clipart/balloon_blue.png'
}, {
    id: 3075, type: 'clipart', tags: 'balloon,pink,celebration', width: 328, height: 532, scale: 0.8, src: 'clipart/balloon_pink.png'
}, {
    id: 3076, type: 'clipart', tags: 'balloon,red,celebration', width: 341, height: 559, scale: 0.8, src: 'clipart/balloon_red.png'
}, {
    id: 3077, type: 'clipart', tags: 'balloon,green,celebration', width: 292, height: 589, scale: 0.8, src: 'clipart/balloon_green.png'
}, {
    id: 3078, type: 'clipart', tags: 'cupcake,cherry,celebration', width: 399, height: 447, scale: 0.8, src: 'clipart/cupcake.png'
}, {
    id: 3079, type: 'clipart', tags: 'chinese,lantern,red,celebration', width: 379, height: 456, scale: 0.8, src: 'clipart/chinese_lantern_red.png'
}, {
    id: 3080, type: 'clipart', tags: 'chinese,lantern,green,celebration', width: 269, height: 487, scale: 0.8, src: 'clipart/chinese_lantern_green.png'
}, {
    id: 3081, type: 'clipart', tags: 'birthday,cake,celebration', width: 333, height: 433, scale: 0.8, src: 'clipart/birthday_cake.png'
}, {
    id: 3082, type: 'clipart', tags: 'bird,singing,blue,funny,nature', width: 293, height: 453, scale: 0.8, src: 'clipart/bird_singing.png'
}, {
    id: 3083, type: 'clipart', tags: 'people,father,son,play,silhouette', width: 409, height: 483, scale: 0.8, src: 'clipart/father_son.png'
}, {
    id: 3084, type: 'clipart', tags: 'birthday,cake,candle,red,celebration', width: 517, height: 395, scale: 0.8, src: 'clipart/birthday_cake_one.png'
}, {
    id: 3085, type: 'clipart', tags: 'flower,nature', width: 465, height: 469, scale: 0.8, src: 'clipart/fresh_flower.png'
}, {
    id: 3086, type: 'clipart', tags: 'butterfly,nature', width: 447, height: 354, scale: 0.8, src: 'clipart/butterfly_one.png'
}, {
    id: 3087, type: 'clipart', tags: 'butterfly,nature', width: 432, height: 393, scale: 0.8, src: 'clipart/butterfly_two.png'
}, {
    id: 3088, type: 'clipart', tags: 'butterfly,nature', width: 365, height: 465, scale: 0.8, src: 'clipart/butterfly_three.png'
}, {
    id: 3089, type: 'clipart', tags: 'butterfly,nature', width: 511, height: 408, scale: 0.8, src: 'clipart/butterfly_four.png'
}, {
    id: 3090, type: 'clipart', tags: 'butterfly,nature', width: 471, height: 376, scale: 0.8, src: 'clipart/butterfly_five.png'
}, {
    id: 3091, type: 'clipart', tags: 'butterfly,nature', width: 329, height: 465, scale: 0.8, src: 'clipart/butterfly_six.png'
}, {
    id: 3092, type: 'clipart', tags: 'flower,nature,blue', width: 400, height: 427, scale: 0.8, src: 'clipart/hawaii_flower.png'
}, {
    id: 3093, type: 'clipart', tags: 'flower,nature', width: 531, height: 327, scale: 0.8, src: 'clipart/hawaii_flower_one.png'
}, {
    id: 3094, type: 'clipart', tags: 'heart,balloon,love', width: 222, height: 537, scale: 0.8, src: 'clipart/heart_balloon.png'
}, {
    id: 3095, type: 'clipart', tags: 'lifestyle,shoe,silhouette,heel', width: 443, height: 383, scale: 0.8, src: 'clipart/high_heel.png'
}, {
    id: 3096, type: 'clipart', tags: 'leaf,nature,silhoette', width: 362, height: 498, scale: 0.8, src: 'clipart/leaf.png'
}, {
    id: 3097, type: 'clipart', tags: 'leaf,nature,silhoette', width: 516, height: 333, scale: 0.8, src: 'clipart/leaf_one.png'
}, {
    id: 3098, type: 'clipart', tags: 'lollipop,candy,sweet', width: 546, height: 397, scale: 0.8, src: 'clipart/lollipops.png'
}, {
    id: 3099, type: 'clipart', tags: 'people,couple,propose,love,silhouette', width: 408, height: 503, scale: 0.8, src: 'clipart/couple_propose_two.png'
}, {
    id: 3100, type: 'clipart', tags: 'badge,money,bag,silhouette', width: 413, height: 444, scale: 0.8, src: 'clipart/money_bag.png'
}, {
    id: 3101, type: 'clipart', tags: 'badge,money,cash', width: 400, height: 482, scale: 0.8, src: 'clipart/money.png'
}, {
    id: 3102, type: 'clipart', tags: 'people,mother,child,silhouette', width: 318, height: 507, scale: 0.8, src: 'clipart/mother_child.png'
}, {
    id: 3103, type: 'clipart', tags: 'people,couple,holding,hands,love,silhouette', width: 412, height: 502, scale: 0.8, src: 'clipart/couple_holding_hands_two.png'
}, {
    id: 3104, type: 'clipart', tags: 'gift,box,birthday,love,celebration', width: 393, height: 506, scale: 0.8, src: 'clipart/gift_box.png'
}, {
    id: 3105, type: 'clipart', tags: 'badge,sticker,red', width: 495, height: 325, scale: 0.8, src: 'clipart/sticker.png'
}, {
    id: 3106, type: 'clipart', tags: 'badge,sticker,red', width: 189, height: 492, scale: 0.8, src: 'clipart/sticker_one.png'
}, {
    id: 3107, type: 'clipart', tags: 'celebration,gift,box,love,pink', width: 375, height: 481, scale: 0.8, src: 'clipart/gift_box_one.png'
}, {
    id: 3108, type: 'clipart', tags: 'celebration,birthday,cake', width: 304, height: 505, scale: 0.8, src: 'clipart/birthday_cake_two.png'
}, {
    id: 3109, type: 'clipart', tags: 'people,girl,fashion,silhouette', width: 325, height: 501, scale: 0.8, src: 'clipart/fashion_girl_one.png'
}, {
    id: 3110, type: 'clipart', tags: 'feather,nature', width: 454, height: 329, scale: 0.8, src: 'clipart/feather.png'
}, {
    id: 3111, type: 'clipart', tags: 'painter,palette,color', width: 519, height: 315, scale: 0.8, src: 'clipart/painter_palette_one.png'
}, {
    id: 3112, type: 'clipart', tags: 'nature,bird,singing,tree,flower,love', width: 618, height: 374, scale: 0.8, src: 'clipart/bird_singing_one.png'
}, {
    id: 3113, type: 'clipart', tags: 'music,note,silhouette,celebration', width: 555, height: 405, scale: 0.8, src: 'clipart/music_note_one.png'
}, {
    id: 3114, type: 'clipart', tags: 'flower,nature,silhouette', width: 417, height: 417, scale: 0.8, src: 'clipart/swirling_flower.png'
}, {
    id: 3115, type: 'clipart', tags: 'flower,nature,silhouette', width: 442, height: 443, scale: 0.8, src: 'clipart/swirling_flower_one.png'
}, {
    id: 3116, type: 'clipart', tags: 'flower,nature,silhouette', width: 414, height: 414, scale: 0.8, src: 'clipart/swirling_flower_two.png'
}, {
    id: 3117, type: 'clipart', tags: 'flower,nature,silhouette', width: 462, height: 463, scale: 0.8, src: 'clipart/swirling_flower_three.png'
}, {
    id: 3118, type: 'clipart', tags: 'flower,nature,silhouette', width: 423, height: 423, scale: 0.8, src: 'clipart/swirling_flower_four.png'
}, {
    id: 3119, type: 'clipart', tags: 'umbrella,red,rain', width: 526, height: 389, scale: 0.8, src: 'clipart/umbrella.png'
}, {
    id: 3120, type: 'clipart', tags: 'watermelon,fruit,nature', width: 544, height: 328, scale: 0.8, src: 'clipart/watermelon.png'
}, {
    id: 3121, type: 'clipart', tags: 'people,wedding,bride,girl,woman,silhouette', width: 544, height: 328, scale: 0.8, src: 'clipart/wedding.png'
}, {
    id: 3122, type: 'clipart', tags: 'people,wedding,bride,couble,silhouette', width: 379, height: 529, scale: 0.8, src: 'clipart/wedding_one.png'
}, {
    id: 3123, type: 'clipart', tags: 'people,wedding,bride,couble,silhouette', width: 440, height: 511, scale: 0.8, src: 'clipart/wedding_two.png'
}, {
    id: 3124, type: 'clipart', tags: 'people,wedding,bride,couble,silhouette', width: 351, height: 503, scale: 0.8, src: 'clipart/wedding_three.png'
}, {
    id: 3125, type: 'clipart', tags: 'people,wedding,bride,couble,dance,silhouette', width: 374, height: 503, scale: 0.8, src: 'clipart/wedding_four.png'
}, {
    id: 3126, type: 'clipart', tags: 'people,wedding,bride,couble,silhouette', width: 386, height: 504, scale: 0.8, src: 'clipart/wedding_five.png'
}, {
    id: 3127, type: 'clipart', tags: 'people,sexy,girl,woman,tatoo,silhouette', width: 371, height: 507, scale: 0.8, src: 'clipart/sexy_girl.png'
}, {
    id: 3128, type: 'clipart', tags: 'flower,nature,blue', width: 402, height: 452, scale: 0.8, src: 'clipart/flower.png'
}, {
    id: 3129, type: 'clipart', tags: 'flower,nature,pink', width: 427, height: 480, scale: 0.8, src: 'clipart/flower_one.png'
}, {
    id: 3130, type: 'clipart', tags: 'lifestyle,drink,party,cocktail,silhouette', width: 277, height: 506, scale: 0.8, src: 'clipart/party_icon.png'
}, {
    id: 3131, type: 'clipart', tags: 'music,party,silhouette,celebration', width: 245, height: 485, scale: 0.8, src: 'clipart/party_icon_one.png'
}, {
    id: 3132, type: 'clipart', tags: 'decor,vase,flower,nature', width: 124, height: 510, scale: 0.8, src: 'clipart/decorative_vase.png'
}, {
    id: 3133, type: 'clipart', tags: 'decor,vase,flower,nature', width: 127, height: 519, scale: 0.8, src: 'clipart/decorative_vase_one.png'
}, {
    id: 3134, type: 'clipart', tags: 'decor,vase,flower,nature', width: 123, height: 505, scale: 0.8, src: 'clipart/decorative_vase_two.png'
}, {
    id: 3135, type: 'clipart', tags: 'paper,pen,stationery,writing', width: 411, height: 450, scale: 0.8, src: 'clipart/stationery_graphic.png'
}, {
    id: 3136, type: 'clipart', tags: 'pen,writing,stationery', width: 53, height: 521, scale: 0.8, src: 'clipart/stationery_graphic_one.png'
}, {
    id: 3137, type: 'clipart', tags: 'badge,halloween,lantern,pumpkin,scary', width: 492, height: 448, scale: 0.8, src: 'clipart/halloween_lantern.png'
}, {
    id: 3138, type: 'clipart', tags: 'vacation,bag,hat,suitcase,holiday,luggage', width: 327, height: 510, scale: 0.8, src: 'clipart/vacation.png'
}, {
    id: 3139, type: 'clipart', tags: 'music,accordion,silhouette,celebration', width: 487, height: 410, scale: 0.8, src: 'clipart/accordion.png'
}, {
    id: 3140, type: 'clipart', tags: 'people,action,sport,bike,bicycle,action,jump,silhouette', width: 590, height: 332, scale: 0.8, src: 'clipart/action_sport.png'
}, {
    id: 3141, type: 'clipart', tags: 'people,action,sport,bike,bicycle,action,jump,silhouette', width: 504, height: 415, scale: 0.8, src: 'clipart/action_sport_one.png'
}, {
    id: 3149, type: 'clipart', tags: 'palm,tree,nature,silhouette', width: 276, height: 468, scale: 0.8, src: 'clipart/palm_tree.png'
}, {
    id: 3150, type: 'clipart', tags: 'palm,tree,nature,silhouette', width: 500, height: 527, scale: 0.8, src: 'clipart/palm_tree_one.png'
}, {
    id: 3152, type: 'clipart', tags: 'moon,night,silhouette', width: 348, height: 510, scale: 0.8, src: 'clipart/moon.png'
}, {
    id: 3153, type: 'clipart', tags: 'people,bathtub,bath,tub,girl,lady,woman,silhouette', width: 599, height: 386, scale: 0.8, src: 'clipart/bathtub_girl.png'
}, {
    id: 3154, type: 'clipart', tags: 'people,bathtub,bath,tub,girl,lady,woman,silhouette', width: 452, height: 447, scale: 0.8, src: 'clipart/bathtub_girl_one.png'
}, {
    id: 3155, type: 'clipart', tags: 'bat,animal,night,nature,silhouette', width: 557, height: 408, scale: 0.8, src: 'clipart/bat.png'
}, {
    id: 3156, type: 'clipart', tags: 'bat,animal,night,nature,silhouette', width: 597, height: 438, scale: 0.8, src: 'clipart/bat_one.png'
}, {
    id: 3157, type: 'clipart', tags: 'people,beach,lady,girl,woman,hat,silhouette', width: 658, height: 435, scale: 0.8, src: 'clipart/beach_lady.png'
}, {
    id: 3158, type: 'clipart', tags: 'heart,love,broken', width: 431, height: 540, scale: 0.8, src: 'clipart/broken_heart.png'
}, {
    id: 3159, type: 'clipart', tags: 'christmas,cookie', width: 404, height: 554, scale: 0.8, src: 'clipart/christmas_cookies.png'
}, {
    id: 3160, type: 'clipart', tags: 'christmas,cookie,candy', width: 131, height: 524, scale: 0.8, src: 'clipart/christmas_cookies_one.png'
}, {
    id: 3161, type: 'clipart', tags: 'christmas,snow,snowman,winter,cold', width: 469, height: 512, scale: 0.8, src: 'clipart/snowman_one.png'
}, {
    id: 3162, type: 'clipart', tags: 'christmas,cookie', width: 412, height: 499, scale: 0.8, src: 'clipart/christmas_cookies_two.png'
}, {
    id: 3163, type: 'clipart', tags: 'christmas,gift,box,red', width: 540, height: 487, scale: 0.8, src: 'clipart/gift_box_two.png'
}, {
    id: 3164, type: 'clipart', tags: 'christmas,gift,box,blue', width: 567, height: 463, scale: 0.8, src: 'clipart/christmas_gift_box.png'
}, {
    id: 3165, type: 'clipart', tags: 'christmas,gift,box,red,love', width: 514, height: 457, scale: 0.8, src: 'clipart/christmas_gift_box_one.png'
}, {
    id: 3166, type: 'clipart', tags: 'christmas,gift,box', width: 632, height: 345, scale: 0.8, src: 'clipart/christmas_gift_box_two.png'
}, {
    id: 3167, type: 'clipart', tags: 'christmas,bells,gold', width: 532, height: 432, scale: 0.8, src: 'clipart/christmas_bell.png'
}, {
    id: 3168, type: 'clipart', tags: 'christmas,bells,silver', width: 532, height: 429, scale: 0.8, src: 'clipart/christmas_bell_one.png'
}, {
    id: 3169, type: 'clipart', tags: 'christmas,socks,gift', width: 368, height: 474, scale: 0.8, src: 'clipart/christmas_socks.png'
}, {
    id: 3170, type: 'clipart', tags: 'christmas,socks,gift', width: 364, height: 475, scale: 0.8, src: 'clipart/christmas_socks_one.png'
}, {
    id: 3171, type: 'clipart', tags: 'christmas,reindeer,animal,nature', width: 611, height: 431, scale: 0.8, src: 'clipart/christmas_reindeer.png'
}, {
    id: 3172, type: 'clipart', tags: 'christmas,sweet,candy,gift', width: 282, height: 496, scale: 0.8, src: 'clipart/christmas_candy.png'
}, {
    id: 3173, type: 'clipart', tags: 'candle,light,fire', width: 457, height: 492, scale: 0.8, src: 'clipart/candle.png'
}, {
    id: 3174, type: 'clipart', tags: 'christmas,lamp,light,flower', width: 255, height: 520, scale: 0.8, src: 'clipart/christmas_lamp.png'
}, {
    id: 3175, type: 'clipart', tags: 'christmas,reindeer,animal,ski,funny', width: 434, height: 509, scale: 0.8, src: 'clipart/christmas_reindeer_one.png'
}, {
    id: 3176, type: 'clipart', tags: 'circus,funny,silhouette', width: 421, height: 504, scale: 0.8, src: 'clipart/circus_artist.png'
}, {
    id: 3177, type: 'clipart', tags: 'circus,funny,silhouette', width: 727, height: 346, scale: 0.8, src: 'clipart/circus_artist_one.png'
}, {
    id: 3178, type: 'clipart', tags: 'circus,funny,silhouette', width: 732, height: 349, scale: 0.8, src: 'clipart/circus_artist_two.png'
}, {
    id: 3179, type: 'clipart', tags: 'circus,funny,silhouette', width: 740, height: 414, scale: 0.8, src: 'clipart/circus_artist_three.png'
}, {
    id: 3180, type: 'clipart', tags: 'circus,funny,silhouette', width: 354, height: 538, scale: 0.8, src: 'clipart/circus_four.png'
}, {
    id: 3181, type: 'clipart', tags: 'circus,funny,cards,silhouette', width: 508, height: 538, scale: 0.8, src: 'clipart/circus_artist_four.png'
}, {
    id: 3182, type: 'clipart', tags: 'circus,funny,silhouette', width: 601, height: 542, scale: 0.8, src: 'clipart/circus_artist_five.png'
}, {
    id: 3183, type: 'clipart', tags: 'lifestyle,cocktail,drink,party,blue', width: 236, height: 579, scale: 0.8, src: 'clipart/cocktail.png'
}, {
    id: 3190, type: 'clipart', tags: 'butterfly,insect,nature,blue', width: 556, height: 437, scale: 0.8, src: 'clipart/butterfly_seven.png'
}, {
    id: 3191, type: 'clipart', tags: 'butterfly,insect,nature', width: 529, height: 416, scale: 0.8, src: 'clipart/butterfly_eight.png'
}, {
    id: 3192, type: 'clipart', tags: 'cat,animal,funny,silhouette', width: 430, height: 393, scale: 0.8, src: 'clipart/cat.png'
}, {
    id: 3194, type: 'clipart', tags: 'people,girl,lady,party,woman,silhouette,sexy,hot,bar,club', width: 236, height: 587, scale: 0.8, src: 'clipart/drinking_girl.png'
}, {
    id: 3195, type: 'clipart', tags: 'people,girl,lady,party,woman,silhouette,sexy,hot,drinking,bar,club', width: 330, height: 555, scale: 0.8, src: 'clipart/drinking_girl_one.png'
}, {
    id: 3196, type: 'clipart', tags: 'people,girl,lady,party,woman,silhouette,sexy,hot,bar,club', width: 256, height: 567, scale: 0.8, src: 'clipart/drinking_girl_two.png'
}, {
    id: 3197, type: 'clipart', tags: 'people,girl,lady,party,woman,silhouette,sexy,hot,bar,club,drinking', width: 182, height: 535, scale: 0.8, src: 'clipart/drinking_girl_three.png'
}, {
    id: 3198, type: 'clipart', tags: 'lifestyle,drink,cocktail,red,bar,club', width: 316, height: 525, scale: 0.8, src: 'clipart/drink.png'
}, {
    id: 3199, type: 'clipart', tags: 'icecream,sunday', width: 334, height: 486, scale: 0.8, src: 'clipart/icecream.png'
}, {
    id: 3200, type: 'clipart', tags: 'drink,cocktail,bar,club', width: 263, height: 550, scale: 0.8, src: 'clipart/drink_one.png'
}, {
    id: 3201, type: 'clipart', tags: 'drink,wine,glass,bar,club', width: 205, height: 511, scale: 0.8, src: 'clipart/drink_two.png'
}, {
    id: 3202, type: 'clipart', tags: 'drink,wine,bottle,red,bar,club', width: 137, height: 535, scale: 0.8, src: 'clipart/drink_three.png'
}, {
    id: 3203, type: 'clipart', tags: 'people,cartoon,funny,lady,woman,girl,hot,sexy,silhouette', width: 219, height: 514, scale: 0.8, src: 'clipart/cartoon_character.png'
}, {
    id: 3205, type: 'clipart', tags: 'flower,basket,nature', width: 692, height: 380, scale: 0.8, src: 'clipart/flower_basket.png'
}, {
    id: 3206, type: 'clipart', tags: 'badge,love,letter,pink,heart,mail,pocket', width: 506, height: 435, scale: 0.8, src: 'clipart/love_letter.png'
}, {
    id: 3207, type: 'clipart', tags: 'love,heart', width: 516, height: 465, scale: 0.8, src: 'clipart/heart_four.png'
}, {
    id: 3208, type: 'clipart', tags: 'love,heart,silhouette', width: 587, height: 479, scale: 0.8, src: 'clipart/heart_five.png'
}, {
    id: 3209, type: 'clipart', tags: 'people,smoke,girl,lady,woman,hot,sexy', width: 283, height: 569, scale: 0.8, src: 'clipart/smoking_girl.png'
}, {
    id: 3210, type: 'clipart', tags: 'people,blush,girl,lady,woman,hot,sexy', width: 182, height: 572, scale: 0.8, src: 'clipart/blush_girl.png'
}, {
    id: 3211, type: 'clipart', tags: 'people,lipstick,girl,lady,woman,hot,sexy', width: 196, height: 551, scale: 0.8, src: 'clipart/lipstick_girl.png'
}, {
    id: 3212, type: 'clipart', tags: 'people,perfume,girl,lady,woman,hot,sexy', width: 177, height: 553, scale: 0.8, src: 'clipart/perfume_girl.png'
}, {
    id: 3213, type: 'clipart', tags: 'bat,animal,nature,silhouette', width: 631, height: 247, scale: 0.8, src: 'clipart/bat_two.png'
}, {
    id: 3214, type: 'clipart', tags: 'people,love,couple,hug,silhouette', width: 490, height: 477, scale: 0.8, src: 'clipart/valentine.png'
}, {
    id: 3215, type: 'clipart', tags: 'butterfly,nature,silhouette', width: 469, height: 368, scale: 0.8, src: 'clipart/valentine_butterfly.png'
}, {
    id: 3216, type: 'clipart', tags: 'butterfly,nature,silhouette', width: 388, height: 364, scale: 0.8, src: 'clipart/valentine_butterfly_one.png'
}, {
    id: 3217, type: 'clipart', tags: 'heart,flower,love', width: 411, height: 449, scale: 0.8, src: 'clipart/heart_flower.png'
}, {
    id: 3218, type: 'clipart', tags: 'heart,flower,love,tree', width: 390, height: 528, scale: 0.8, src: 'clipart/flower_tree.png'
}, {
    id: 3219, type: 'clipart', tags: 'heart,love,silhouette', width: 442, height: 415, scale: 0.8, src: 'clipart/heart_six.png'
}, {
    id: 3220, type: 'clipart', tags: 'heart,flower,tree,love', width: 228, height: 546, scale: 0.8, src: 'clipart/heart_tree.png'
}, {
    id: 3225, type: 'clipart', tags: 'people,jumping,sport,fun,silhouette', width: 377, height: 477, scale: 0.8, src: 'clipart/jumping.png'
}, {
    id: 3226, type: 'clipart', tags: 'people,jumping,girl,fun,silhouette', width: 297, height: 531, scale: 0.8, src: 'clipart/jumping_one.png'
}, {
    id: 3227, type: 'clipart', tags: 'people,jumping,sport,fun,silhouette', width: 257, height: 495, scale: 0.8, src: 'clipart/jumping_two.png'
}, {
    id: 3228, type: 'clipart', tags: 'people,jumping,girl,fun,silhouette', width: 473, height: 485, scale: 0.8, src: 'clipart/jumping_three.png'
}, {
    id: 3229, type: 'clipart', tags: 'people,jumping,sport,fun,silhouette', width: 337, height: 469, scale: 0.8, src: 'clipart/jumping_four.png'
}, {
    id: 3230, type: 'clipart', tags: 'cat,kitten,winking,funny,animal', width: 466, height: 467, scale: 0.8, src: 'clipart/kitten.png'
}, {
    id: 3234, type: 'clipart', tags: 'celebration,balloon,red', width: 289, height: 553, scale: 0.8, src: 'clipart/love_balloon_one.png'
}, {
    id: 3235, type: 'clipart', tags: 'celebration,balloon,red', width: 233, height: 542, scale: 0.8, src: 'clipart/love_balloon_two.png'
}, {
    id: 3236, type: 'clipart', tags: 'people,love,couple,hands,cartoon,funny,silhouette', width: 364, height: 489, scale: 0.8, src: 'clipart/love.png'
}, {
    id: 3238, type: 'clipart', tags: 'people,love,heart,cartoon,funny,silhouette', width: 599, height: 295, scale: 0.8, src: 'clipart/love_three.png'
}, {
    id: 3239, type: 'clipart', tags: 'people,love,heart,cartoon,funny,silhouette', width: 560, height: 454, scale: 0.8, src: 'clipart/love_four.png'
}, {
    id: 3240, type: 'clipart', tags: 'people,love,heart,flower,cartoon,funny,silhouette', width: 281, height: 545, scale: 0.8, src: 'clipart/love_flower.png'
}, {
    id: 3241, type: 'clipart', tags: 'people,love,heart,cartoon,funny,silhouette', width: 622, height: 251, scale: 0.8, src: 'clipart/love_five.png'
}, {
    id: 3242, type: 'clipart', tags: 'people,love,heart,cute,smile,cartoon,funny,silhouette', width: 587, height: 424, scale: 0.8, src: 'clipart/cute_heart.png'
}, {
    id: 3243, type: 'clipart', tags: 'people,love,music,flower,cartoon,funny,silhouette', width: 701, height: 301, scale: 0.8, src: 'clipart/love_music.png'
}, {
    id: 3244, type: 'clipart', tags: 'people,love,balloon,cartoon,cute,silhouette', width: 194, height: 535, scale: 0.8, src: 'clipart/love_balloon_three.png'
}, {
    id: 3245, type: 'clipart', tags: 'people,love,heart,cartoon,cute,silhouette', width: 447, height: 482, scale: 0.8, src: 'clipart/love_heart.png'
}, {
    id: 3246, type: 'clipart', tags: 'people,love,heart,cartoon,cute,silhouette', width: 140, height: 538, scale: 0.8, src: 'clipart/love_heart_one.png'
}, {
    id: 3247, type: 'clipart', tags: 'badge,note,sticky', width: 476, height: 341, scale: 0.8, src: 'clipart/sticky_note.png'
}, {
    id: 3251, type: 'clipart', tags: 'music,silhouette,celebration', width: 467, height: 358, scale: 0.8, src: 'clipart/music.png'
}, {
    id: 3252, type: 'clipart', tags: 'music,silhouette,celebration', width: 710, height: 302, scale: 0.8, src: 'clipart/music_one.png'
}, {
    id: 3258, type: 'clipart', tags: 'nature,butterfly', width: 469, height: 416, scale: 0.7, src: 'clipart/butterfly-nine.png'
}, {
    id: 3259, type: 'clipart', tags: 'nature,flower', width: 612, height: 419, scale: 0.7, src: 'clipart/flower-four.png'
}, {
    id: 3260, type: 'clipart', tags: 'nature,flower', width: 663, height: 572, scale: 0.7, src: 'clipart/flower_five.png'
}, {
    id: 3263, type: 'clipart', tags: 'music,silhouette,celebration', width: 226, height: 576, scale: 0.7, src: 'clipart/music_note_four.png'
}, {
    id: 3264, type: 'clipart', tags: 'nature,blossom,flower', width: 524, height: 552, scale: 0.7, src: 'clipart/blossom.png'
}, {
    id: 3265, type: 'clipart', tags: 'bird,animal,nature,silhouette', width: 566, height: 435, scale: 0.7, src: 'clipart/bird_shape.png'
}, {
    id: 3266, type: 'clipart', tags: 'flower,nature', width: 337, height: 576, scale: 0.7, src: 'clipart/flourish_banner.png'
}, {
    id: 3267, type: 'clipart', tags: 'badge,lable,sticker,paint,roller', width: 689, height: 190, scale: 0.7, src: 'clipart/coloured_paint_roller.png'
}, {
    id: 3268, type: 'clipart', tags: 'badge,lable,sticker,paint,roller', width: 723, height: 252, scale: 0.7, src: 'clipart/coloured_paint_roller_one.png'
}, {
    id: 3269, type: 'clipart', tags: 'leaf,leaves,green,tree,nature', width: 372, height: 474, scale: 0.7, src: 'clipart/leaf_twig.png'
}, {
    id: 3270, type: 'clipart', tags: 'flower,nature', width: 219, height: 559, scale: 0.7, src: 'clipart/flower_branch.png'
}, {
    id: 3271, type: 'clipart', tags: 'globe,didgital,earth', width: 586, height: 551, scale: 0.7, src: 'clipart/digital_globe.png'
}, {
    id: 3272, type: 'clipart', tags: 'butterfly,nature', width: 522, height: 467, scale: 0.7, src: 'clipart/butterfly_nine.png'
}, {
    id: 3273, type: 'clipart', tags: 'butterfly,nature', width: 552, height: 400, scale: 0.7, src: 'clipart/butterfly_ten.png'
}, {
    id: 3274, type: 'clipart', tags: 'bamboo,tree,nature', width: 384, height: 545, scale: 0.7, src: 'clipart/bamboo_tree.png'
}, {
    id: 3275, type: 'clipart', tags: 'kid,happy,boy,silhouette,people', width: 316, height: 513, scale: 0.7, src: 'clipart/happy_kid.png'
}, {
    id: 3276, type: 'clipart', tags: 'abstract', width: 474, height: 498, scale: 0.7, src: 'clipart/colourful_abstract.png'
}, {
    id: 3277, type: 'clipart', tags: 'christmas,gift,box,celebration', width: 532, height: 548, scale: 0.7, src: 'clipart/christmas_gift_box_three.png'
}, {
    id: 3280, type: 'clipart', tags: 'girl,people,cartoon', width: 541, height: 529, scale: 0.7, src: 'clipart/betty_boop.png'
}, {
    id: 3281, type: 'clipart', tags: 'girl,people,cartoon', width: 366, height: 541, scale: 0.7, src: 'clipart/betty_boop_one.png'
}, {
    id: 3282, type: 'clipart', tags: 'girl,people,cartoon', width: 443, height: 549, scale: 0.7, src: 'clipart/betty_boop_two.png'
}, {
    id: 3283, type: 'clipart', tags: 'girl,people,cartoon', width: 487, height: 539, scale: 0.7, src: 'clipart/betty_boop_three.png'
}, {
    id: 3284, type: 'clipart', tags: 'cartoon,boy,people', width: 334, height: 531, scale: 0.7, src: 'clipart/cartoon_boy.png'
}, {
    id: 3285, type: 'clipart', tags: 'cartoon,boy,people', width: 470, height: 541, scale: 0.7, src: 'clipart/cartoon_one.png'
}, {
    id: 3286, type: 'clipart', tags: 'cartoon,boy,people', width: 302, height: 544, scale: 0.7, src: 'clipart/cartoon_boy_one.png'
}, {
    id: 3287, type: 'clipart', tags: 'cartoon,boy,people', width: 373, height: 553, scale: 0.7, src: 'clipart/cartoon_boy_two.png'
}, {
    id: 3288, type: 'clipart', tags: 'cartoon,boy,people', width: 290, height: 534, scale: 0.7, src: 'clipart/cartoon_boy_three.png'
}, {
    id: 3289, type: 'clipart', tags: 'cartoon,boy,people', width: 278, height: 536, scale: 0.7, src: 'clipart/cartoon_boy_four.png'
}, {
    id: 3290, type: 'clipart', tags: 'cartoon,boy,people', width: 361, height: 557, scale: 0.7, src: 'clipart/cartoon_boy_five.png'
}, {
    id: 3291, type: 'clipart', tags: 'cartoon,boy,people', width: 277, height: 551, scale: 0.7, src: 'clipart/cartoon_boy_six.png'
}, {
    id: 3292, type: 'clipart', tags: 'cartoon,boy,people', width: 346, height: 562, scale: 0.7, src: 'clipart/cartoon_boy_seven.png'
}, {
    id: 3293, type: 'clipart', tags: 'cartoon,boy,people', width: 291, height: 556, scale: 0.7, src: 'clipart/cartoon_boy_eight.png'
}, {
    id: 3296, type: 'clipart', tags: 'cat,cartoon,animal,nature', width: 349, height: 528, scale: 0.7, src: 'clipart/cat_cartoon.png'
}, {
    id: 3297, type: 'clipart', tags: 'cat,cartoon,animal,nature', width: 260, height: 550, scale: 0.7, src: 'clipart/cat_cartoon_one.png'
}, {
    id: 3299, type: 'clipart', tags: 'cartoon,character,funny', width: 489, height: 473, scale: 0.7, src: 'clipart/cartoon_character_four.png'
}, {
    id: 3300, type: 'clipart', tags: 'apple,fruit,nature', width: 434, height: 502, scale: 0.7, src: 'clipart/apple.png'
}, {
    id: 3301, type: 'clipart', tags: 'tree,nature,plant', width: 472, height: 539, scale: 0.7, src: 'clipart/tree.png'
}, {
    id: 3304, type: 'clipart', tags: 'tree,plant,christmas,celebration', width: 456, height: 523, scale: 0.7, src: 'clipart/christmas_tree_one.png'
}, {
    id: 3305, type: 'clipart', tags: 'stars,star,christmas,celebration,christmas stars', width: 710, height: 263, scale: 0.7, src: 'clipart/christmas_stars.png'
}, {
    id: 3306, type: 'clipart', tags: 'santa,christmas,celebration', width: 319, height: 508, scale: 0.7, src: 'clipart/santa_one.png'
}, {
    id: 3307, type: 'clipart', tags: 'dragon,christmas,christmas dragon,celebration', width: 599, height: 411, scale: 0.7, src: 'clipart/christmas_dragon.png'
}, {
    id: 3308, type: 'clipart', tags: 'christmas,celebration', width: 743, height: 330, scale: 0.7, src: 'clipart/christmas.png'
}, {
    id: 3309, type: 'clipart', tags: 'christmas,celebration,sleigh', width: 680, height: 348, scale: 0.7, src: 'clipart/christmas_sleigh.png'
}, {
    id: 3310, type: 'clipart', tags: 'christmas,celebration,box,gift box,gift', width: 559, height: 451, scale: 0.7, src: 'clipart/christmas_gift_box_four.png'
}, {
    id: 3311, type: 'clipart', tags: 'christmas,celebration,box,santa', width: 564, height: 515, scale: 0.7, src: 'clipart/christmas_santa.png'
}, {
    id: 3313, type: 'clipart', tags: 'christmas,celebration,tree,plant,christmas tree', width: 357, height: 546, scale: 0.7, src: 'clipart/christmas_tree_two.png'
}, {
    id: 3314, type: 'clipart', tags: 'christmas,celebration,star,christmas stars', width: 738, height: 486, scale: 0.7, src: 'clipart/christmas_stars_one.png'
}, {
    id: 3315, type: 'clipart', tags: 'christmas,celebration,tree,plant,green,christmas tree', width: 339, height: 509, scale: 0.7, src: 'clipart/christmas_tree_three.png'
}, {
    id: 3316, type: 'clipart', tags: 'christmas,celebration,tree,plant,green,christmas tree', width: 414, height: 494, scale: 0.7, src: 'clipart/christmas_tree_four.png'
}, {
    id: 3317, type: 'clipart', tags: 'christmas,celebration,tree,plant,green,christmas tree', width: 329, height: 515, scale: 0.7, src: 'clipart/christmas_tree_five.png'
}, {
    id: 3318, type: 'clipart', tags: 'christmas,celebration,tree,plant,green,christmas tree', width: 410, height: 547, scale: 0.7, src: 'clipart/christmas_tree_six.png'
}, {
    id: 3319, type: 'clipart', tags: 'christmas,celebration,tree,plant,green,christmas tree', width: 365, height: 540, scale: 0.7, src: 'clipart/christmas_tree_seven.png'
}, {
    id: 3320, type: 'clipart', tags: 'christmas,celebration,light,christmas light', width: 754, height: 340, scale: 0.7, src: 'clipart/christmas_light_one.png'
}, {
    id: 3321, type: 'clipart', tags: 'emotion,funny,colorful', width: 526, height: 523, scale: 0.7, src: 'clipart/colourful_emotion_one.png'
}, {
    id: 3322, type: 'clipart', tags: 'bird,nature,animal,cute', width: 460, height: 516, scale: 0.7, src: 'clipart/cute_bird_one.png'
}, {
    id: 3323, type: 'clipart', tags: 'bird,nature,animal,cute', width: 524, height: 549, scale: 0.7, src: 'clipart/cute_bird_two.png'
}, {
    id: 3324, type: 'clipart', tags: 'bird,nature,animal,cute', width: 524, height: 534, scale: 0.7, src: 'clipart/cute_bird_three.png'
}, {
    id: 3325, type: 'clipart', tags: 'bird,nature,animal,cute', width: 524, height: 496, scale: 0.7, src: 'clipart/cute_bird_four.png'
}, {
    id: 3326, type: 'clipart', tags: 'badge,doodle', width: 733, height: 331, scale: 0.7, src: 'clipart/cute_doodle.png'
}, {
    id: 3327, type: 'clipart', tags: 'people,girl,doodle', width: 353, height: 568, scale: 0.7, src: 'clipart/cute_doodle_two.png'
}, {
    id: 3330, type: 'clipart', tags: 'weather,nature,funny,sun', width: 499, height: 499, scale: 0.7, src: 'clipart/funny_sun.png'
}, {
    id: 3332, type: 'clipart', tags: 'happy,man,people', width: 285, height: 541, scale: 0.7, src: 'clipart/happy_man.png'
}, {
    id: 3333, type: 'clipart', tags: 'ballerina,girl,people,dance', width: 285, height: 541, scale: 0.7, src: 'clipart/ballerinas_one.png'
}, {
    id: 3334, type: 'clipart', tags: 'people,girl,dance,party', width: 259, height: 550, scale: 0.7, src: 'clipart/party_girl.png'
}, {
    id: 3335, type: 'clipart', tags: 'cake,birthday,celebration', width: 415, height: 508, scale: 0.7, src: 'clipart/birthday_cake_three.png'
}, {
    id: 3336, type: 'clipart', tags: 'cake,birthday,celebration,girl,people,party', width: 284, height: 569, scale: 0.7, src: 'clipart/birthday_girl.png'
}, {
    id: 3337, type: 'clipart', tags: 'birthday,frame,badge', width: 477, height: 487, scale: 0.7, src: 'clipart/birthday_frame.png'
}, {
    id: 3338, type: 'clipart', tags: 'birthday,frame,badge', width: 490, height: 501, scale: 0.7, src: 'clipart/birthday_frame_one.png'
}, {
    id: 3339, type: 'clipart', tags: 'birthday,frame,badge', width: 462, height: 473, scale: 0.7, src: 'clipart/birthday_frame_two.png'
}, {
    id: 3340, type: 'clipart', tags: 'birthday,frame,badge', width: 473, height: 473, scale: 0.7, src: 'clipart/birthday_frame_three.png'
}, {
    id: 3341, type: 'clipart', tags: 'birthday,frame,badge', width: 519, height: 519, scale: 0.7, src: 'clipart/birthday_frame_four.png'
}, {
    id: 3342, type: 'clipart', tags: 'vase,pot,nature,flower', width: 208, height: 545, scale: 0.7, src: 'clipart/daisy_vase.png'
}, {
    id: 3343, type: 'clipart', tags: 'family,people,silhouette', width: 579, height: 504, scale: 0.7, src: 'clipart/family_graphic.png'
}, {
    id: 3344, type: 'clipart', tags: 'gift,box', width: 713, height: 466, scale: 0.7, src: 'clipart/gift_icon.png'
}, {
    id: 3345, type: 'clipart', tags: 'gift,box,girl,present,people', width: 320, height: 558, scale: 0.7, src: 'clipart/girl_with_present.png'
}, {
    id: 3346, type: 'clipart', tags: 'boy,kid,badge', width: 373, height: 527, scale: 0.7, src: 'clipart/kids.png'
}, {
    id: 3347, type: 'clipart', tags: 'boy,kid,badge', width: 678, height: 437, scale: 0.7, src: 'clipart/kids_one.png'
}, {
    id: 3348, type: 'clipart', tags: 'boy,kid,badge', width: 676, height: 413, scale: 0.7, src: 'clipart/kids_two.png'
}, {
    id: 3349, type: 'clipart', tags: 'boy,kid,badge', width: 617, height: 493, scale: 0.7, src: 'clipart/kids_three.png'
}, {
    id: 3350, type: 'clipart', tags: 'boy,kid,badge', width: 372, height: 531, scale: 0.7, src: 'clipart/kids_four.png'
}, {
    id: 3351, type: 'clipart', tags: 'boy,kid,badge', width: 692, height: 448, scale: 0.7, src: 'clipart/kids_five.png'
}, {
    id: 3352, type: 'clipart', tags: 'love', width: 687, height: 503, scale: 0.7, src: 'clipart/love_design.png'
}, {
    id: 3353, type: 'clipart', tags: 'girl,people,silhouette', width: 333, height: 488, scale: 0.7, src: 'clipart/people_drawing.png'
}, {
    id: 3354, type: 'clipart', tags: 'santa,christmas,celebration', width: 575, height: 528, scale: 0.7, src: 'clipart/santa_two.png'
}, {
    id: 3355, type: 'clipart', tags: 'girl,people,badge', width: 420, height: 534, scale: 0.7, src: 'clipart/girl_with_board.png'
}, {
    id: 3356, type: 'clipart', tags: 'star,birthday,celebration', width: 394, height: 261, scale: 0.7, src: 'clipart/birthday_graphic_one.png'
}, {
    id: 3357, type: 'clipart', tags: 'star,birthday,celebration', width: 472, height: 475, scale: 0.7, src: 'clipart/birthday_graphic_two.png'
}, {
    id: 3358, type: 'clipart', tags: 'people,character,guevara,man,silhouette', width: 629, height: 459, scale: 0.7, src: 'clipart/guevara.png'
}, {
    id: 3359, type: 'clipart', tags: 'cake,love,birthday', width: 597, height: 512, scale: 0.7, src: 'clipart/lovely_cake.png'
}, {
    id: 3362, type: 'clipart', tags: 'tree,nature,love', width: 480, height: 522, scale: 0.7, src: 'clipart/tree_cartoon.png'
}, {
    id: 3364, type: 'clipart', tags: 'santa,christmas,celebration', width: 533, height: 472, scale: 0.7, src: 'clipart/santa_three.png'
}, {
    id: 3366, type: 'clipart', tags: 'christmas,celebration,badge', width: 561, height: 474, scale: 0.7, src: 'clipart/christmas_design_one.png'
}, {
    id: 3367, type: 'clipart', tags: 'christmas,celebration', width: 720, height: 233, scale: 0.7, src: 'clipart/christmas_design_two.png'
}, {
    id: 3368, type: 'clipart', tags: 'christmas,celebration', width: 728, height: 271, scale: 0.7, src: 'clipart/christmas_design_four.png'
}, {
    id: 3369, type: 'clipart', tags: 'christmas,celebration,gift,box', width: 243, height: 535, scale: 0.7, src: 'clipart/christmas_design_five.png'
}, {
    id: 3370, type: 'clipart', tags: 'christmas,celebration,badge', width: 667, height: 401, scale: 0.7, src: 'clipart/christmas_design_six.png'
}, {
    id: 3371, type: 'clipart', tags: 'santa,christmas,celebration,sleigh', width: 708, height: 359, scale: 0.7, src: 'clipart/santa_sleigh.png'
}, {
    id: 3372, type: 'clipart', tags: 'cake,birthday', width: 464, height: 624, scale: 0.7, src: 'clipart/romantic_cake.png'
}, {
    id: 3373, type: 'clipart', tags: 'girl,people,dance,ballerina', width: 456, height: 526, scale: 0.7, src: 'clipart/ballerina_two.png'
}, {
    id: 3374, type: 'clipart', tags: 'girl,people,silhouette', width: 223, height: 524, scale: 0.7, src: 'clipart/people_drawing_two.png'
}, {
    id: 3375, type: 'clipart', tags: 'boy,people,silhouette', width: 286, height: 517, scale: 0.7, src: 'clipart/people_drawing_four.png'
}, {
    id: 3376, type: 'clipart', tags: 'boy,people,silhouette', width: 346, height: 546, scale: 0.7, src: 'clipart/reading_kid.png'
}, {
    id: 3377, type: 'clipart', tags: 'santa,christmas,celebration', width: 440, height: 529, scale: 0.7, src: 'clipart/fat_santa.png'
}, {
    id: 3379, type: 'clipart', tags: 'man,silhouette,people,party', width: 330, height: 544, scale: 0.7, src: 'clipart/party_man.png'
}, {
    id: 3380, type: 'clipart', tags: 'music,furniture,gramophone', width: 482, height: 499, scale: 0.7, src: 'clipart/antique_furniture.png'
}, {
    id: 3381, type: 'clipart', tags: 'apple,fruit,nature', width: 543, height: 479, scale: 0.7, src: 'clipart/apple_design.png'
}, {
    id: 3382, type: 'clipart', tags: 'snowman,christmas,celebration', width: 247, height: 511, scale: 0.7, src: 'clipart/beautiful_christmas.png'
}, {
    id: 3383, type: 'clipart', tags: 'giftbox,christmas,celebration', width: 618, height: 572, scale: 0.7, src: 'clipart/beautiful_christmas_design.png'
}, {
    id: 3384, type: 'clipart', tags: 'socks,christmas,celebration', width: 358, height: 507, scale: 0.7, src: 'clipart/beautiful_christmas_greeting_card.png'
}, {
    id: 3385, type: 'clipart', tags: 'animal,christmas,celebration', width: 367, height: 474, scale: 0.7, src: 'clipart/beautiful_christmas_greeting_card_one.png'
}, {
    id: 3386, type: 'clipart', tags: 'santa,christmas,celebration', width: 497, height: 455, scale: 0.7, src: 'clipart/beautiful_christmas_greeting_card_Two.png'
}, {
    id: 3387, type: 'clipart', tags: 'house,christmas,celebration', width: 471, height: 527, scale: 0.7, src: 'clipart/beautiful_christmas_greeting_card_three.png'
}, {
    id: 3388, type: 'clipart', tags: 'cat,animal,silhouette', width: 543, height: 471, scale: 0.7, src: 'clipart/black_cat.png'
}, {
    id: 3389, type: 'clipart', tags: 'bride,wedding,people', width: 412, height: 473, scale: 0.7, src: 'clipart/bride_silhouette.png'
}, {
    id: 3390, type: 'clipart', tags: 'christmas,celebration,nature', width: 566, height: 502, scale: 0.7, src: 'clipart/christmas_decorative.png'
}, {
    id: 3391, type: 'clipart', tags: 'christmas,celebration,snowman', width: 606, height: 439, scale: 0.7, src: 'clipart/christmas_notes.png'
}, {
    id: 3392, type: 'clipart', tags: 'lamp,furniture', width: 95, height: 538, scale: 0.7, src: 'clipart/Lamp.png'
}, {
    id: 3393, type: 'clipart', tags: 'girl,people,mirror', width: 338, height: 514, scale: 0.7, src: 'clipart/girl_mirror.png'
}, {
    id: 3394, type: 'clipart', tags: 'fashion,people,girl', width: 241, height: 543, scale: 0.7, src: 'clipart/fashion_girl_two.png'
}, {
    id: 3395, type: 'clipart', tags: 'man,people,funny', width: 250, height: 538, scale: 0.7, src: 'clipart/cartoon_man.png'
}, {
    id: 3396, type: 'clipart', tags: 'snowman,christmas,celebration', width: 403, height: 472, scale: 0.7, src: 'clipart/snowman_three.png'
}, {
    id: 3397, type: 'clipart', tags: 'woman,face,people,silhouette', width: 327, height: 520, scale: 0.7, src: 'clipart/woman.png'
}, {
    id: 3398, type: 'clipart', tags: 'bride,wedding,woman', width: 379, height: 511, scale: 0.7, src: 'clipart/wedding_six.png'
}, {
    id: 3399, type: 'clipart', tags: 'love,bird,nature,heart', width: 636, height: 485, scale: 0.7, src: 'clipart/love_birds.png'
}, {
    id: 3400, type: 'clipart', tags: 'lady,woman,people,face,silhouette', width: 455, height: 546, scale: 0.7, src: 'clipart/lady.png'
}, {
    id: 3401, type: 'clipart', tags: 'lady,woman,people,face,silhouette', width: 296, height: 541, scale: 0.7, src: 'clipart/lady_one.png'
}, {
    id: 3402, type: 'clipart', tags: 'birthday,badge,animal,celebration', width: 435, height: 475, scale: 0.7, src: 'clipart/child_birthday.png'
}, {
    id: 3403, type: 'clipart', tags: 'santa,celebration,christmas,badge', width: 366, height: 489, scale: 0.7, src: 'clipart/santa_five.png'
}, {
    id: 3404, type: 'clipart', tags: 'love,people', width: 586, height: 416, scale: 0.7, src: 'clipart/vintage_love.png'
}, {
    id: 3405, type: 'clipart', tags: 'love,people,couple,marriage,wedding', width: 399, height: 457, scale: 0.7, src: 'clipart/vintage_love_one.png'
}, {
    id: 3406, type: 'clipart', tags: 'girl,people', width: 398, height: 468, scale: 0.7, src: 'clipart/yoga.png'
}, {
    id: 3407, type: 'clipart', tags: 'cow,animal,funny', width: 534, height: 490, scale: 0.7, src: 'clipart/cartoon_cow.png'
}, {
    id: 3408, type: 'clipart', tags: 'nature,flower,butterfly', width: 310, height: 492, scale: 0.7, src: 'clipart/floral_greeting.png'
}, {
    id: 3409, type: 'clipart', tags: 'girl,people,face,lady', width: 248, height: 555, scale: 0.7, src: 'clipart/handpainted_woman.png'
}, {
    id: 3410, type: 'clipart', tags: 'girl,people,face,lady', width: 434, height: 504, scale: 0.7, src: 'clipart/lady_two.png'
}, {
    id: 3411, type: 'clipart', tags: 'girl,people,face,lady', width: 414, height: 555, scale: 0.7, src: 'clipart/lady_three.png'
}, {
    id: 3412, type: 'clipart', tags: 'floral,nature', width: 599, height: 364, scale: 0.7, src: 'clipart/floral_one.png'
}, {
    id: 3413, type: 'clipart', tags: 'floral,nature,flower,butterfly', width: 685, height: 371, scale: 0.7, src: 'clipart/floral_two.png'
}, {
    id: 3414, type: 'clipart', tags: 'keepcalm,crown,silhouette', width: 494, height: 457, scale: 0.6, src: 'clipart/keep_calm.png'
}, {
    id: 3415, type: 'clipart', tags: 'moustache,silhouette', width: 481, height: 237, scale: 0.6, src: 'clipart/moustache_one.png'
}, {
    id: 3416, type: 'clipart', tags: 'moustache,silhouette', width: 469, height: 274, scale: 0.6, src: 'clipart/moustache_two.png'
}, {
    id: 3417, type: 'clipart', tags: 'moustache,silhouette', width: 503, height: 99, scale: 0.6, src: 'clipart/moustache_three.png'
}, {
    id: 3418, type: 'clipart', tags: 'moustache,silhouette', width: 481, height: 116, scale: 0.6, src: 'clipart/moustache_four.png'
}, {
    id: 3419, type: 'clipart', tags: 'moustache,silhouette', width: 343, height: 301, scale: 0.6, src: 'clipart/moustache_five.png'
}, {
    id: 3420, type: 'clipart', tags: 'moustache,silhouette', width: 545, height: 120, scale: 0.6, src: 'clipart/moustache_six.png'
}, {
    id: 3421, type: 'clipart', tags: 'moustache,silhouette', width: 248, height: 392, scale: 0.6, src: 'clipart/moustache_seven.png'
}, {
    id: 3422, type: 'clipart', tags: 'moustache,silhouette', width: 472, height: 152, scale: 0.6, src: 'clipart/moustache_eight.png'
}, {
    id: 3423, type: 'clipart', tags: 'moustache,silhouette', width: 410, height: 334, scale: 0.6, src: 'clipart/moustache_nine.png'
}, {
    id: 3424, type: 'clipart', tags: 'moustache,silhouette', width: 545, height: 105, scale: 0.6, src: 'clipart/moustache_ten.png'
}, {
    id: 4000, type: 'text', tags: 'birthday', title: 'Know the true value of time;\n snatch, seize, and enjoy every moment of it.\n No idleness, no delay, no procrastination;\n never put off till tomorrow,\n what you can do today.'
}, {
    id: 4001, type: 'text', tags: 'birthday', title: 'Every year on your birthday, you get a chance to start new. \n-<NAME>'
}, {
    id: 4002, type: 'text', tags: 'birthday', title: "Presents don't really mean much to me. I don't want to sound mawkish, but - it was the realization that I have a great many people in my life who really love me, and who I really love."
}, {
    id: 4003, type: 'text', tags: 'birthday', title: "It was on my fifth birthday that Papa put his hand on my shoulder and said, 'Remember, my son, if you ever need a helping hand, you'll find one at the end of your arm.'"
}, {
    id: 4004, type: 'text', tags: 'birthday', title: "About astrology and palmistry: they are good because they make people vivid and full of possibilities. They are communism at its best. Everybody has a birthday and almost everybody has a palm."
}, {
    id: 4005, type: 'text', tags: 'birthday', title: 'Let us celebrate the occasion with wine and sweet words.'
}, {
    id: 4100, type: 'text', tags: 'love', title: 'A kiss is a lovely trick designed by nature to stop speech when words become superfluous.'
}, {
    id: 4200, type: 'text', tags: 'life', title: 'Throughout life people will make you mad, disrespect you and treat you bad. Let God deal with the things they do, cause hate in your heart will consume you too.'
}, {
    id: 4300, type: 'text', tags: 'wisdom', title: 'A wise man is superior to any insults which can be put upon him, and the best reply to unseemly behavior is patience and moderation. '
}, {
    id: 4400, type: 'text', tags: 'humor', title: 'My computer beat me at checkers, but I sure beat it at kickboxing.'
}];

var propertySettings = [{
    type: 'shadow', grouped: true, items: [{
        type: 'ShadowColor', title: 'Color', data: { type: 'color', range: 'basic', transparent: true }
    }, {
        type: 'ShadowBlur', title: 'Blur', data: { type: 'range', min: 0, max: 40, step: 1, start: 4, tip: 'Change the shadow blurriness by moving the slider' }
    }, {
        type: 'ShadowOffset', title: 'Offst', data: { type: 'double-range', min: -50, max: 50, step: 1, start: 4, tip: 'Change showdow x, y offset by moving the sliders' }
    }, {
        type: 'ShadowOpacity', title: 'Opacity', data: { type: 'range', min: 0, max: 1, step: 0.1, start: 0.4, tip: 'Change the shadow opacity by moving the slider' }
    }]
}, {
    type: 'Filter', data: [{
        id: 1, title: 'None', value: { name: 'none' },
    }, {
        id: 2, title: 'Vintage', value: { name: 'vintage' },
    }, {
        id: 3, title: 'Lomo', value: { name: 'lomo' }
    }, {
        id: 4, title: 'Clarity', value: { name: 'clarity' }
    }, {
        id: 5, title: 'Sin City', value: { name: 'sinCity' }
    }, {
        id: 6, title: 'Sunrise', value: { name: 'sunrise' }
    }, {
        id: 7, title: 'Cross Process', value: { name: 'crossProcess' }
    }, {
        id: 8, title: 'Orange Peel', value: { name: 'orangePeel' }
    }, {
        id: 9, title: 'Love', value: { name: 'love' }
    }, {
        id: 10, title: 'Grungy', value: { name: 'grungy' }
    }, {
        id: 11, title: 'Jarques', value: { name: 'jarques' }
    }, {
        id: 12, title: 'Pinhole', value: { name: 'pinhole' }
    }, {
        id: 13, title: 'Old Boot', value: { name: 'oldBoot' }
    }, {
        id: 14, title: 'Glowing Sun', value: { name: 'glowingSun' }
    }, {
        id: 15, title: 'Hazy Days', value: { name: 'hazyDays' }
    }, {
        id: 16, title: 'Her Majesty', value: { name: 'herMajesty' }
    }, {
        id: 17, title: 'Nostalgia', value: { name: 'nostalgia' }
    }, {
        id: 18, title: 'Hemingway', value: { name: 'hemingway' }
    }, {
        id: 19, title: 'Concentrate', value: { name: 'concentrate' }
    }]
}, {
    type: 'frameGroup', items: [{
        type: 'Frame', title: 'Simple', data: [{
            id: 1, title: 'No Frame', value: null
        }, {
            id: 2, title: 'Border Narrow', value: 'frame/plain_narrow.png'
        }, {
            id: 3, title: 'Border Medium', value: 'frame/plain_medium.png'
        }, {
            id: 4, title: 'Border Thick', value: 'frame/plain_thick.png'
        }, {
            id: 5, title: 'Shadow Frame', value: 'frame/shadow_white.png'
        }, {
            id: 6, title: 'Shadow Frame Round', value: 'frame/shadow_white_round.png'
        }, {
            id: 7, title: 'Shadow Frame Thick', value: 'frame/shadow_white_medium.png'
        }, {
            id: 8, title: 'Shadow Frame Thick Round', value: 'frame/shadow_white_round_medium.png'
        }]
    }, {
        type: 'Frame', title: 'Grunge', data: [{
            id: 1, title: 'Grunge', value: 'frame/grunge.png'
        }]
    }, {
        type: 'Frame', title: 'Real', data: [{
            id: 1, title: 'Photo Border', value: 'frame/photo_border.png'
        }, {
            id: 2, title: 'Letter Banner', value: 'frame/letter_banner.png'
        }]
    }, {
        type: 'FrameFillColor', title: 'Set Color', data: { type: 'color', range: 'basic', transparent: true }
    }]
}, {
    type: 'style', items: [{
        type: 'TextFill', title: 'Text Fill', data: { type: 'color' }
    }, {
        type: 'FontSize', title: 'Text Size', data: { type: 'range', min: 8, max: 120, step: 1, start: 28, tip: 'Change the font size by moving the slider to left and right:' }
    }, {
        type: 'TextAlign', title: 'Text Align', data: [{
            id: 1, title: 'Left', value: 'left'
        }, {
            id: 2, title: 'Center', value: 'center'
        }, {
            id: 3, title: 'Right', value: 'right' 
        }]
    }, {
        type: 'LineHeight', title: 'Line Height', data: { type: 'range', min: 0.6, max: 4, step: 0.1, start: 2, tip: 'Change the line height by moving the slider to left and right:' }
    }]
}, {
    type: 'border', items: [{
        type: 'BorderWidth', title: 'Border Width', data: { type: 'range', min: 0, max: 100, step: 10, start: 0, tip: 'Move the slider ro <strong>resize the border width</strong>:' }
    }, {
        type: 'BorderColor', title: 'Border Color', data: { type: 'color' }
    }, {
        type: 'CornerRadius', title: 'Corner Radius', data: { type: 'range', min: 0, max: 800, step: 10, start: 0, tip: 'Change the roundness of the border by moving the slider' }
    }]
}, {
    type: 'stroke', items: [{
        type: 'StrokeWidth', title: 'Stroke Width', data: { type: 'range', min: 0, max: 40, step: 1, start: 0, tip: 'Change text stroke width by moving the slider' }
    }, {
        type: 'StrokeColor', title: 'Stroke Color', data: { type: 'color' }
    }]
}, {
    type: 'fontFamilyGroup', items: [{
        type: 'FontFamily', title: 'Sans Serif', data: [{
            id: 1, title: 'Open Sans', value: 'Open Sans'
        }, {
            id: 2, title: 'Oswald', value: 'Oswald'
        }, {
            id: 3, title: 'Ubuntu', value: 'Ubuntu'
        }, {
            id: 4, title: 'Roboto Condensed', value: 'Roboto Condensed'
        }, {
            id: 5, title: 'Nunito', value: 'Nunito'
        }, {
            id: 6, title: 'Raleway', value: 'Raleway'
        }, {
            id: 7, title: 'Cuprum', value: 'Cuprum'
        }, {
            id: 8, title: 'Cabin', value: 'Cabin'
        }, {
            id: 9, title: 'Abel', value: 'Abel'
        }, {
            id: 10, title: 'Orbitron', value: 'Orbitron'
        }]
    }, {
        type: 'FontFamily', title: 'Serif', data: [{
            id: 1, title: 'Droid Serif', value: 'Droid Serif'
        }, {
            id: 2, title: 'Rokkitt', value: 'Rokkitt'
        }]
    }, {
        type: 'FontFamily', title: 'Display', data: [{
            id: 1, title: 'Lobster', value: 'Lobster'
        }, {
            id: 2, title: 'Unkempt', value: 'Unkempt'
        }, {
            id: 3, title: 'Special Elite', value: 'Special Elite'
        }, {
            id: 4, title: 'Changa One', value: 'Changa One'
        }, {
            id: 5, title: 'Anton', value: 'Anton'
        }, {
            id: 6, title: 'Chewy', value: 'Chewy'
        }, {
            id: 7, title: 'Righteous', value: 'Righteous'
        }, {
            id: 8, title: 'Black Ops One', value: 'Black Ops One'
        }, {
            id: 9, title: 'Fredoka One', value: 'Fredoka One'
        }, {
            id: 10, title: 'Abril Fatface', value: 'Abril Fatface'
        }]
    }, {
        type: 'FontFamily', title: 'Handwriting', data: [{
            id: 1, title: 'The Girl Next Door', value: 'The Girl Next Door'
        }, {
            id: 2, title: 'Crafty Girls', value: 'Crafty Girls'
        }, {
            id: 3, title: 'Pacifico', value: 'Pacifico'
        }, {
            id: 4, title: 'Dancing Script', value: 'Dancing Script'
        }, {
            id: 5, title: 'Shadows Into Light', value: 'Shadows Into Light'
        }, {
            id: 6, title: 'Calligraffitti', value: 'Calligraffitti'
        }, {
            id: 7, title: 'Rock Salt', value: 'Rock Salt'
        }, {
            id: 8, title: 'Tangerine', value: 'Tangerine'
        }]
    }]
}, {
    type: 'photoGroup', items: [{
        type: 'Photo', title: 'Abstract', thumb: true, data: [{
            id: 1, title: 'Paint', value: 'background/paint.jpg'
        }, {
            id: 2, title: 'Old', value: 'background/old.jpg'
        }, {
            id: 3, title: 'Notebook', value: 'background/notebook.png'
        }, {
            id: 4, title: 'Orange', value: 'background/orange.jpg'
        }, {
            id: 5, title: 'Diamond', value: 'background/diamond.jpg'
        }, {
            id: 6, title: 'Green Clircles', value: 'background/abstract_circles_green.png'
        }, {
            id: 7, title: 'Red Clircles', value: 'background/abstract_circles_red.png'
        }, {
            id: 8, title: 'Pink Clircles', value: 'background/abstract_circles_pink.png'
        }, {
            id: 9, title: 'Blue Clircles', value: 'background/abstract_circles_blue.png'
        }, {
            id: 10, title: 'Glossy Burst', value: 'background/glossy_burst.png'
        }, {
            id: 11, title: 'Geometric Green', value: 'background/geometric_green.png'
        }, {
            id: 12, title: 'Blue Bokeh', value: 'background/blue_bokeh.jpg'
        }, {
            id: 13, title: 'Stars', value: 'background/stars.jpg'
        }, {
            id: 14, title: 'Splatter Art', value: 'background/splatter_art.jpg'
        }, {
            id: 15, title: 'Halftone Poster', value: 'background/halftone_poster.png'
        }, {
            id: 16, title: 'Sky', value: 'background/sky.jpg'
        }, {
            id: 17, title: 'Starburst', value: 'background/starburst.jpg'
        }, {
            id: 18, title: 'Paper', value: 'background/paper.png'
        }, {
            id: 19, title: 'Stripes', value: 'background/stripes.png'
        }, {
            id: 20, title: 'Pink Stripes', value: 'background/pink_stripes.png'
        }, {
            id: 21, title: 'Butterflies', value: 'background/butterflies.jpg'
        }, {
            id: 22, title: 'Lovely', value: 'background/lovely.jpg'
        }, {
            id: 23, title: 'Valentine', value: 'background/valentine.png'
        }, {
            id: 24, title: 'Daisy', value: 'background/daisy.jpg'
        }, {
            id: 25, title: 'Cherry Blossom', value: 'background/cherry_blossom.jpg'
        }, {
            id: 26, title: 'Tiny Flowers', value: 'background/tiny_flowers.jpg'
        }, {
            id: 27, title: 'Green Grass', value: 'background/green_grass.png'
        }, {
            id: 28, title: 'Spring Plants', value: 'background/spring_plants.jpg'
        }, {
            id: 29, title: 'Yellow Orange', value: 'background/yellow_orange.jpg'
        }, {
            id: 30, title: 'Fabric', value: 'background/fabric.jpg'
        }, {
            id: 31, title: 'Digital Wave', value: 'background/digital_wave.jpg'
        }, {
            id: 32, title: 'Ubuntu', value: 'background/ubuntu.jpg'
        }, {
            id: 33, title: 'Old Paper', value: 'background/old_paper_two.jpg'
        }, {
            id: 34, title: 'Angel Pink', value: 'background/angel_pink.jpg'
        }, {
            id: 35, title: 'Crazy Lines', value: 'background/crazy_lines.jpg'
        }, {
            id: 36, title: 'Pink Wall', value: 'background/pink_wall.jpg'
        }, {
            id: 37, title: 'Pink Stripes', value: 'background/pink_stripes_two.jpg'
        }, {
            id: 38, title: 'Photograph', value: 'background/photograph.jpg'
        }, {
            id: 39, title: 'Blue Swirls', value: 'background/blue_swirls.jpg'
        }, {
            id: 40, title: 'Pink Paper', value: 'background/paper_pink.jpg'
        }, {
            id: 41, title: 'Luxury Blue', value: 'background/luxury_blue.jpg'
        }, {
            id: 42, title: 'Leaves', value: 'background/leaves.jpg'
        }, {
            id: 43, title: 'Pink Simple', value: 'background/simple_pink.jpg'
        }, {
            id: 44, title: 'Lightness', value: 'background/lightness.jpg'
        }, {
            id: 45, title: 'Grunge Green', value: 'background/grunge_paper_green.jpg'
        }, {
            id: 46, title: 'Grunge Paper Brown', value: 'background/grunge_paper_two.jpg'
        }, {
            id: 47, title: 'Grunge Paper Black', value: 'background/grunge_paper.jpg'
        }, {
            id: 48, title: 'Colorful Green', value: 'background/colorful_green.jpg'
        }, {
            id: 49, title: 'Colorful Red', value: 'background/colorful.jpg'
        }, {
            id: 50, title: 'Blendlines', value: 'background/blendlines.jpg'
        }, {
            id: 51, title: 'Space', value: 'background/space.jpg'
        }, {
            id: 52, title: 'Romantic Sparkling', value: 'background/romantic_sparkling.jpg'
        }, {
            id: 53, title: 'Blue Wallwuzz', value: 'background/blue_wallwuzz.jpg'
        }, {
            id: 54, title: 'Blue Pink', value: 'background/blue_pink.jpg'
        }, {
            id: 55, title: 'Photofolic', value: 'background/photofolic.jpg'
        }, {
            id: 56, title: 'Abstract Opera', value: 'background/abstract_opera.jpg'
        }, {
            id: 57, title: 'Old Paper', value: 'background/old_paper.jpg'
        }, {
            id: 58, title: 'Water', value: 'background/abstract_water.jpg'
        }, {
            id: 59, title: 'Lightness', value: 'background/abstract_blue.jpg'
        }, {
            id: 60, title: 'Blue Cloud', value: 'background/blue_cloud.jpg'
        }, {
            id: 61, title: 'Vintage Blue', value: 'background/vintage.jpg'
        }, {
            id: 62, title: 'Mixed Colors', value: 'background/mixed_colors.jpg'
        }]
    }, {
        type: 'Photo', title: 'Gradient', thumb: true, data: [{
            id: 1, title: 'Gold', value: 'background/yellow_gradient.png'
        }, {
            id: 2, title: 'Green', value: 'background/green_gradient.png'
        }, {
            id: 3, title: 'Green', value: 'background/green_gradient_two.png'
        }, {
            id: 4, title: 'Gray', value: 'background/gray_gradient.png'
        }, {
            id: 5, title: 'Rainbow', value: 'background/gradient.jpg'
        }, {
            id: 6, title: 'Brown', value: 'background/brown_gradient.png'
        }]
    }, {
        type: 'Photo', title: 'Plain', thumb: true, data: [{
            id: 1, title: 'White', value: 'background/white.png'
        }, {
            id: 5, title: 'Black', value: 'background/black.png'
        }, {
            id: 2, title: 'Light Gray', value: 'background/gray_light.png'
        },  {
            id: 3, title: 'Gray', value: 'background/gray.png'
        }, {
            id: 4, title: 'Dark Gray', value: 'background/gray_dark.png'
        }, {
            id: 6, title: 'Lime', value: 'background/lime.png'
        }, {
            id: 7, title: 'Green', value: 'background/green.png'
        }, {
            id: 8, title: 'Emerald', value: 'background/emerald.png'
        }, {
            id: 9, title: 'Teal', value: 'background/teal.png'
        }, {
            id: 10, title: 'Cyan', value: 'background/cyan.png'
        }, {
            id: 11, title: 'Cobalt', value: 'background/cobalt.png'
        }, {
            id: 12, title: 'Indigo', value: 'background/indigo.png'
        }, {
            id: 13, title: 'Violet', value: 'background/violet.png'
        }, {
            id: 14, title: 'Pink', value: 'background/pink.png'
        }, {
            id: 15, title: 'Magenta', value: 'background/magenta.png'
        }, {
            id: 16, title: 'Crimson', value: 'background/crimson.png'
        }, {
            id: 17, title: 'Red', value: 'background/red.png'
        }]
    }]
}, {
    type: 'Brightness', title: 'Brightness', data: { type: 'range', min: -100, max: 100, step: 1, start: 0, serialize: true, tip: 'Change brightness by moving the slider' }
}, {
    type: 'Contrast', title: 'Contrast', data: { type: 'range', min: -100, max: 100, step: 1, start: 0, serialize: true, tip: 'Change contrast by moving the slider' }
}, {
    type: 'Opacity', title: 'Opacity', data: { type: 'range', min: 0, max: 1, step: 0.01, start: 1, tip: 'Change opacity by moving the slider' }
}, {
    type: 'Upload', title: 'Upload Photo', data: { type: 'user-photo' }
}, {
    type: 'FillColor', title: 'Color', data: { type: 'color', range: 'basic', transparent: true }
}];

<|start_filename|>editor/style/layout.css<|end_filename|>
﻿@keyframes slide-top
{
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0%); opacity: 1; }
}
@-webkit-keyframes slide-top
{
    0% { -webkit-transform: translateY(-100%); opacity: 0; }
    100% { -webkit-transform: translateY(0%); opacity: 1; }
}

body { 
    background: url(img/body.gif) repeat center top; 
    color: #333; 
    background-attachment:fixed; 
    padding: 40px 0; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
}

.container { 
    width: 602px; 
    margin: 0 auto; 
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05); 
    border: 1px solid rgba(0, 0, 0, 0.1); 
    background: #fff;
}

.ecc-icon { display: inline-block; height: 16px; width: 16px; line-height: 16px; background: url(img/icons.png) no-repeat left top; vertical-align: text-top; }    
    .ecc-icon-plus { background-position: -80px 0; }
    .ecc-icon-save { background-position: -128px 0; }
    .ecc-icon-plus-green { background-position: -144px 0; }
    .ecc-icon-check { background-position: -160px 0; }
    .ecc-icon-warning { background-position: -176px 0; }
    .ecc-icon-world { background-position: -192px 0; }
    .ecc-icon-flip-horizontal { background-position: -208px 0; }
    .ecc-icon-flip-vertical { background-position: -224px 0; }
    .ecc-icon-rotate-right { background-position: -240px 0; }
    .ecc-icon-rotate-left { background-position: -256px 0; }
    .ecc-icon-rotate-180 { background-position: -272px 0; }
    .ecc-icon-info { background-position: -304px 0; }

@media all and (max-width: 1000px) {
    .container { width: 650px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
    body { background: #fff; overflow-x: hidden; }
}

@media all and (max-width: 650px) {
    body { padding: 0; }
    .container { width: 100%; padding: 0; margin: 0; }
}

@media all and (max-width: 600px) {
    .container{ width: 100%; padding: 0; }
}

<|start_filename|>editor/scripts/editor/toolbar.js<|end_filename|>
﻿var Toolbar = BaseObject.extend({
    init: function (config) {
        this._super(config);
        this.scroller = new IScroll(this.container, { scrollX: true, scrollY: false, tap: true, mouseWheel: true, mouseWheelSpeed: 40 });

        var that = this;

        $(this.container + ' li').on('tap', function () {
            that._clicked($(this));
        });
    },
    _clicked: function (item) {        
        if (this.scroller.moved) { return false; }

        if (item.hasClass('disabled'))
            return false;

        if (item.hasClass('active')) {
            this.panManager.close();
            item.removeClass('active');
            return;
        }

        var method = item.attr('data-ecc-method')
        , id = item.attr('data-ecc-id')
        , selected = this.card.getSelected();
        

        this.panManager.close();
        $('.editor-tools li').removeClass('active');
        if (id) { $('.editor-tools li[data-ecc-id=' + id + ']').addClass('active'); }

        switch (method) {
            case "deleteShape":
                this.card.deleteItem(selected);
                break;

            case "moveToTop":
                this.card.moveTop(selected);
                break;

            case "moveToBottom":
                this.card.moveToBottom(selected);
                break;

            case "showProperty":
                this.panManager.show(selected, id);
                break;

            case "editText":
                this.panManager.editText(selected);
                break;

            case "flipHorizontal":
                selected.setProperty("FlipHorizontal", null, function () {
                    selected.redraw();
                });
                break;
        }
    },
    update: function (type) {
        //$(this.container).css('left', '0px');
        $(this.container + ' li').each(function (index) {
            var att = $(this).attr('data-ecc-type');

            if (!att) return;
            
            if (att.indexOf(type) != -1) {
                $(this).removeClass('disabled');
                $(this).show();
            } else if (att.indexOf('all') != -1) {
                $(this).addClass('disabled');
                $(this).show();
            } else {
                $(this).hide();
            }
        });
        if (environment.verySlow) {            
            $('.editor-toolbar li[data-ecc-id="Brightness"]').hide();
            $('.editor-toolbar li[data-ecc-id="Contrast"]').hide();
        }
        if (environment.slow) {
            $('.editor-toolbar li[data-ecc-id="Filter"]').hide();
        }
        this._updateScroller();
    },
    _updateScroller: function () {
        var tb = $(this.container);
        var items = tb.find('li').filter(':visible');
        tb.find('ul').width(items.length * items.first().width());
        this.scroller.refresh();
    }
});

<|start_filename|>editor/style/base.css<|end_filename|>
﻿/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* typography.css */
html {font-size:100.01%;}
body {font-size:14px;color:#222;background:#fff;line-height:20px;}
body, input, textarea, select { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.7em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:0.4em;}
h4 {font-size:1.3em;line-height:1;margin-bottom:0.2em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:0.1em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1em;}
a:focus, a:hover {color:#09f;}
a {color:#41B7D8;text-decoration:none;}
strong, dfn {font-weight:bold;}
em, dfn {font-style:italic;}
sup, sub {line-height:0;}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; 
} 

input, button, textarea { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

input[type=text], input[type=password], textarea, select { border: solid 1px #ccc; padding: 4px !important; margin: 0px; vertical-align: top; border-radius: 4px; background: #f6f6f6; font-size: 1.3em; color: #333; transition: all 0.2s; }
    input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus { background: #fff; border-color: #bbb; }

/*button[type=submit] { font-weight: bold; border: none; color: #c9c9c9; padding: 6px 27px 8px 27px; margin-right: 5px; cursor: pointer; border-radius: 5px; background-color: #434343; transition: all 0.2s ease-in-out; }
    button[type=submit]:hover { color: #fff; background-color: #585858; box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.4); }*/

.border-box { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

.form label { font-size: 1.4em; color: #868686; display: inline-block; margin: 13px 0 3px 0; clear: left; }
    .form label:after { content: ":"; }
.form input[type=text], .form input[type=password], .form select, .form textarea { width: 100%; margin: 0; display: block; clear: left; }
    .form input[type=text]:disabled { color: #868686; }
.form input[type=checkbox] { display: inline-block; margin: 16px 5px 0 0; clear: left; }
.form .checkbox label { font-size: 1.2em; color: #333; display: inline; }
    .form .checkbox label:after { content: " "; }
    .form .checkbox .tip { display: inline; }
.form button { display: block; margin-top: 15px; }
.form button, .button { 
	text-align: center; 
	line-height: 24px; 
	padding: 0 10px; 
	background-color: #EAEAEA; 
	background-image: linear-gradient(#FAFAFA, #EAEAEA); 
	background-repeat: repeat-x; 
	border-color: #DDDDDD #DDDDDD #C5C5C5; 
	border-style: solid; 
	border-width: 1px; 
    border-radius: 3px;
	color: #333333; 
	cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    vertical-align: middle;
    white-space: nowrap;	
}
.form button:hover, .form button:active, .button:hover, .button:active {
	background-color: #dadada;
	background-image: linear-gradient(#eaeaea, #dadada);
    border-color: #ccc #ccc #b5b5b5;
}
.form button:focus, .button:focus {
	border-color: #51A7E8;
	box-shadow: 0 0 5px rgba(81, 167, 232, 0.5);
    background-color: #dadada;
    background-image: none;
}
.form button:disabled, .form button:disabled:hover, .button:disabled, .button:disabled:hover {
	background-color: #E5E5E5;
    background-image: none;
    border-color: #C5C5C5;
    box-shadow: none;
    color: #666666;
    cursor: default;
    opacity: 0.5;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}
.form fieldset { border: solid 2px #eee; padding: 0 15px 15px 15px; margin-top: 15px; }
    .form fieldset legend { font-size: 1.4em; color: #696969; padding: 0 5px;  }

.form .status { margin-top: 10px; font-weight: bold; }
.form .tip { display: block; font-size: 0.9em; color: #969696; }
.form .save-progress { margin-top: 10px; padding-left: 22px; background: url(img/loader.gif) no-repeat left center; color: #656565; display: none; }

::-webkit-input-placeholder { color: #999; }
::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }

.status-success { color: green; }
.status-error { color: #c00; }

.clear { clear: both; visibility: hidden; line-height: 0; height: 0; }
.hide { display: none; }

.validation-summary-errors, .field-validation-error { color: red; }
.input-validation-error { border: solid 1px #c00 !important; }

.ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.label-required:before { content: "* "; color: #c00; font-size: 1.2em; }
.label-optional:after { content: " (optional):" !important; color: #aaa; font-size: 0.8em; }

<|start_filename|>editor/scripts/model/base.js<|end_filename|>
﻿var eCardCanvas = {};

var BaseObject = Class.extend({
    init: function (config) {
        for (var c in config) this[c] = config[c];
        this.eventListeners = {};
    },
    on: function (event, handler) {
        if (!this.eventListeners[event]) {
            this.eventListeners[event] = [];
        }

        this.eventListeners[event].push(handler);
    },
    fire: function (eventType, obj) {
        var events = this.eventListeners[eventType];
        if (events) {
            var len = events.length;
            for (var i = 0; i < len; i++) {
                events[i].apply(this, [obj || {}]);
            }
        }
    }
});

var BaseElement = BaseObject.extend({
    init: function (config) {
        this._super(config);
        this.propertyQueue = [];
    },
    loadImages: function (files, loadcomplete) {
        this.fire('progress-start', 'Loading Photo', this);
        var completed = 0;
        var loaded = new Object();
        $.each(files, function (index, file) {
            var img = new Image();
            img.onload = function () {
                loaded[file] = img;
                completed++;
                if (completed == files.length) {
                    loadcomplete(loaded);
                    this.fire('progress-complete', this);
                }
            }.bind(this);
            img.onerror = function () {
				this.fire('progress-complete', this);
				this.fire('error', 'The image could not be loaded', this);
            }.bind(this);
            
            img.src = (file.toLowerCase().startsWith("http") || file.toLowerCase().startsWith("data")) ? file : environment.assetsPath + file;
        }.bind(this));
    },
    draw: function () {
    },
    select: function () {
        this.fire('select', this);
    },
    deselect: function () {
    },
    drawStage: function () {
        this.layer.getStage().draw();
    },
    setProperty: function (type, value, callback) {
        if (this.propertyQueue.length > 0 || this.propertyInProgress) {
            var found = false;
            for (var i = 0; i < this.propertyQueue.length; ++i) {
                if (this.propertyQueue[i].type === type) {
                    this.propertyQueue[i].value = value;
                    this.propertyQueue[i].callback = callback;
                    found = true;
                }
            }
            if (!found)
                this.propertyQueue.push({ type: type, value: value, callback: callback });
            return;
        }
        this.propertyInProgress = true;
        var f = eval('this.set' + type);
        if (this._isAsyncProperty(type)) {
            f.call(this, value, function () {
                if (callback) { callback.call(this); }
                this.propertyInProgress = false;
                if (this.propertyQueue.length > 0) {
                    var prop = this.propertyQueue.pop();
                    this.setProperty(prop.type, prop.value, prop.callback);
                }
            }.bind(this));
        } else {
            f.call(this, value);
            if (callback) { callback.call(this); }
            this.propertyInProgress = false;
            if (this.propertyQueue.length > 0) {
                var prop = this.propertyQueue.pop();
                this.setProperty(prop.type, prop.value, prop.callback);
            }
        }
    },
    getProperty: function (type) {
        var f = eval('this.get' + type);
        if (f)
            return f.call(this);
        else
            return null;
    },
    applyProperties: function (callback) {
        if (this.properties) {
            var prop = null;
            var updateNext = function (index) {
                if (index === this.properties.length) {
                    callback.call(this);
                    return;
                }

                prop = this.properties[index];
                index++;

                this.setProperty(prop.type, prop.value, function () {
                    updateNext(index);
                }.bind(this));

            }.bind(this);

            updateNext(0);
        } else {
            callback.call(this);
        }
    },
    _isAsyncProperty: function (type) {
        return (type === 'FontFamily' || type === 'Frame' || type === 'Filter' || type == 'Contrast' || type == 'Brightness');
    },
    getProperties: function() {
    },
    _getPropertyConfig: function (type) {
        if (type instanceof Array) {
            var cfg = [];
            for (var i = 0; i < type.length; ++i) {
                cfg[cfg.length] = this._getPropertyConfig(type[i]);
            }
            return cfg;
        } else {
            return { type: type, value: this.getProperty(type) };
        }
    },
    getConfig: function () {
        return { type: this.type, properties: this.getProperties() };
    }
});