(function() {

	SL.ui.SplitPane = Class.create(SL.Component, {

		init : function() {

			this.config.setDefault('spacer_width', 7);
			this.config.setDefault('orientation', 'horizontal');
			this.config.setDefault('spacer_class', 'gui_splitpane_' + this.config.get('orientation') + '_spacer');

			this.div1 = $(this.e.childElements()[0]);
			this.div2 = $(this.e.childElements()[1]);

			setTimeout(this.initDefered.bind(this), 75);
		},

		initDefered : function() {

			var spacerWidth = this.config.get('spacer_width');

			this.spacer = new Element('div', {
				'class' : this.config.get('spacer_class')
			});
			this.e.setStyle({
				position : 'relative'
			});

			this.div1.insert({
				after : this.spacer
			});

			if (this.config.get('orientation') == 'horizontal') {
				var width1 = this.div1.getWidth();
				// var width2 = this.div2.getWidth();

				this.spacer.setStyle({
					position : 'absolute',
					left : width1 + 'px',
					top : '0',
					width : spacerWidth + 'px',
					bottom : '0',
					zIndex : '1'
				});

				this.div1.setStyle({
					'float' : 'none',
					position : 'absolute',
					left : '0',
					top : '0',
					width : width1 + 'px'
				});

				this.div2.setStyle({
					'float' : 'none',
					position : 'absolute',
					left : (width1 + spacerWidth) + 'px',
					top : '0',
					right : '0',
					marginLeft : '0'
				});

				this.currentHeight = Math.max(this.div1.getHeight(), this.div2.getHeight()) + 15;

				this.e.setStyle({
					height : this.currentHeight + 'px'
				});

				this.updateEvent = this.update.bind(this);
				this.actionURL = this.config.get('action_url');

				this.draggable = new SL.dnd.Draggable(this.spacer, {
					orientation : 'horizontal',
					minX : this.config.get('min_left'),
					maxX : this.config.get('min_right'),
					cb : {
						moved : this.updateEvent,
						dragStop : this.onDragStop.bind(this)
					}
				});
			} else {
				var height1 = this.div1.getHeight();
				// var height2 = this.div2.getHeight();

				this.spacer.setStyle({
					position : 'absolute',
					left : '0',
					top : height1 + 'px',
					height : spacerWidth + 'px',
					right : '0',
					zIndex : '1'
				});

				this.div1.setStyle({
					position : 'absolute',
					left : '0',
					top : '0'
				});

				this.div2.setStyle({
					position : 'absolute',
					top : (height1 + spacerWidth) + 'px',
					left : '0',
					right : '0',
					bottom : '0'
				});

				this.updateEvent = this.update.bind(this);
				this.actionURL = this.config.get('action_url');

				this.draggable = new SL.dnd.Draggable(this.spacer, {
					orientation : 'vertical',
					minY : this.config.get('min_left'),
					maxY : this.config.get('min_right'),
					cb : {
						moved : this.updateEvent,
						dragStop : this.onDragStop.bind(this)
					}
				});
			}

			Event.observe(document.onresize ? document : window, "resize", this.updateEvent);

			setTimeout(this.onCheckLayout.bind(this), 500);
		},

		onCheckLayout : function() {
			if (this.isCleanedUp) {
				return;
			}

			if (this.config.get('orientation') == 'horizontal') {
				var height = Math.max(this.div1.getHeight(), this.div2.getHeight()) + 15;
				var changed = this.currentHeight != height;
				if (changed) {
					this.currentHeight = height;
					this.e.setStyle({
						height : height + 'px'
					});
				}
				this.spacer.setStyle({
					height : this.currentHeight + 'px'
				});

				setTimeout(this.onCheckLayout.bind(this), changed ? 150 : 250);
			}
		},

		update : function() {
			var spacerWidth = this.config.get('spacer_width');

			if (this.config.get('orientation') == 'horizontal') {

				var height = Math.max(this.div1.getHeight(), this.div2.getHeight()) + 15;
				if (this.currentHeight == height) {
					// TODO: Needs to observe slider pos too
					// return;
				}

				this.currentHeight = height;

				var offset = this.spacer.offsetLeft;
				var width1 = offset;

				this.spacer.setStyle({
					left : width1 + 'px'
				});

				this.div1.setStyle({
					width : width1 + 'px'
				});

				this.div2.setStyle({
					left : (width1 + spacerWidth) + 'px'
				});

				this.e.setStyle({
					height : this.currentHeight + 'px'
				});

				this.spacer.setStyle({
					height : this.currentHeight + 'px'
				});
			} else {
				var offset = this.spacer.offsetTop;
				var height1 = offset;
				// var height2 = this.e.getHeight() - offset - spacerWidth;

				this.spacer.setStyle({
					top : height1 + 'px'
				});

				this.div1.setStyle({
					height : height1 + 'px'
				});

				this.div2.setStyle({
					top : (height1 + spacerWidth) + 'px'
				});
			}
		},

		onChildComponentChanged : function() {
			console.log("Child changed");
			this.update();
		},

		onDragStop : function() {
			if (this.actionURL) {
				var offset = this.spacer.offsetLeft;
				new Ajax.Request(this.actionURL + "&args._sp_offset=" + offset);
			}
		},

		cleanup : function() {
			this.draggable.destroy();
			Event.stopObserving(document.onresize ? document : window, "resize", this.updateEvent);
		}
	});

})();