/**
 * @overview <i>ccm</i> component for rendering component informations
 * @author André Kless <andre.kless@web.de> 2017
 * @license The MIT License (MIT)
 */

( function () {

  var ccm_version = '9.0.0';
  var ccm_url     = 'https://akless.github.io/ccm/ccm.min.js';

  var component_name = 'comp_info';
  var component_obj  = {

    name: component_name,

    config: {

      html_templates: {
        "main": {
          "id": "main",
          "inner": [
            {
              "tag": "header",
              "inner": [
                {
                  "tag": "section",
                  "id": "logo",
                  "inner": {
                    "tag": "img",
                    "src": "%logo%"
                  }
                },
                {
                  "tag": "section",
                  "id": "trailer",
                  "inner": [
                    {
                      "id": "title",
                      "inner": "%title%"
                    },
                    {
                      "id": "developer",
                      "inner": "%developer%"
                    }
                  ]
                }
              ]
            },
            {
              "tag": "main",
              "inner": [
                {
                  "tag": "section",
                  "id": "abstract",
                  "inner": "%abstract%"
                },
                {
                  "tag": "section",
                  "id": "info",
                  "inner": [
                    {
                      "id": "name",
                      "class": "entry",
                      "inner": [
                        {
                          "class": "label",
                          "inner": "Name"
                        },
                        {
                          "class": "value",
                          "inner": "%name%"
                        }
                      ]
                    },
                    {
                      "id": "version",
                      "class": "entry",
                      "inner": [
                        {
                          "class": "label",
                          "inner": "Version"
                        },
                        {
                          "class": "value",
                          "inner": "%version%"
                        }
                      ]
                    },
                    {
                      "id": "url",
                      "class": "entry",
                      "inner": [
                        {
                          "class": "label",
                          "inner": "URL"
                        },
                        {
                          "class": "value",
                          "inner": "%url%"
                        }
                      ]
                    },
                    {
                      "id": "developer",
                      "class": "entry",
                      "inner": [
                        {
                          "class": "label",
                          "inner": "Developer"
                        },
                        {
                          "class": "value",
                          "inner": "%developer%"
                        }
                      ]
                    },
                    {
                      "id": "licence",
                      "class": "entry",
                      "inner": [
                        {
                          "class": "label",
                          "inner": "Licence"
                        },
                        {
                          "class": "value",
                          "inner": "%licence%"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "tag": "footer",
              "inner": [
                {
                  "tag": "fieldset",
                  "inner": [
                    {
                      "tag": "legend",
                      "inner": "Demo"
                    },
                    {
                      "tag": "section",
                      "id": "demo"
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      data: { store: [ 'ccm.store' ] },
      placeholder: {
        name: 'Name',
        url: 'URL',
        developer: 'Developer',
        licence: 'Licence'
      }

  //  compact: true

    },

    Instance: function () {

      var self = this;
      var my;           // contains privatized instance members

      this.ready = function ( callback ) {

        // privatize all possible instance members
        my = self.ccm.helper.privatize( self );

        callback();
      };

      this.start = function ( callback ) {

        self.ccm.helper.dataset( my.data, function ( dataset ) {

          var main_templ = self.ccm.helper.clone( my.html_templates.main );
          if ( my.compact ) {
            main_templ = main_templ.inner[ 0 ];
          }

          var main_elem = self.ccm.helper.html( main_templ, dataset );

          if ( my.compact ) { self.ccm.helper.setContent( self.element, main_elem ); if ( callback ) callback(); return; }

          self.ccm.start( dataset.url, dataset.demo, function ( instance ) {

            main_elem.querySelector( '#demo' ).appendChild( instance.root );

            self.ccm.helper.setContent( self.element, main_elem );

            if ( callback ) callback();

          } );

        } );

      };

    }

  };

  var namespace = window.ccm && ccm.components[ component_name ]; if ( namespace ) { if ( namespace.ccm_version ) ccm_version = namespace.ccm_version; if ( namespace.ccm_url ) ccm_url = namespace.ccm_url; }
  if ( !window.ccm || !ccm[ ccm_version ] ) { var tag = document.createElement( 'script' ); document.head.appendChild( tag ); tag.onload = register; tag.src = ccm_url; } else register();
  function register() { ccm[ ccm_version ].component( component_obj ); }
}() );
@@ -4442,140 +4442,9 @@
  %5D %7D
-,%0A      placeholder: %7B%0A        name: 'Name',%0A        url: 'URL',%0A        developer: 'Developer',%0A        licence: 'Licence'%0A      %7D
 %0A
+
 %0A  /
@@ -4946,16 +4946,17 @@
 main );%0A
+%0A
         
@@ -4974,30 +4974,16 @@
 ompact )
- %7B%0A           
  main_te
@@ -5010,28 +5010,16 @@
 er%5B 0 %5D;
-%0A          %7D
 %0A%0A      
@@ -5297,16 +5297,44 @@
         
+ self.ccm.helper.setContent(
  main_el
@@ -5360,29 +5360,17 @@
 #demo' )
-.appendChild(
+,
  instanc

update info component