(function($) {
    var $document = $(document);

    $document.ready(
        function(){

            $.templateEngine.addTemplates(
                {
                    'builder.clipart.categories': {
                        category_selector:
                            '<div parent_id="{!parent_id!}" class="category_selector">' +
                                '<div class="title">{!title!}</div>' +
                                '{!selector_items!}' +
                            '</div> ' + "\n",
                        items:
                            '<div class="selector_items">{!items!}</div>' + "\n",
                        item:
                            '<div category_id="{!category_id!}" parent_id="{!parent_id!}" class="item {!selected!}">' +
                                '{!title!}' +
                            '</div>' + "\n",
                        clipart_item:
                            '<div ' +
                                'category_id="{!category_id!}" ' +
                                'clipart_id="{!clipart_id!}" ' +
                                'normal_url="/' + $.coreUtilites.clipart_path +'{!clipart_id!}/{!clipart_id!}_medium.png"' +
                                'style="background: url(/' + $.coreUtilites.clipart_path +'{!clipart_id!}/{!clipart_id!}_small.png) no-repeat;" ' +
                            '   class="clipart_item"' +
                            '>' +
                            '</div>' + "\n",
                        clipart_popup:
                            '<div id="clipart_popup" ' +
                                'style="background: url(/' + $.coreUtilites.clipart_path +'{!clipart_id!}/{!clipart_id!}_medium.png) no-repeat;" ' +
                            '   class="clipart_popup"' +
                            '>' +
                            '</div>'
                    },
                    'builder.area': {
                        area:
                            '<div class="builder_area">' +
                                '<div class="sys_edit_helper helper_center_lines"></div>' +
                                '<div class="sys_selector"></div>' +
                            '</div><div class="clear"></div>',
                        area_in_predesign:
                            '<div class="sys_edit_helper helper_center_lines"></div>' +
                            '<div class="sys_selector"></div>',
                        container:
                            '<div class="thumb_container">{!items!}</div>',
                        item:
                            '<div ' +
                                'view_id="{!view_id!}" ' +
                                'class="builder_area" ' +
                                'area_position="{!area_position!}" ' +
                                'area_size="{!area_size!}" ' +
                                'style="background: url({!preview_url!}) no-repeat;" ' +
                            '></div>'
                    },
                    'builder.canvas': {
                        container:
                            '<div ' +
                                'type="clipart" ' +
                                'class="canvas_container clipart active" ' +
                                'canvas_id="{!canvas_id!}" ' +
                                'clipart_id="{!clipart_id!}" ' +
                                'view_id="{!view_id!}" ' +
                                'style="background: url({!url!}) no-repeat;z-index:{!z_index!};{!other_css!}" ' +
                            '>' +
                                '<div class="bor_tl"></div>' +
                                '<div class="bor_tr"></div>' +
                                '<div class="bor_bl"></div>' +
                                '<div class="bor_br"></div>' +
                                '<div class="remover"></div>' +
                                '<div class="color_replacer"></div>' +
                            '</div>',
                        color_replacer_item:
                            '<div ' +
                                'class="color_replace_item" ' +
                                'color="{!color!}" ' +
                            '> ' +
                                '<a class="color"><div class="colorInner"></div></a>' +
                                '<div class="track"></div>' +
                                '<ul class="dropdown"><li></li></ul>' +
                                '<input type="hidden" class="sys_font_controller_item colorInput"/>' +
                            '</div>'
                    },
                    'builder.text': {
                        container:
                            '<div ' +
                                'type="text" ' +
                                'class="canvas_container text active" ' +
                                'canvas_id="{!canvas_id!}" ' +
                                'view_id="{!view_id!}" ' +
                                'style="z-index:{!z_index!};{!other_css!}" ' +
                            '>' +
                                '<div class="value"></div>' +
                                '<div class="preview"></div>' +
                                '<div class="bor_tl"></div>' +
                                '<div class="bor_tr"></div>' +
                                '<div class="bor_bl"></div>' +
                                '<div class="bor_br"></div>' +
                                '<div class="remover"></div>' +
                            '</div>'
                    },
                    'text.setting': {
                        font:
                            '<option value="{!family!}">{!name!}</option>'
                    },
                    'dropdown': {
                        container:
                            '<div class="ss_dropdown"></div>',
                        title_item:
                            '<div class="ss_dropdown_title"></div>',
                        items:
                            '<div class="ss_dropdown_items"></div>',
                        item:
                            '<div class="ss_dropdown_item"></div>'
                    }
                }
            );
        }
    )
})(SWjQuery);