Ext.namespace('TYPO3.rsAmpersande');

TYPO3.rsAmpersande.baseCls = 'rsAmpersande';

TYPO3.rsAmpersande.Base = function() {};


/**
 * class for rendering the horizontal slider
 */
TYPO3.rsAmpersande.ListElementBar = Ext.extend(TYPO3.rsAmpersande.Base, {
	toolbarWidth: 0,
	totalElementWidth: 0,
	el: null,
	innerEl: null,
	totalWidth: null,

	constructor: function() {
		this.el = Ext.get('rsAmpersande-ListElementBar');

		// create two divs. the first will hold the scrolling div, th
		// latter will contain all contentTypeItems
		this.innerEl = this.el.insertFirst({
			'id':  'rsAmpersande-ListElementBar-inner',
			'tag': 'div',
			'cn': [{
				'tag': 'div',
				'id': 'rsAmpersande-ListElementBar-scroller'
			}]
		});


		// move all draggables in the scrolling container
		Ext.select('.rsAmpersande-ListItem', false, this.el.dom).each(function (el) { 
			el = Ext.get(el);
			this.totalElementWidth += el.getWidth();
			el.appendTo(this.innerEl.first());
		}, this);

		// create the arrows
		Ext.DomHelper.insertBefore(this.innerEl, {
			tag: 'div',
			id: 'rsAmpersande-ListElementBar-arrLeft',
			html: ''
		}, true).on('click', function() { this.scroll('left'); }, this);
		Ext.DomHelper.insertAfter(this.innerEl, {
			tag: 'div',
			id: 'rsAmpersande-ListElementBar-arrRight',
			html: ''
		}, true).on('click', function() { this.scroll('right'); }, this);

		// reset the left margin and set the innerWidth of the scroller to the maximum size
		this.el.setStyle('marginLeft', '0px');
		Ext.get('rsAmpersande-ListElementBar-scroller').setWidth(this.totalElementWidth + 25);

		// calculate the width for the scrolling bar and set up an event for that
		this.recalculateAvailableWidth();
		Ext.EventManager.on(window, 'resize', this.recalculateAvailableWidth, this);
	},

	/**
	 * this method calculates the width in the secondRow that is available
	 * for the new Content Elements
	 */
	recalculateAvailableWidth: function() {
		var availableWidth = Ext.getBody().getWidth();

		// get all divs that are in the second row and subtract the available width
		Ext.select('div#rsAmpersande-ListElementBar > div').each(function(el) {
			var el = Ext.get(el);
			var width = el.getWidth();
			if (el.dom.id != this.el.dom.id && width > 0) {
				availableWidth -= width;
			}
		}, this);
		this.toolbarWidth = '758';
		this.el.setWidth(this.toolbarWidth);
		
		// check if scrolling is needed
		if (this.toolbarWidth <= this.totalElementWidth) {
			this.innerEl.setWidth(this.toolbarWidth - 40);
			Ext.get('rsAmpersande-ListElementBar-arrLeft').show();
			Ext.get('rsAmpersande-ListElementBar-arrRight').show();
		} else {
			// all icons have space without scrolling
			this.innerEl.setWidth('auto');
			this.el.setWidth(this.innerEl.getWidth() + 40);
			Ext.get('rsAmpersande-ListElementBar-arrLeft').hide();
			Ext.get('rsAmpersande-ListElementBar-arrRight').hide();
		}
	},

	/*
	 * this method actually does the scrolling, which is currently done by a certain fix
	 * amount of pixels (100), but could be on a per item basis later on
	 */
	scroll: function(direction) {
		var by = -360;
		var currentPos = parseInt(this.innerEl.first().getStyle('marginLeft'));
		var anim = {by: by, unit: 'px' };
		if (direction == 'left') {
			anim.by = Math.abs(by);
			if (currentPos >= 0) {
				anim = { to: 0, unit: 'px' };
			}
		} else {
			if (Math.abs(currentPos) >= (this.totalElementWidth-this.toolbarWidth)) {
				anim = { by: 0, unit: 'px' };
			}
		}
		this.innerEl.first().animate({ marginLeft: anim }, 0.3, null, 'easeOut', 'run');
	}
});


// Set the edit panels and menu bar on window load 
Ext.onReady(function() { 
	new TYPO3.rsAmpersande.ListElementBar();
});

function update(uid) {
	Ext.get("content").load({
        url: "index.php",
        scripts: true,
        params: "id=5&type=377&&tx_rsampersande_pi1[referenz]="+uid
});
}