editor2.js

/*
 * Model for each widget
 *
*/
var Widget = Backbone.Model.extend({
	defaults : {
		stagged : false,
		
		left : null,
		top : null,
		width : null,
		height : null,
		original : {
			width : null,
			height : null
		},

		reg_id : null,
		frameId : null,
		
		version : null,
		dir : null
	},


	initialize : function(){

	},

});


/*
 *	This is the Main Editor Modul
 *
*/
var Editor = Backbone.View.extend({

	// renders <div class="editor"></div>
	className : 'editor',
	
	events : {
		// 'click a' : 'pageLeave',
		'click #editor-frame-save' : 'grantSave',
		'click #editor-frame-config' : 'openConfig',
		'click .addBlock' : 'addBlock'
	},

	// Holds all stagged widgets
	onStage : new Backbone.Collection,

	// Indicates whether we are currently saving or not
	isSaving : false,

	initialize : function(){

		/*
		 * Listen for the change event 
		 * to update the save button
		*/

		this.onStage.on("change", this.dirty, this);

		/*
		 * Calculate resize rate and the 
		 * the size of the grid.
		*/
		var $canvas = this.$el.find('#canvas');

		this.canvasWidth = $canvas.width();
		this.canvasHeight = $canvas.height();

		CORE.frame.resizeRate = this.resizeRate = (this.canvas_height / CORE.frame.native_height) * 100;

		var gridcountX = Math.ceil(this.canvas_width / 8);
		gridcountX = gridcountX % 2 == 0 ? gridcountX : gridcountX - 1;
			
		
		var gridcountY = Math.ceil(this.canvas_height / 8);
		gridcountY = gridcountY % 2 == 0 ? gridcountY : gridcountY - 1;
		
		CORE.frame.grid = [this.canvas_width / gridcountX, this.canvas_height / gridcountY ];

		/*
		 * Generate for each widget a
		 * `WidgetView` instance.
		*/
		$canvas.find('.widget').each( $.proxy(function( i, element ){ 
			this.onStage.push( 
				new WidgetView({ stagged : true, element : element }) 
			);

		}, this ));



		// bind drag events
	},

	/*
	 * Does the heavy lifiting for rendering
	 * the editor.
	*/
	render : function(){

	},

	/* 
	 * Saves all widgets with its current 
	 * attributes. 
	*/
	grantSave : function(){
		this.isSaving = true;

		this.clean();
	},

	/* 
	 * Call this if the onStage collection 
	 * is not saved to the server. Enables the save
	 * button.
	*/
	dirty : function(){
		console.warn("TODO: refactor use classes instead");
		var $btn = this.$el.find('#editor-frame-save').removeClass('disabled');
		$btn.find('img').hide();
		$btn.find('span').html('Speichern');
	},

	/* 
	 * Call this if the onStage collection 
	 * is sync with the server. Disables the save
	 * Button
	*/
	clean : function(){
		console.warn("TODO: refactor use classes instead");
		var $btn = this.$el.find('#editor-frame-save').addClass('disabled');
		$btn.find('img').show();
		$btn.find('span').html('Gespeichert');
	},


	/* 
	 * Shows the addBlock dialog
	 *  
	*/
	addBlock : function(){
		// new AddBlockDialog({ editor : this });
	},

	

});

var AddBlockDialog = Backbone.View.extend({

	className : 'addBlockDialog',

	events : {
		'click .widget' : 'addWidget'
	},

	initialize : function( options ){
		this.editor = options.editor;
		this.render();
	},

	/* 
	 * Renders the dialog.
	 *  
	*/
	render : function(){

	},

	/* 
	 * Adds a widget to the editor.
	 *  
	*/
	addWidget : function(){
		//entweder machen wir hier 
		// new WidgetView()
		// oder wir machen Editor.add()
		// und der Editor macht das dann
	},

})


/* 
 * View wich represents a widget model.
 * Responsible for the widget interaction
 * resize, move
*/
var WidgetView = Backbone.View.extend({
	className : 'widget',

	initialize : function( options ){
		this.model = new Widget({
			stagged : true,
			view : this
		});


	},

	updateModel : function(){
		this.model.set("")
	},

})