var marq;
var inner = new Object;
var outer = new Object;
var src = 'templates/hafenlass.png';
var modus = 'outer';
var slider;
var smartBorder = new Object;
		
Event.observe( window, 'load',function() { 
	var rules = {
		'.tpl' : function(el) {
			el.onclick = function() {
		    smartBorder.url = el.src;
			$('bg').innerHTML = '<img id="tpl" src="'+ smartBorder.url +'" />';
			inner = [];
			outer= [];
			marq = new Marquee('tpl', {
				color:'#F60',
				opacity:0.45,
				coords: {x1: 0, y1: 0, width: 140, height:170}
				});
		    marq.setOnUpdateCallback(onUpdate);	
		    slider.setValue(2);	
			
			}
		},	
		'#ta' : function(el) {
			var pe1 = new PeriodicalExecuter(syncTa,0.01);
			var pe2 = new PeriodicalExecuter(syncBG,0.8);

		},
	 	'#slider' : function(el) {
	 			slider = new Control.Slider('knob','slider',{range:$R(0,92),values:[2,93],alignX:2,onChange:sliderChanged});
		},
		'#inner' : function(el) {
			el.onclick = function() {
				slider.setValue(92);
				$$('.co').each(function(e){e.className='co pass'});
				el.className='co act';
				
				
			}
		},
		'#outer' : function(el) {
			el.onclick = function() {
				slider.setValue(2);	
				$$('.co').each(function(e){e.className='co pass'});
				el.className='co act';
				
			}
				
		}

	};
 	Behaviour.register(rules);
	Behaviour.apply(rules); 
	new AjaxUpload('hoch', {action: 'upload.php'});
	marq = new Marquee('tpl', {
				color:'#F60',
				opacity:0.45,
				coords: {x1: 6, y1: 9, width: 100, height:100}
				});
	marq.setOnUpdateCallback(onUpdate);	
	smartBorder.url = 'templates/hafenlass.png';
	
});

function sliderChanged(p) {
	modus = (p<50) ? 'outer' : 'inner';
	$('bg').innerHTML = '<img id="tpl" src="'+ smartBorder.url +'" />';
	
	
	if (modus == 'outer') {
		color= '#f60';
		var width = 
		marq = new Marquee('tpl', {
				color:color,
				opacity:0.45,
				coords: {
					x1: outer.x0 || 6, 
					y1: outer.y0  || 9, 
					width  : outer.x1-outer.x0 || 100, 
					height : outer.y1-outer.y0 || 100
					}
				});
	
	} else {
		color = '#6F0'
		marq = new Marquee('tpl', {
				color:color,
				opacity:0.45,
				coords: {
					x1: inner.x0 || 15, 
					y1: inner.y0  || 17, 
					width: inner.x1-inner.x0 || 100,
					height:inner.y1-inner.y0 || 100,}
				});
	}
	marq.setOnUpdateCallback(onUpdate);	
}


function onUpdate() {
    	var coords = marq.getCoords();
		if (modus=='outer') {
			outer.x0 = coords.x1;
			outer.y0 = coords.y1;
			outer.x1 = coords.x2;
			outer.y1 = coords.y2;
		} else  {
			inner.x0 = coords.x1;
			inner.y0 = coords.y1;
			inner.x1 = coords.x2;
			inner.y1 = coords.y2;
        }
        smartBorder.width = parseInt(inner.x1) - parseInt(inner.x0);
        if ( smartBorder.width <80) smartBorder.width =80;
        smartBorder.borderTop = parseInt(inner.y0) - parseInt(outer.y0);
        smartBorder.borderLeft = parseInt(inner.x0) - parseInt(outer.x0);
        smartBorder.borderRight = parseInt(outer.x1) - parseInt(inner.x1);
        smartBorder.borderBottom = parseInt(outer.y1) - parseInt(inner.y1);
  	    smartBorder.marginLeft =  parseInt(outer.x0);
  		smartBorder.marginTop =  parseInt(outer.y0);
 }

var old = null;
	
function syncTa() {
	var ta = $('ta');
	ta.style.height = ta.scrollHeight+"px"; 
	ta.style.marginTop = smartBorder.borderTop +'px';
	ta.style.marginLeft = smartBorder.borderLeft +'px';
	ta.style.width  = smartBorder.width + 'px';
	$('res').style.height = smartBorder.borderTop + $('ta').getDimensions().height + smartBorder.borderBottom + 'px';
	$('res').style.width  = smartBorder.width + smartBorder.borderLeft + smartBorder.borderRight +'px';
	$('tatop').style.backgroundPosition = '-' +outer.x0 + ' -' + outer.y0;
	$('tatop').style.backgroundImage = 'url('+ smartBorder.url +')';
	$('tatop').style.top = $('tatop').style.left     = '0';
	$('tatop').style.width = smartBorder.width + smartBorder.borderLeft+ smartBorder.borderRight +'px';
	$('tatop').style.height = -outer.y0+inner.y0 +'px';
	$('tabottom').style.width = smartBorder.width + smartBorder.borderLeft+ smartBorder.borderRight +'px';
	$('tabottom').style.bottom = '0pt';
	$('tabottom').style.left = '0pt';
	$('tabottom').style.height = smartBorder.borderBottom + 'px';
	$('tabottom').style.backgroundPosition =  '-' + outer.x0  + ' -' + inner.y1;
	$('tabottom').style.backgroundRepeat =  'no-repeat';   
	$('tabottom').style.backgroundImage ='url('+ smartBorder.url+')';
	$('taleft').style.left='0';
	$('taleft').style.height = $('ta').style.height;
	$('taleft').style.width = smartBorder.borderLeft + 'px';
	$('taleft').style.top =  -outer.y0+inner.y0 +'px';
	$('taleft').style.backgroundPosition =  '-' + outer.x0  + ' -' + inner.y1;
	$('taright').style.right='0';
	$('taright').style.height = $('ta').style.height;
	$('taright').style.width = smartBorder.borderRight + 'px';
	$('taright').style.top = smartBorder.borderTop +'px';
	var posix = smartBorder.marginLeft  + smartBorder.borderLeft +  smartBorder.width;
	$('taright').style.backgroundPosition = -posix + ' ' + 0;
}

function syncBG() {
/* nur neubauen, wenn sich wichtige Parameter ändern: */
    if (old != smartBorder.url + smartBorder.borderTop + smartBorder.marginTop) {
		$('taleft').style.backgroundImage =  'url(./cropper.php?json='+ encodeURI(smartBorder.toJSONString()) + ')';
		$('taright').style.backgroundImage =  'url(./cropper.php?json='+ encodeURI(smartBorder.toJSONString()) + ')';
		old = smartBorder.url + smartBorder.borderTop + smartBorder.marginTop;
	
	}
}