Synnefo

Ember.View.reopen({

    didInsertElement: function() {

       this.set('elIsInserted', true);

       this._super();

    },

    willDestroyElement: function() {

       this.set('elIsInserted', false);

       this._super();

    }

});

		index: undefined, // index>=1

		isPrev: false,

		}.property('controller.currentStep'),

		isNext: function() {

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

		}.property('controller.currentStep'),

		isPrev: function() {

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

Synnefo.WizardStepView = Synnefo.CollectionItemView.extend({

	classNames: ['step'],

	classNameBindings: ['isFirst:current::', 'isFirst:preselected', 'isNext:next::', 'isPrev:prev::'],

	templateName: function() {

		return 'wizardSteps/step-'+this.get('index');

	}.property(),

});

Synnefo.WizardStepsView = Synnefo.CollectionView.extend({

	classNames: 'middle',

	content: Synnefo.wizards.vmWizard.stepsContent,

	itemViewClass: Synnefo.WizardStepView,

	move: function() {

		if(this.get('elIsInserted')) {

			var onMove = this.get('controller').get('onMove');

			if(onMove) {

				var el = this.$();

				var self = this;

				// I find the current step from the view's property

				// not from dom's class to be sure that there will be no sychronisation problem?

				var direction = this.get('controller').get('directionMove');

				var viewCurrent = this._childViews.findBy('isCurrent', true);

				var totalSteps = this.get('controller').get('totalSteps')

				if(!(direction === 'next' && viewCurrent.get('index') === totalSteps) && !(direction === 'prev' && viewCurrent.get('index') === 1)) {

					var elCurrent = el.find('.current');

					var elSteps = el.find('.step');

					var pos = (direction==='next')?(100):(-100);

					var viewToDisplay;

					var elToDisplay

					if(direction === 'next') {

						viewToDisplay = this._childViews.findBy('isNext', true);

						elToDisplay = el.find('.next');

					}

					else {

						viewToDisplay = this._childViews.findBy('isPrev', true);

						elToDisplay = el.find('.prev');

					}

					$('body').css('overflow', 'hidden');

					elToDisplay.css({

						left: pos.toString()+'%'

					}).addClass('current');

					elToDisplay.css({

						top: document.body.scrollTop + 'px'

					});

					elSteps.animate({

						marginLeft: (-pos).toString() + '%'

					},{

						complete: _.bind(function() {

							elCurrent.removeClass('current');

							window.scroll(0, 0);

							elToDisplay.css({

								left: '0',

								top: '0'

							});

							elSteps.css({

								marginLeft: '0'

							});

							$('body').css('overflow', 'visible');

							viewCurrent.set('isCurrent', false);

							viewToDisplay.set('isCurrent', true);

							self.get('controller').set('currentStep',viewToDisplay.get('index'));

						}, this)

					});

				}

				this.get('controller').set('onMove', false);

			}

		}

	}.observes('controller.onMove'),

	didInsertElement: function() {

		this._super();

		$('body').addClass('with-overlay');

	},

	willDestroyElement: function() {

		this._super();

		$('body').removeClass('with-overlay');

	}

});