Synnefo

 /* Views */

Synnefo.ApplicationView = Ember.View.extend({

        classNames: ['content']

});

/* Navigation Menu */

Synnefo.NavIconView = Ember.View.extend({

        tagName: 'span',

        click: function() {

                var parentEl = this.$().parent('a');

                var currentEl = this.$().parents('li').siblings('li').find('a.current');

                ui.replaceClass(currentEl, 'full', 'outline', 'snf-');

                ui.replaceClass(parentEl, 'outline', 'full', 'snf-');

        }

});

Synnefo.NavigationView = Ember.CollectionView.extend({

  tagName: "ul",

  classNames: ['icons-nav'],

  content: Synnefo.conf.sectors,

  itemViewClass: Ember.View.extend({

    templateName: "navigationItem"

  }),

});

/* Items Parts */

Synnefo.ElemView = Ember.View.extend({

        // templateName: 'elem',

        addNewBtn: false,

        templateName: 'snfElem',

        tagName: 'li',

        selectable: true,

        initSelect: 'unchecked',

        classNameBindings: ['status'],

        attributeBindings: ['data-status'],

        'data-status': function() {

                return this.status;

        }.property(),

        status: function() {

                return this.get('controller.status');

        }.property('controller.status')

});

Synnefo.ImgWrapView = Ember.View.extend({

        templateName: 'img-wrap',

        classNames: ['img-wrap'],

        icon: function() {

                var parentView = this.get('parentView');

                var addNewBtn = parentView.get('addNewBtn');

                if(addNewBtn)

                        return parentView.get('icon');

                else

                        return parentView.get('controller').get('parentController').get('icon');

        }.property()

});

Synnefo.NameView = Ember.View.extend({

        templateName: 'name',

        tagName: 'h4',

        name: function() {

                // the name may be defined inside the parent view or in its model or controller

                return this.get('parentView').get('controller').get('name');

        }.property()

});

// to be changed

Synnefo.ImmediateActionView = Ember.View.extend({

        templateName: 'actions',

        classNames: ['actions']

});

/* Wizard */

Synnefo.WizardHeadersView = Ember.CollectionView.extend({

        tagName: 'ul',

        classNames:['nums'],

        content: Synnefo.wizards.vmWizard.stepsHeadlines,

        counter: 0,

        setCurrentHeader: function() {

                step = this.get('controller').get('currentStep');

                console.log('* step', step);

                return  step;

        }.property('controller.currentStep'),

        didInsertElement: function() {

                console.log('collecton inserted');

                this.setCurrentHeader;

        },

        itemViewClass: Ember.View.extend({

                templateName: 'wizardStepHeader',

                classNameBindings: ['isCurrent:current::', 'isFirst:preselected', 'isPast:past::'],

                index: undefined,

                isCurrent: false,

                isFirst: false,

                init: function() {

                        this._super();

                        console.log('init');

                        var prevIndex = this.get('parentView').get('counter');

                        prevIndex++;

                        console.log('prevIndex', prevIndex)

                        this.get('parentView').set('counter', prevIndex);

                        this.set('index', prevIndex);

                        if(prevIndex === 1) {

                                this.set('isFirst', true);

                                // this.set('isCurrent', true);

                        }

                        console.log('current', this.isVisible)

                },

                isCurrent: function() {

                        return this.index === this.get('controller').get('currentStep');

                }.property('controller.currentStep'),

                isPast: function() {

                        return this.index < this.get('controller').get('currentStep');

                }.property('controller.currentStep'),

                didInsertElement: function() {

                }

        }),

});

// The only buttons that are views are the buttons that move the wizard

// The reason is that they shouldn't be isolated from the surrounding

// (Their labels changes depanding the current step)

Synnefo.WizardBtnBackView = Ember.View.extend({

        classNames: ['nav', 'prev'],

        tagName: 'a',

        templateName: 'components/btns-span',

        content: function(){

                return this.get('controller').get('btnLeftLabel');

        }.property('controller.btnLeftLabel'),

        click: function() {

                this.get('controller').send('moveBack');

        }

});

Synnefo.WizardBtnNextView = Ember.View.extend({

        classNames: ['nav', 'next'],

        tagName: 'a',

        templateName: 'components/btns-span',

        content: function(){

                return this.get('controller').get('btnRightLabel');

        }.property('controller.btnRightLabel'),

        click: function() {

                this.get('controller').send('moveNext');

        }

});