var activeLibary = '';
var activeElement = '';

var activePart = 0;
var elementCount = 0;
var zIndexCount = 200;

var paddingTop = 0;
var paddingBottom = 0;
var paddingLeft = 0;
var paddingRight = 0;

var moveAreaDiff = 0;
var resizeButtonDiff = 17;

var objectDraged = false;
var objectClicked = false;

var partConfiguration = new Array();

function loadkbrewesCustomizerToolbar(parameter) {

	showLoading('toolbar');

	$('tab-text').className = 'tab';
	$('tab-image').className = 'tab';
	$('tab-'+parameter['type']).className = 'tab-act';
	
	xajax_kbrewesCustomizer.loadToolbar( parameter );
}

function createkbrewesCustomizerElement(elementType, position, zindexcount, align_horizontal, align_vertical) {

	var item = activePart+'-'+elementCount;

	//Create Element
	$('part'+activePart).appendChild(
		Builder.node('div',{id:elementType+'box'+item, className:'elementbox', zindex:elementCount+100},[
			Builder.node('div', {className:'delete', id:'delete'+item}),			

			Builder.node('input', {type:'hidden', name:'kbrewesCustomizer['+activePart+'][position]['+elementCount+']', value:position, id:'position'+item}),
			Builder.node('input', {type:'hidden', name:'kbrewesCustomizer['+activePart+'][zindexcount]['+elementCount+']', value:zindexcount, id:'zindexcount'+item}),
			Builder.node('input', {type:'hidden', name:'kbrewesCustomizer['+activePart+'][align_horizontal]['+elementCount+']', value:align_horizontal, id:'align_horizontal'+item}),
			Builder.node('input', {type:'hidden', name:'kbrewesCustomizer['+activePart+'][align_vertical]['+elementCount+']', value:align_vertical, id:'align_vertical'+item})
		])
	);

	if(partConfiguration[activePart]['fullpartlibitem'] == false || elementType == 'text')
		$(elementType+'box'+item).appendChild(Builder.node('div', {className:'movearea', id:'movearea'+item, onmouseover:'$(this).className="movearea movearea-hover";', onmouseout:'$(this).className="movearea";'}));

	if(partConfiguration[activePart]['fullpartlibitem'] == false || elementType == 'text')
		$(elementType+'box'+item).appendChild(Builder.node('div', {className:'resize', id:'resize'+item}));

	//Set ZIndex
	if(zindexcount > 0) zIndexCount = zindexcount;

	//Dragable
	if(partConfiguration[activePart]['fullpartlibitem'] == false || elementType == 'text')
		new Draggable($(elementType+'box'+item), {
			handle: 'movearea', 
			snap: function(x,y,draggable) {
				function constrain(n, lower, upper) {
					if(n > upper) return upper;
					else if(n < lower) return lower;
					else return n;
				}
	
				element_dimensions = Element.getDimensions(draggable.element);
				parent_dimensions = Element.getDimensions(draggable.element.parentNode);

				return[
					constrain(x, paddingLeft, parent_dimensions.width - element_dimensions.width - paddingRight),
					constrain(y, paddingTop, parent_dimensions.height - element_dimensions.height - paddingBottom)
				];
			},
			onStart: function() {
				objectDraged = true;
			},
			onEnd: function() {
				$('position'+item).value = Element.getStyle($(elementType+'box'+item), 'top')+':'+Element.getStyle($(elementType+'box'+item), 'left');
				$('align_horizontal'+item).value = 0;
				$('align_vertical'+item).value = 0;

				objectDraged = false;
			}
		});

	//Delete
	$('delete'+item).observe('click', function(event) {
		$(this.getOffsetParent()).remove();
		loadkbrewesCustomizerToolbar({type:elementType, part:activePart});
	});

	//SelectElement
	selectkbrewesCustomizerElement(item);

	//++ Elementcount
	elementCount++;
}

function createkbrewesCustomizerText(text, position, zindexcount, align_horizontal, align_vertical, fontsize, fontfamily, fontcolor, textalign) {
	
	//Create New Element Type Text
	createkbrewesCustomizerElement('text', position, zindexcount, align_horizontal, align_vertical);

	//var newtext = text.replace(/newline/g, "\n");

	var item = activePart+'-'+(elementCount-1);

	$('textbox'+item).appendChild(Builder.node('div', {className:'textarea', id:'textarea'+item}));
	$('textbox'+item).appendChild(Builder.node('div', [
		Builder.node('input', {type:'hidden', name:'kbrewesCustomizer['+activePart+'][text]['+(elementCount-1)+']', value:text, id:'text'+item}),
		Builder.node('input', {type:'hidden', name:'kbrewesCustomizer['+activePart+'][fontsize]['+(elementCount-1)+']', value:fontsize, id:'fontsize'+item}),
		Builder.node('input', {type:'hidden', name:'kbrewesCustomizer['+activePart+'][fontfamily]['+(elementCount-1)+']', value:fontfamily, id:'fontfamily'+item}),
		Builder.node('input', {type:'hidden', name:'kbrewesCustomizer['+activePart+'][fontcolor]['+(elementCount-1)+']', value:fontcolor, id:'fontcolor'+item}),
		Builder.node('input', {type:'hidden', name:'kbrewesCustomizer['+activePart+'][textalign]['+(elementCount-1)+']', value:textalign, id:'textalign'+item}),
		Builder.node('input', {type:'hidden', name:'kbrewesCustomizer['+activePart+'][textwidth]['+(elementCount-1)+']', value:0, id:'textwidth'+item})
	]));

	//Click
	$('textbox'+item).observe('click', function(event) {

		if(!$('textbox'+item))
			return;

		itemParts = item.split('-');

		//if(objectDraged) return;
		if(activePart != itemParts[0]) setkbrewesCustomizerPartActive(itemParts[0]);

		selectkbrewesCustomizerElement(item);

		loadkbrewesCustomizerToolbar({
			type:'text',
			part:activePart, 
			item:item,
			text:$('text'+item).value,
			fontsize:$('fontsize'+item).value,
			fontfamily:$('fontfamily'+item).value,
			fontcolor:$('fontcolor'+item).value,
			textwidth:$('textwidth'+item).value,
			textalign:$('textalign'+item).value,
			align_horizontal:$('align_horizontal'+item).value,
			align_vertical:$('align_vertical'+item).value		
		});

		objectClicked = true;
	});

	//Resize
	new Resizeable($('textbox'+item), {
		handle:$('resize'+item),
		top: 0, 
		left: 0,
		maxWidth: partConfiguration[activePart]['width'],//$('part'+activePart).getWidth('width'),
		maxHeight: partConfiguration[activePart]['height'],//$('part'+activePart).getHeight('height'),
		resize: function(el) {			
			var newFontsize = Math.round((($(el).getWidth('width') * $('fontsize'+item).value) / $('textwidth'+item).value));
		
			xajax_kbrewesCustomizer.updateText({item:item, text:$('text'+item).value, fontcolor:$('fontcolor'+item).value, fontsize:newFontsize, textwidth:$(el).getWidth('width'), fontfamily:$('fontfamily'+item).value, textalign:$('textalign'+item).value, align_horizontal:$('align_horizontal'+item).value, align_vertical:$('align_vertical'+item).value});
		},
		duringresize: function(el) {
			$('movearea'+item).hide();
		}
	});
}

function createkbrewesCustomizerImage(file, position, zindexcount, align_horizontal, align_vertical, width, height) {

	//Create New Element Type Image
	createkbrewesCustomizerElement('image', position, zindexcount, align_horizontal, align_vertical);

	var item = activePart+'-'+(elementCount-1);

	$('imagebox'+item).appendChild(Builder.node('img', {className:'imagefile', src:file, id:'image'+item}));
	$('imagebox'+item).appendChild(Builder.node('div', [
		Builder.node('input', {type:'hidden', name:'kbrewesCustomizer['+activePart+'][dimension]['+(elementCount-1)+']', value:width+':'+height, id:'dimension'+item}),
		Builder.node('input', {type:'hidden', name:'kbrewesCustomizer['+activePart+'][filename]['+(elementCount-1)+']', value:file, id:'filename'+item})
	]));

	//Click
	$('imagebox'+item).observe('click', function(event) {

		if(!$('imagebox'+item))
			return;

		itemParts = item.split('-');

		//if(objectDraged) return;
		if(activePart != itemParts[0]) setkbrewesCustomizerPartActive(itemParts[0]);

		selectkbrewesCustomizerElement(item);

		loadkbrewesCustomizerToolbar({
			type:'image',
			part:activePart, 
			item:item,
			file:$('filename'+item).value,
			align_horizontal:$('align_horizontal'+item).value,
			align_vertical:$('align_vertical'+item).value		
		});

		objectClicked = true;
	});

	//Resize
	if(partConfiguration[activePart]['fullpartlibitem'] == false)
		new Resizeable($('imagebox'+item), {
			handle:$('resize'+item),
			top: 0, 
			left: 0,
			maxWidth: partConfiguration[activePart]['width'],//$('part'+activePart).getWidth('width'),
			maxHeight: partConfiguration[activePart]['height'],//$('part'+activePart).getHeight('height'),
			resize: function(el) {
				$($('image'+item)).setStyle({width:($(el).getWidth('width') - 2) + "px",height:($(el).getHeight('height') - 2) + "px"});
				$($('dimension'+item)).value = $(el).getWidth('width')+':'+$(el).getHeight('height');
				$($('movearea'+item)).show();
				$($('movearea'+item)).setStyle({width:$(el).getWidth('width') + "px",height:($(el).getHeight('height') - moveAreaDiff) + "px"});
				$($('resize'+item)).setStyle({top:($(el).getHeight('height') - 16) + "px"});
			},
			duringresize: function(el) {
				$($('image'+item)).setStyle({width:($(el).getWidth('width') - 2) + "px",height:($(el).getHeight('height') - 2) + "px"});
				$($('movearea'+item)).hide();
				$($('movearea'+item)).setStyle({width: ($(el).getWidth('width')) + "px",height: ($(el).getHeight('height') - moveAreaDiff) + "px"});
			}
		});
}

function deselectkbrewesCustomizerElement(item) {

	var box = $('textbox'+item) ? $('textbox'+item) : $('imagebox'+item);
	
	if(!box)
		return;

	box.className = 'elementbox';

	itemParts = item.split('-');

	$('delete'+item).hide();
	
	if(partConfiguration[itemParts[0]]['fullpartlibitem'] == false)
		$('resize'+item).hide();
}

function selectkbrewesCustomizerElement(item) {

	var box = $('textbox'+item) ? $('textbox'+item) : $('imagebox'+item);

	if(!box) return;

	zIndexCount++;

	itemParts = item.split('-');
	
	$('delete'+item).show();

	if(partConfiguration[itemParts[0]]['fullpartlibitem'] == false)
		$('resize'+item).show();

	$('zindexcount'+item).value = zIndexCount;

	box.className = 'elementbox-selected';
	box.style.zIndex = zIndexCount;

	if(activeElement != '' && item != activeElement)
		deselectkbrewesCustomizerElement(activeElement);

	activeElement = item;
}

function setkbrewesCustomizerPartActive(part) {
	
	for(var i = partBegin; i <= partsCount; ++i)
		if($('part'+i))
			$('part'+i).className = 'partbox-inactive';

	$('part'+part).className = 'partbox';

	if(part == activePart) return;

	activePart = part;
}

function setkbrewesCustomizerTextAlign(align) {

	$('text-align-left').src = "kbrewes/extensions/kbrewesCustomizer/templates/images/text-align-left.gif";
	$('text-align-center').src = "kbrewes/extensions/kbrewesCustomizer/templates/images/text-align-center.gif";
	$('text-align-right').src = "kbrewes/extensions/kbrewesCustomizer/templates/images/text-align-right.gif";
	$('text-align-'+align).src = "kbrewes/extensions/kbrewesCustomizer/templates/images/text-align-"+align+"-act.gif";

	$('textalign').value = align;
}


function setkbrewesCustomizerElementHorizontal(item, width, part) {

	var box = $('textbox'+item) ? $('textbox'+item) : $('imagebox'+item);
	
	$(box).setStyle({left:((partConfiguration[part]['width'] - width) / 2) + "px"});
	$('position'+item).value = Element.getStyle(box, 'top')+':'+Element.getStyle(box, 'left');
}


function setkbrewesCustomizerElementVertical(item, height, part) {

	var box = $('textbox'+item) ? $('textbox'+item) : $('imagebox'+item);

	$(box).setStyle({top:((partConfiguration[part]['height'] - height) / 2) + "px"});
	$('position'+item).value = Element.getStyle(box, 'top')+':'+Element.getStyle(box, 'left');
}

function selectkbrewesCustomizerLibary(libary) {
	
	if($('libitem'+activeLibary)) $('libitem'+activeLibary).className = 'libitem';
	$('libitem'+libary).className = 'libitem selected';

	activeLibary = libary;
}

function loadkbrewesCustomizerLibary(libaryname) {
	
	showLoading('libarybox');
	
	xajax_kbrewesCustomizer.loadLibary(libaryname);
}

function showLoading(box) {
	
	$(box).innerHTML = '<div class="inner-content"><img src="templates/brewes/img/ajax-loader.gif" border="0" /> Lade Daten...</div>';
}

function str_replace(search, replace, subject) {
	return subject.split(search).join(replace);
}