var doc = require('doc-js'),
    crel = require('crel'),
    Rating = require('rating-control'),
    defaultCss = require('defaultcss');

new defaultCss('.item > span { display: inline-block;  width: 20px; height: 20px; }');

module.exports = function(fastn, component, type, settings, children){
    var ratingControlModel = new fastn.Model({value:0});
    
    component.extend('_generic', settings, children);
    component.setProperty('ratingControl');

    var ratingTemplate = crel('div', {class: 'item'} );
    
    if ( ! settings.itemTemplate ) {
        settings.itemTemplate = ratingTemplate;
    }

    var ratingControl = new Rating(settings);

    component.ratingControl = ratingControl;

    component.render = function(){
        component.element = ratingControl.element;
        
        doc(ratingControl.element).addClass('rating-control-component');
        doc(ratingControl.content).addClass('content');

        component.getContainerElement = function() {
            return ratingControl.content;
        };

        component.emit('render');

        return component;
    };

    return component;
};

module.exports.expectedComponents = ['_generic'];
@@ -449,16 +449,76 @@
 ntrol');
+%0A    component.setProperty('value');%0A    component.value(0);
 %0A%0A    va
@@ -1154,24 +1154,611 @@
 nt;%0A    %7D;%0A%0A
+    component.ratingControl.on('value', function(value)%7B%0A        // ratingControl.console.log('component: ',value);%0A    %7D);%0A%0A    // ratingControl.on('value', function(value)%7B%0A    //     // ratingControl.tab(tab);%0A    //     console.log('ratingControl: ',value);%0A    // %7D);%0A    %0A    %0A    function handleValue()%7B%0A        var val = ratingControl.value();%0A%0A        if(isNaN(val)) %7B%0A            return;%0A        %7D%0A%0A        component.value(val);%0A    %7D%0A%0A    ratingControl.on('value', handleValue);%0A%0A    %0A    component.value.on('change', function(val)%7B%0A        ratingControl.value(val);%0A    %7D);%0A%0A
     return c

return val