/* *********************************************************************** */
/* JavaScript for AXIS Warhammer Signature Frontend XHTML                  */
/* ----------------------------------------------------------------------- */
/* @author Markus Geiger <mg@memedia.de>                                   */
/* @TODO implement Exception Handler/ErrorHandling                         */
/* *********************************************************************** */


var Content = Object();
Content.hasInitialized = false;
Content.highlightedBackgroundImageElem = null;

Content.initalize = function() {

	
	
	if (Content.hasInitialized)
		return false;
	Content.hasInitialized = true;
		
	Event.observe('backgroundImage', 'change', Content.highlightBackgroundImage);
	Event.observe('backgroundImage', 'keypress', Content.highlightBackgroundImage);
	Content.highlightBackgroundImage();
	
	
	
	// Create color fields
	$$('#signatureForm .colorbox').each(function(elem) {
		var idx=elem.getAttribute('name');
		new Insertion.After(
			elem,
			 '<button type="button" id="'+idx+'-colorbox" style="cursor:pointer;width:110px;height:24px;text-align:center;border:1px #ccc solid"/>'
		);
		elem.hide();
		
		new Control.ColorPicker(
			elem, 
			{ 
				"swatch" : 	idx+'-colorbox',
				IMAGE_BASE : "/inc/js/colorpicker/img/" 
			}
		);
		
	});


	
	// Avatar Dropdown
	var elem = $('avatarId');
	if (elem) {
		Event.observe(elem, 'change',  function(event) {
			var elem = Event.element(event);
			var formElem = $('signatureForm');
			var form = new Element('form', {
				action: formElem.getAttribute('action'),
				method: 'POST'
			});
			form.appendChild(
				new Element('input', { name: "avatarId", value: elem.getValue() })
			);
			var formX = document.body.appendChild(form);
			
			formX.submit();
		});
	}
	

	// Einblend-Effekt bei geladener Signatur
	$$('.signatures .signature.default').each(function (elem) {
		Event.observe(elem, 'load',  function(event) {
			// Erscheinen-Effekt
			var elem = Event.element(event);
			elem.hide();
			Effect.Appear(elem,{duration:2});
		
			// Scroll to sig wenn au�erhalb viewport
			var scrollOffsets  = document.viewport.getScrollOffsets();
			var elementOffsets = $('sigTop').cumulativeOffset();
			if (elementOffsets[1]<scrollOffsets[1]) {
				new Effect.Tween(
					null,
					scrollOffsets[1],
					elementOffsets[1],
					{
						duration: 0.5
					},
					function(p){
						var scrollOffsets  = document.viewport.getScrollOffsets();
						scrollTo(scrollOffsets[0], p)
					}
				);
			}
		}); 
	});

				

	

	// Submit für Signatur
	Event.observe('signatureForm', 'submit',  function(event) {
		Event.stop(event);
		
		var formElem = $('signatureForm');
		var sigElem = $$('.signatures .signature.default')[0];
		sigElem.hide();
		new Ajax.Request(formElem.getAttribute('action'), {
			method: 'post',
			timeout:20,
			postBody: formElem.serialize()+'&output=json',
			// requestHeaders: ['Content-Type', 'text/html', 'Cache-Control', 'no-cache, must-revalidate'],
			onSuccess: function(transport, json) {
				if (!transport.responseJSON) {
					// alert(transport.responseText);
					var elem = new Insertion.Top($('errorMessageBox'), '<div class="message">'+transport.responseText+'</div>'); 
					return false;
				}
				
				if (transport.responseJSON.signature.errorMessage) {
					alert('ERROR: '+transport.responseJSON.signature.errorMessage);
					return false;
				}
				
				// Infotexte f�r Signatur
				if (transport.responseJSON.signature.isPersistent) {
					$$('#codeset div.sigInfo.unique')[0].hide();
					$$('#codeset div.sigInfo.persistent')[0].show();
				} else {
					$$('#codeset div.sigInfo.unique')[0].show();
					$$('#codeset div.sigInfo.persistent')[0].hide();
				}
				
				
				var url = transport.responseJSON.signature.images[0].url+'?randomHash='+1000000000000*Math.random();

				var i = 0;				
				$$('.codeset input').each(function (elem) {
					elem.value = transport.responseJSON.signature.images[0].codeset[i].value;
					i++;
				});
				
				$('codeset').show();
				
				var sigElem = $$('.signatures .signature.default')[0];
				sigElem.src =  url;
				sigElem.hide();
			}, 
			onFailure: function (event) {
				alert("Ooops… da ist offensichtlich ein Fehler aufgetreten?!");
			}
		});
	});
	
	// Markieren f�r Codeboxen
	$('codeset').delegate('click', 'input', function(event) {
		var elem = Event.element(event); 
		elem.select();
		event.stop();
	}); 
	
	// What do do when backgroudn image is clicked?
	$('backdropSelectBox').delegate('click', 'img', function(event){
		var elem = Event.findElement(event, 'img');
		var imageName=elem.getAttribute('value');
		$('backgroundImage').setValue(imageName);
		Content.highlightBackgroundImage();
		event.stop();
	});
	
	// Disable drag from images
	$('backdropSelectBox').delegate('mousedown', 'img', function(event){
		event.stop();
		return false;
	});
	
	$('backgroundImage').up().up().hide();
	
}

Content.highlightBackgroundImage = function scrollPane() {

}

// Highlight image
Content.highlightBackgroundImage = function(e) {
	
	if (Content.highlightedBackgroundImageElem) {
		Content.highlightedBackgroundImageElem.setStyle({
			'border':'0', 'padding': '2px'
		});
		$('backroundImageHightlight').remove(); 
	}
	
	var imageName = $('backgroundImage').value;
	var elem = $$('#backdropSelectBox img[value='+imageName+']')[0];
	elem.setStyle({
		'border': '2px red solid',
		'padding': ''
	});
	new Insertion.After(
		elem, 
		"<div id=\"backroundImageHightlight\" style=\"position:absolute;left:0;top:0;width:502px;"+
		"height:200px;background-color:#F99;opacity:0.3;-moz-opacity:0.3;-opera-opacity:0.3;"+
		"-khtml-opacity:0.3;filter:Alpha(Opacity=30);\"></div>"
	); 
	Content.highlightedBackgroundImageElem = elem;
	
	// -----------------------------------------------------------------------
	// Beckground scollbox auf element scrollen
	
	var scrollBoxElem = $('backdropSelectBox');
	var scrollBoxHeight = scrollBoxElem.getHeight();
	var scrollBoxTop    = Position.cumulativeOffset(scrollBoxElem)[1];
	var scrollBoxOffset = scrollBoxElem.scrollTop;
	var elemTop = Position.cumulativeOffset(elem)[1]; 
	var elemHeight = elem.getHeight();
	var a = ((elemTop+elemHeight-scrollBoxOffset)<(scrollBoxTop));
	var b = ((elemTop-scrollBoxOffset)>(scrollBoxTop+scrollBoxHeight));
	if (a || b) {
		var newtop = elemTop-scrollBoxTop;
		/*
		new Effect.Tween(
			scrollBoxElem,
			scrollBoxElem.scrollTop,
			newtop,
			{
				duration: 2
			}, 
			function(p) {
				$('backdropSelectBox').scrollTop = p;
			}
		);
		*/
		scrollBoxElem.scrollTop = newtop;
	}
}
/*
var adResizer = setInterval(function() {
	var elem = $('adServerBox');
	if (!elem) return;
	height = elem.getHeight();
	$$('allvatarAdBox embed').each(function(elem){
		elem.setStyle({height:height+'px'});
	});
	$$('allvatarAdBox object').each(function(elem){
		elem.setStyle({height:height+'px'});
	});
	clearInterval(adResizer);
}, 100);
*/

document.observe("dom:loaded", Content.initalize);
Event.observe(window, 'contentloaded',  Content.initalize);
Event.observe(window, 'load', Content.initalize);