commit 0105abee7f94d089983fcb73ec2b83aadba642c2
Author: Olga Brani <olgabrani@grnet.gr>
Date:   Fri Sep 27 17:38:42 2013 +0300

    vm creation wizard js with prototype part II

diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
index 4c685cb..274a52b 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
@@ -169,10 +169,8 @@ Ajax request to submit form
     $('.editable input[type="text"]').keyup(function(e){
         if(e.keyCode == 13) { 
             setValue($(this));
-            resetForm(e, $(this));
-            
+            resetForm(e, $(this));   
         }
-    
     })
 
     $('html').click(function(e) {
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/wizard-carousel.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/wizard-carousel.js
index 33ca94a..75e9911 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/wizard-carousel.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/wizard-carousel.js
@@ -1,85 +1,4 @@
-/*
-// all functions use pixels
-ui.wizard ={
-	current_step: undefined,
-	vm: {total_step: 4},
-	current_position: undefined,
-	relocation: undefined,
-
-	// OK
-	// sets the width and height of the carousel and its divs
-	set_dimensions: function() {
-		console.log('set dimentions');
-		ui.wizard.relocation = $(window).width();
-		console.log(ui.wizard.relocation);
-		$('.vm-wizard-carousel').children('div').width(ui.wizard.relocation);
-	},
-
-	// sets the width and height of the carousel and its divs when the screen is resized (in PIXELS)
-	adjust_to_resized_screen: function() {
-		$(window).resize(function() {
-			console.log('resized');
-			ui.wizard.set_dimensions();
-
-			if(ui.wizard.current_position<=0) {
-				// the carousel moves to left -> this is the case that acts on resize
-				ui.wizard.current_position = -((ui.wizard.current_step-1)*ui.wizard.relocation);
-			}
-			else
-				ui.wizard.current_position = (ui.wizard.current_step-1)*ui.wizard.relocation;
-
-			$('.vm-wizard-carousel').css('left', ui.wizard.current_position+'px');
-		})
-	},
-
-	
-
-	move_to_step: function(prev_btn, next_btn) {
-		var speed =500;
-		// when the button "next" is pressed show the next step (if there is a next step)
-		next_btn.click(function(e){
-			e.preventDefault();
-			console.log('you clicked next!')
-			if(ui.wizard.current_step < ui.wizard.vm.total_step){
-				prev_btn.find('span').html('PREVIOUS');
-				ui.wizard.current_step++;
-				ui.wizard.current_position -=ui.wizard.relocation;
-				$('.vm-wizard-carousel').animate({left: ui.wizard.current_position+'px'}, speed);
-				ui.wizard.indicate_step(ui.wizard.current_step);
-				ui.wizard.set_movement_tags(ui.wizard.current_step, prev_btn, next_btn);
-
-				if(ui.wizard.current_step == 3) {
-					setTimeout(function() { $('.vm-name').find('input').focus() }, speed/2);
-				}
-
-			}
-			else {
-				console.log('This is the last step.');
-			}
-		})
-
-		// when the button "previous" is pressed show the previous step (if there is a previous step)
-		prev_btn.click(function(e){
-			e.preventDefault();
-			if(ui.wizard.current_step > 1){
-				ui.wizard.current_step--;
-				ui.wizard.current_position +=ui.wizard.relocation;
-				$('.vm-wizard-carousel').animate({left: ui.wizard.current_position+'px'}, speed);
-				ui.wizard.indicate_step(ui.wizard.current_step);
-				ui.wizard.set_movement_tags(ui.wizard.current_step, prev_btn, next_btn);
-			}
-			else {
-				console.log('This is the 1st step.')
-			}
-		})
-	},
-
-	// sets the width and height of the steps and of the carousel (in PIXELS)
-	initialize_relocation: function(){
-			console.log('initialize_relocation');
-			ui.wizard.adjust_to_resized_screen();
-			ui.wizard.set_dimensions();
-	},
+/*	
 	// for the carousel index
 	indicate_step: function(step) {
 		$('.wizard .top .sub-menu[data-step]').hide();
@@ -102,28 +21,15 @@ ui.wizard ={
 		}
 	}
 }
+*/
 
-
-$(document).ready(function(){
-
-	ui.wizard.current_step =1;
-	ui.wizard.current_position =0;
-
-	var new_vm_btn =$('.new-btn, .add-new');
-	var prev_btn = $('.bottom').find('.nav.prev');
-	var next_btn = $('.bottom').find('.nav.next');
-	$('.wizard .nums').click(function(e){
-		e.preventDefault();
-	})
-
-	ui.wizard.initialize_relocation();
-	ui.wizard.move_to_step(prev_btn, next_btn);
-	ui.wizard.set_movement_tags(ui.wizard.current_step, prev_btn, next_btn);
-
-
-});
+/*
+kpap:
+Πώς κάνω extend κάτι;
+Πχ θέλω στο carousel να ενσωματώσω το πάνω μενου...
 */
 
+
 /*
 Wrapper element must have set width and overflow hidden properties;
 Item elements should have no margin
@@ -137,46 +43,134 @@ function Carousel(options) {
 		'prev': $('.carousel-prev'),
 		'speed': 1000,
 		'current_step': 1,
+		// αυτά δεν τα θέλω εδώ
+		'cancel_text': 'CANCEL',
+		'previous_text': 'PREVIOUS',
+		'submit_text': 'SUBMIT',
+		'next_text': 'NEXT',
 	}
+
 	this.options = _.defaults(options,defaults);
+	// TODO with _.map
 	this.wrapper = options.wrapper;
 	this.container = options.container;
 	this.item = options.item;
 	this.next = options.next;
 	this.prev = options.prev;
 	this.speed = options.speed;
+	this.cancel_text = options.cancel_text;
+	this.previous_text = options.previous_text;
+	this.submit_text = options.submit_text;
+	this.next_text = options.next_text;
 	this.current_step = options.current_step;
 	this.total_items = this.item.length;
 	this.initEvents();
 }
 
+Carousel.prototype.alterNav = function () {
+	var self = this;
+	this.prev.find('span').html(this.previous_text);
+	this.next.find('span').html(this.next_text);
+	if ( this.current_step == 1) {
+		self.prev.find('span').html(self.cancel_text);
+	}
+	else if (this.current_step == this.total_items ) {
+		self.next.find('span').html(self.submit_text);
+	}
+}
+
+Carousel.prototype.resetForm = function () {
+	console.log('dummy form reset');
+}
+
+Carousel.prototype.submitForm = function () {
+	console.log('dummy form submit');
+}
+
+Carousel.prototype.closeOverlay = function () {
+	$('.overlay-area, .overlay-div').hide();
+}
+
 Carousel.prototype.setDimensions = function (){
 	this.wrapper.css('width', 100*this.total_items+'%');
 	this.container.find(this.item).css('width', 100/this.total_items+'%');
 }
 
+Carousel.prototype.move = function () {
+	var percentage = -(this.current_step-1)/this.total_items*100+'%';
+	this.container.stop().animate({ 'left': percentage }, this.speed);
+}
+
+// if is_clicked is true, -duh- something has been clicked
+Carousel.prototype.moveNext = function (is_clicked) {
+	var self = this;
+	if (this.current_step < this.total_items) {
+		self.current_step = self.current_step + 1;
+		self.move();
+	} else {
+		if (is_clicked) {
+			self.closeOverlay();
+			self.submitForm();			
+		}
+	}
+	self.alterNav();
+} 
+
+// if is_clicked is true, -duh- something has been clicked
+Carousel.prototype.movePrev = function (is_clicked) {
+	var self = this;
+	if (this.current_step > 1) {
+		this.current_step = this.current_step - 1;
+		self.move();
+	} else {
+		if (is_clicked) {
+			self.closeOverlay();
+			self.resetForm();			
+		}
+	}
+	self.alterNav();
+} 
+
 Carousel.prototype.initEvents = function () {
 	var self = this;
-	console.log(this.options);
 	this.setDimensions();
+	this.alterNavText();
 
 	this.next.click(function(e){
 		e.preventDefault();
+		self.moveNext(true);
 	})
-}
 
+	this.prev.click(function(e){
+		e.preventDefault();
+		self.movePrev(true);
+	})
 
+	$('body').keydown(function(e) {
+	  if(e.keyCode == 37) { // left
+	  	e.preventDefault();
+	    self.movePrev(false);
+	  }
+	  else if(e.keyCode == 39) { // right
+	  	e.preventDefault();
+	    self.moveNext(false);
+	  }
+	  else if(e.keyCode == 27) { // ESC
+	  	e.preventDefault();
+	  	self.closeOverlay();
+	  }
+	});
+}
 
 $(document).ready(function(){ 
 	carousel_options = { 
 		'wrapper': $('.wizard-content'),
 		'container': $('.vm-wizard-carousel'),
 		'item': $('.step'),
-		'next' : $('.bottom').find('.nav.next');
-		'prev' : $('.bottom').find('.nav.prev');
+		'next' : $('.bottom').find('.nav.next'),
+		'prev' : $('.bottom').find('.nav.prev'),
 	}
 
 	$('.wizard-content').width($(window).width());
 	var carousel = new Carousel(carousel_options);
-	window.car = carousel;
 });
\ No newline at end of file
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_wizard-carousel.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_wizard-carousel.scss
index ab6537b..2878fc7 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_wizard-carousel.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_wizard-carousel.scss
@@ -3,6 +3,7 @@
 	width:100%;
 	.vm-wizard-carousel {
 		position:relative;
+		left:0;
 		.step {
 			float:left;
 		}
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
index a4789be..2d3a12e 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
@@ -8845,8 +8845,9 @@ Overlays (Todo: clean up)
 /* line 4, ../sass/_wizard-carousel.scss */
 .wizard-content .vm-wizard-carousel {
   position: relative;
+  left: 0;
 }
-/* line 6, ../sass/_wizard-carousel.scss */
+/* line 7, ../sass/_wizard-carousel.scss */
 .wizard-content .vm-wizard-carousel .step {
   float: left;
 }
