if(typeof console == 'undefined')
	console = {log : function(mess){}};

function var_dump(element, limit, depth)
{
    depth = depth?depth:0;
    limit = limit?limit:1;
       
    returnString = '<ol>';
   
    for(property in element)
    {
        //Property domConfig isn't accessable
        if (property != 'domConfig' && property != 'selectionStart' && property != 'selectionEnd' && property != 'classes' && property != 'classesByID' && property != 'stack')
        {
            returnString += '<li><strong>'+ property + '</strong> <small>(' + (typeof element[property]) +')</small>';
               
            if (typeof element[property] == 'number' || typeof element[property] == 'boolean')
                returnString += ' : <em>' + element[property] + '</em>';
            if (typeof element[property] == 'string' && element[property])
                returnString += ': <div style="background:#C9C9C9;border:1px solid black; overflow:auto;"><code>' +
                                    element[property].replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</code></div>';
           
            if ((typeof element[property] == 'object') && (depth <limit))            
                returnString += var_dump(element[property], limit, (depth + 1));
               
            returnString += '</li>';
        }   
    }
    returnString += '</ol>';
   
    if(depth == 0)
    {
        winpop = window.open("", "","width=800,height=600,scrollbars,resizable");
        winpop.document.write('<pre>'+returnString+ '</pre>');
        winpop.document.close();
    }
	
    return returnString;
}


$(function()
{
	$(document).ready(function() 
	{
		if(window.useDiaEditor)
			sos.editor.init();

        $('object[type="application/x-shockwave-flash"]').append('<param name="wmode" value="opaque" />');
	});
	
	/*if(elem = $('#dia-editor'))
	{
		var_dump(elem);
	}	*/
	
	
});


var sos = {
	
	elements : 
	{
		overlay 	: null,
		conditions 	: null,
		login		: null
	},
	
	
	showLogin : function()
	{
		$.ajax({
		   type: "GET",
		   url:  baseUrl + "/register/type/ajax/",
		   success: function(msg){
		     //alert( "Data Saved: " + msg );
			 sos.showModal(msg);
		   }
		 });
		
	},
	
	playAudio : function(filename, elementId)
	{
		var so = new SWFObject(baseUrl + '/assets/swf/player.swf','mpl','220','24','9');
		so.addParam('allowscriptaccess','always');
		so.addParam('allowfullscreen','false');
		so.addVariable('file', filename);
		so.addVariable('autostart', 'true');
		so.write(elementId);
	},	
	showModal : function()
	{
		//alert('test');
		
		/*var overlay = document.createElement('div');
		overlay.style.width = document.body.offsetWidth + 'px';
		overlay.style.height = document.body.offsetHeight + 'px'; //document.documentElement.clientHeight
		overlay.id = 'overlay';
		overlay.name = 'overlay';
		overlay.className = 'overlay';
		alert(document.body.offsetHeight);
		//overlay.innerHTML = result.html;
		//overlay.style.visibility = 'hidden';
		overlay.onclick = function()
		{
			this.style.display='none';
			
			for(el in sos.elements)
				if(sos.elements[el] && sos.elements[el].style)
					sos.elements[el].style.display='none';
		};
		document.body.appendChild(overlay);
		
		sos.elements.overlay = overlay;*/
		
		window.scrollTo(0, 0);
		document.body.style.overflow = 'hidden';
		
		var overlay = document.createElement('div');
		overlay.style.width = document.body.offsetWidth + 'px';
		overlay.style.height = document.documentElement.clientHeight /* || document.defaultView.outerHeight*/ /*|| document.documentElement.clientHeight || document.body.offsetHeight */  + 'px';
		overlay.className = 'overlay-white';
		overlay.onclick = function()
		{
			this.style.display='none';
			
			for(el in sos.elements)
				if(sos.elements[el] && sos.elements[el].style)
					$(sos.elements[el]).remove();
			
			document.body.style.overflow = 'auto';
					//sos.elements[el].style.display='none';
		};
		document.body.appendChild(overlay);
		
		sos.elements.overlay = overlay;
		
		return overlay;
	},
	
	showLogin : function()
	{
		overlay = sos.showModal();

		$.ajax({
		   type: "GET",
		   url: baseUrl + "/register/type/ajax/",
		   success: function(msg){
		   	
				var newElement = document.createElement('div');
				newElement.id = 'register-screen';
				newElement.innerHTML		= msg;
				newElement.style.width		= '500px';
				newElement.style.position	= 'absolute';
				newElement.style.zIndex		= 90;
				newElement.style.marginLeft	= '-250px';
				newElement.style.top		= '300px';
				newElement.style.left		= '50%';
				newElement.style.marginTop	= '-100px';
				
				document.body.appendChild(newElement);
				
				//overlay.screen = newElement;
				
				sos.elements.login = newElement;
				
		   }
		 });
	},
	
	showConditions : function()
	{
		
		$.ajax({
		   type: "GET",
		   url: baseUrl + "/register/conditions/",
		   success: function(msg){
		   	
				overlay = sos.elements.overlay;
			
				var newElement = document.createElement('div');
				newElement.id = 'register-screen';
				newElement.innerHTML		= msg;
				newElement.style.width		= '500px';
				newElement.style.position	= 'absolute';
				newElement.style.zIndex		= 90;
				newElement.style.marginLeft	= '-250px';
				newElement.style.left		= '50%';
				newElement.style.marginTop	= '-250px';
				newElement.style.top		= '300px';
				
				document.body.appendChild(newElement);
				
				sos.elements.conditions = newElement;
				
				//overlay.screen = newElement;
		   }
		 });
	},
	
	collapse	: function(name)
	{
		document.getElementById.style.display	= 'none';
	},
	acceptConditions : function()
	{
		//var conditionNode = document.getElementById('conditions-content').style.display = 'none';
		$(document.getElementById('conditions-content')).remove();
		document.getElementById('conditions').checked = true;
	},
	
	addUser : function()
	{
		var addUserData = document.getElementById('step-copy-user').value;
		var copiedUserBlock = document.getElementById('copied-step-users');
		
		var copiedUserBlockData = copiedUserBlock.innerHTML;
		
		$('.copied-user-result').remove();
		
		document.getElementById('step-copy-error').style.display = 'none';

		if(addUserData.indexOf('@') == -1 && addUserData != '')
		{
			document.getElementById('step-copy-error').style.display = 'block';
			document.getElementById('step-copy-error').innerHTML = 'Geen e-mail adres opgegeven';
			return;
		}

		var mail = $.JSON.encode(addUserData);

		if (addUserData != '')
		{
			$.ajax({
				type: "POST",
				data : {'email' : mail},
				url:  baseUrl + '/verhalen/page/stepcopycheck/',
				success: function(msg)
				{
					// User found in system... copy to the HTML element.
					if(msg == 1)
					{
						if(addUserData != '')
						{	
							copiedUserBlock.innerHTML =  copiedUserBlockData + '<div style="margin-bottom: 7px;" id="mail_' + addUserData + '"><div style="float: left;">' + addUserData + '</div><div onclick="sos.deleteCopyUser(\'' + addUserData + '\');" style="cursor: pointer; float: right; margin-right: 3px; margin-left: 3px;"><img src="' + baseUrl + '/assets/img/x.png" alt="" title="verwijderen" /></div><div style="display: none; clear: both;" id="mail_' + addUserData + '_existanceCheck"></div><div style="clear: both;"></div></div>';
							copiedUserBlock.style.display = 'block';
							document.getElementById('copied-user-block').style.display = 'block';
							document.getElementById('step-copy-submit-button').style.display = 'block';
							document.getElementById('step-copy-user').value = '';
						}
					}
					// Entered your own user mail... not valid.
					else if(msg == 2)
					{
						document.getElementById('step-copy-error').style.display = 'block';
						document.getElementById('step-copy-error').innerHTML = 'Het is niet mogelijk naar jezelf een kopie te sturen';
					}
					// User not found in system.
					else
					{
						sos.deleteCopyUser(addUserData);

						document.getElementById('step-copy-error').style.display = 'block';
						document.getElementById('step-copy-error').innerHTML = 'E-mail adres niet gevonden in het systeem';
					}
				}
			});
		}
	},
	
	deleteCopyUser : function(userToBeDeleted)
	{
		var copiedUserBlock = document.getElementById('copied-step-users');	
		var removeUser = document.getElementById('mail_' + userToBeDeleted);
		var submitButton = document.getElementById('step-copy-submit');
				
		$(removeUser).remove();
		
		var copiedUserBlockContent = copiedUserBlock.innerHTML;
		
		if(copiedUserBlockContent.indexOf('@') == -1)
		{
			copiedUserBlock.style.display = 'none';
			$('#copied-user-block').hide();
		}
	},
	
	mailUsers : function()
	{
		var copiedUserBlock = document.getElementById('copied-step-users');
		var copiedUserBlockData = copiedUserBlock.innerHTML;
		
		var data = $.JSON.encode(copiedUserBlockData);
		var checklistId = $('#content input[type="hidden"]')[0].value;
		
		$.ajax({
			   type: "POST",
			   data : {'users' : data},
			   url:  baseUrl + '/verhalen/page/savestepcopy/id/' + checklistId,
			   success: function(msg)
			   {
					if(window.sos.noredirect != true)
						window.location = baseUrl + '/verhalen/page/stepcopy/stepcopydone/1/id/' + checklistId;
			   }
		});
	},
	
	editor : 
	{
		elements 	: [],
		busy 		: false,
		init 		: function()
		{
			this.createToolbox();
			this.initScroller();
		
		},
		createToolbox : function()
		{
			var scrollTop = document.getElementById('content-scroll').scrollTop;
			this.elements = [];
			
			$('.step-tools').each(function()
			{
				var split 	= this.id.split('-');
				var number 	= split[split.length -1];
				
				var container = $('#step-table-' + number);
				
				var height = container[0].offsetHeight;
		
				var margin = 40;
				if(!this.rendered)
				{
					this.style.height	= (height + margin) + 'px';
					margin = 0;
					this.rendered = true;
				}
				
				
				var elements = sos.editor.elements;
				
				var lastElement 	= elements.length > 0 ? elements[elements.length -1]: {'top': 0, 'bottom': 0, 'center' : 0, 'id' : false};
				var currentElement	= {'top': lastElement.bottom, 'bottom' : lastElement.bottom + (height + 40), 'center' : lastElement.bottom + ((height + margin) /2 ), 'id' : this.id};
				elements.push(currentElement)
				
				console.log('#step-table-' + number);
				
				if( !(currentElement.top <= scrollTop && currentElement.bottom >= scrollTop))
				{
					this.style.display	= 'none';
				}
				
				
				container.find('img, h1, .step-content-description').each(function(){
					this.onclick= function(){
						sos.editor.button.edit(this, container);	
					}
					this.style.cursor = 'pointer';
					
				});
				
				
				
			});
		
		},
		
		reposition	: function()
		{
			var scrollTop = document.getElementById('content-scroll').scrollTop;
			
			$(this.elements).each(function(element)
			{
				if(this.id)
				{
					var element = document.getElementById(this.id);
					
					if( this.top - 400 >= scrollTop && this.bottom >= scrollTop - 250)
					{
						//console.log( 'top: ' + this.top  + ' - bottom: ' + this.bottom + '- window: ' + scrollTop + ' (hide)');
						element.style.display	= 'none';
					}
					else
					{
						///console.log( 'top: ' + this.top  + ' - bottom: ' + this.bottom + '- window: ' + scrollTop + ' (show)');
						element.style.display	= 'block';
					}
				}	
					
			});
			
		},	
		reorder : function()
		{
			var count=1;
			$('#content-scroll .step-number').each(function()
			{
				$(this).html(count++);
			});
		},
		reset : function()
		{
			sos.editor.createToolbox();
			sos.editor.reorder();
			sos.editor.reposition();
		},	
		initScroller: function()
		{
			var scroller = document.getElementById('content-scroll');
			
			scroller.onscroll = function(e){
				sos.editor.reposition();
			};
			
		},
		button : 
		{
			moveUp : function(button)
			{
				var container = $(button.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);
				
				container.prev().before(container);
			
				sos.editor.reset();
			},
			moveDown : function(button)
			{
				var container = $(button.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);
				container.next().after(container);
				sos.editor.reset();
				
			},
			remove : function(button)
			{
				var container = button.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
				
				$(container).remove();
				
				sos.editor.reset();
			},
			add : function(button)
			{
				if(sos.editor.busy)
					return;	
				
				sos.editor.busy = true;
				
				var container = button.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
				
				var split 	= container.id.split('-');
				var identifier 	= split[split.length -1];
			
				var number = sos.editor.elements.length + 1;
				
				$.ajax({
					   type: "POST",
					   data : {'number': number}	,
					   url: baseUrl +  "/stories/block/",
					   success: function(msg){
					   	
							var newElement = document.createElement('div');
							newElement.innerHTML = msg;
							
							$(container).after(newElement.children[0]);
						
							sos.editor.reset();
							
							sos.editor.busy = false;
					   }
					 });
			},
			
			save : function()
			{
				//alert('save');
				
				var steps = [];
				
				var counter = 1;
				$('#step-box .step-table').each(function(){
					
					var step = {};
					
					step.image1 = $(this).find('.image1 img')[0].src;
					step.image2 = $(this).find('.image2 img')[0].src;
					step.order 	= counter;
					step.id 	= 0;
					if($(this).find('input').length > 0)
						step.id = $(this).find('input')[0].value;	
					
					step.title 	= 'Stap ' + counter++;//$(this).find('h1')[0].innerHTML.trim();
					
					var textContent = $(this).find('.step-content-description .step-text-org')[0].innerHTML;//
					
					var audioFile 	= $(this).find('.step-content-description input.step-audio');
					step.audio 		= audioFile[0].value;
					
					if(textContent.trim)
						textContent = textContent.trim();

					textContent 	= textContent.replace(/\n/gi, "");
					textContent 	= textContent.replace(/<br>/gi, "\n");
					textContent 	= textContent.replace(/<br\/>/gi, "\n");
					//console.log(textContent);
					step.text 	= textContent;
					
					steps.push(step);
				});
				
                var checklistTitle = $('#content-scroll #header-title')[0].value;
                
				var data = $.JSON.encode(steps);
				
				var checklistId = $('#content-scroll input[type="hidden"]')[0].value;
				
				$.ajax({
					   type: "POST",
					   data : {'title' : checklistTitle, 'steps' : data},
					   url:  baseUrl + "/verhalen/page/save/id/" + checklistId + '/',
					   success: function(msg)
					   {
                           //alert('succes');
                           
                           //window.sos.noredirect = true;
                           
                            if(window.sos.noredirect != true)
                                window.location = baseUrl + '/verhalen/page/story/id/' + checklistId;
					   }
					 });
			},
			
			//not really a button
			edit : function (button, container)
			{
				window.scrollTo(0, 0);

				overlay = sos.elements.overlay;
				
				document.body.style.overflow = 'hidden';
				
				var overlay = document.createElement('div');
				overlay.style.width = document.body.offsetWidth + 'px';
				overlay.style.height = document.documentElement.clientHeight /* || document.defaultView.outerHeight*/ /*|| document.documentElement.clientHeight || document.body.offsetHeight */  + 'px';
				overlay.id = 'edit-screen';
				overlay.name = 'edit-screen';
				overlay.className = 'edit-screen';
				
				var header = document.createElement('div');
				header.className = 'edit-header';
				
				var box = document.createElement('div');
				box.className = 'box';
				
				var button = document.createElement('div');
				button.className = 'overviewButton';
				var imageBtn = document.createElement('img');
				imageBtn.src =  baseUrl + '/assets/img/button-overview.png';
				
				imageBtn.style.cursor = 'pointer';
				
				imageBtn.onclick = function()
				{
					sos.editor.sync($(this.editStep));
					
					document.body.removeChild(document.getElementById('edit-screen'));
					document.body.style.overflow = 'auto';
				}
				
				button.appendChild(imageBtn);
				box.appendChild(button);
				header.appendChild(box);
				//alert(document.defaultView.outerHeight);
				overlay.appendChild(header);
				
				var orignalStep = $(container[0]).find('.box-white');
				
				sos.editor.diaEditor(orignalStep, overlay, imageBtn);
				
				
				
			}
		},
		setSelectionRange : function (input, selectionStart, selectionEnd)
		{
			if (input.setSelectionRange) {
				input.focus();
				input.setSelectionRange(selectionStart, selectionEnd);
			}
			else if (input.createTextRange) {
				var range = input.createTextRange();
				range.collapse(true);
				range.moveEnd('character', selectionEnd);
				range.moveStart('character', selectionStart);
				range.select();
			}
		},
		

		getSelectionText : function(element)
		{
			if( document.selection ){
				// The current selection
				var range = document.selection.createRange();

				var stored_range = range.duplicate();
				// Select all text
				stored_range.moveToElementText( element );
				// Now move 'dummy' end point to end point of original range
				stored_range.setEndPoint( 'EndToEnd', range );
				// Now we can calculate start and end points
				var selectionStart = stored_range.text.length - range.text.length;
				var selectionEnd = selectionStart + range.text.length;
				
				return {
					'start' : selectionStart, 
					'end' : selectionEnd
				};
			}
			else
			{
				return {
					'start': element.selectionStart, 
					'end': element.selectionEnd	
				};
			}
		},
		
		bbCodeCreator : function (e, startTag, targetId)
		{
			var event = e || window.event;
			var targetElement;
			
			if(document.getElementById && document.getElementById(targetId) != null)
				targetElement = document.getElementById(targetId);
			else
			{
				if(event.preventDefault)
					event.preventDefault();
				else
					event.returnValue = false;
				
				return;
			}
			
			targetElement.focus();
			
			startTag = '[' + startTag + ']';
			var endTag = startTag.replace( /\[/, '[/' );
			
			var selectedElement = sos.editor.getSelectionText(targetElement);

			// Now we can calculate start and end points.
			targetElement.startSelection = selectedElement.start;
			targetElement.endSelection = selectedElement.end;
	
			if (targetElement.selectionStart != null)
				targetElement.startSelection = targetElement.selectionStart
	
			if (targetElement.selectionEnd != null)
				targetElement.endSelection = targetElement.selectionEnd

			var cursorStartPosition = targetElement.startSelection;
			var selection = targetElement.value.substring(targetElement.startSelection, targetElement.endSelection);
			var targetValue = targetElement.value.substring(0, targetElement.startSelection);
		
			targetValue += startTag + selection + endTag;
			targetValue += targetElement.value.substring(targetElement.endSelection, targetElement.value.length);
				
			targetElement.value = targetValue;
			targetElement.focus();
				
			var cursorPosition = cursorStartPosition + startTag.length + selection.length + endTag.length;
		
			sos.editor.setSelectionRange(targetElement, cursorPosition, cursorPosition);
			
			targetElement.focus();
			
			if (event.preventDefault) 
				event.preventDefault();
			else
				event.returnValue = false;	
		},

		bbcode : function(code)
		{
			code = code.replace(/\[b\](.*?)\[\/b\]/ig, "<b>$1</b>");
			code = code.replace(/\[i\](.*?)\[\/i\]/ig, "<em>$1</em>");
			code = code.replace(/\[u\](.*?)\[\/u\]/ig, "<u>$1</u>");
			
			return code;
		},
		diaEditor : function(originalStep, overlay, imageBtn)
		{
			var step = originalStep[0].cloneNode(true);
			step.originalNode = originalStep;
		
			imageBtn.originalStep 	= originalStep[0];
			imageBtn.editStep 		= step;
			
			var stepEditBox = document.createElement('div');
			stepEditBox.className = 'stepEditBox';
			
			var container = document.createElement('div');
			container.className = 'page-content';
			container.style.cssText = 'height: 580px !important;';
			container.appendChild(step);
		
			stepEditBox.appendChild(container);
			
			overlay.appendChild(stepEditBox);
			document.body.appendChild(overlay);
			
			// ^ first render elements
			var title = $(stepEditBox).find('h1');
			
			/*var titleField = document.createElement('input');
			titleField.type = 'text';
			titleField.className = 'edit-area orange';
			titleField.value = title[0].innerHTML;*/
			//$(title[0]).after(titleField);
			$(title[0]).hide();
			
			$(stepEditBox).find('.step-content-description .step-text').hide();
			$(stepEditBox).find('.step-content-description .step-text-org').show();			
			$(stepEditBox).find('.step-content-description .step-text-editor').show();
			var content = $(stepEditBox).find('.step-content-description .step-text-org');
			var contentField = document.createElement('textarea');
		//console.log(content[0].innerHTML);
			contentField.className = 'edit-area';
			contentField.id = 'edit-area';
			//var_dump(content[0]);
			
			if(typeof content[0].innerHTML != 'undefined')
			{
				var textContent = content[0].innerHTML;
				if(textContent.trim)
					textContent = textContent.trim();
				
				//var textContent = content[0].innerHTML.trim();
				textContent = textContent.replace(/\n/gi, "");
				textContent = textContent.replace(/<br>/gi, "\n");
				textContent 	= textContent.replace(/<br\/>/gi, "\n");
				//textContent = textContent.replace(/\n/gi, "");
				contentField.value = textContent;
			
				//orgText[0].innerHTML = newText[0].value.replace(/\n/gi, '<br/>');
			
			}
			else
			{	
				
				var textContent = content[0].innerHTML.trim();
				
				textContent = textContent.replace(/<br>/gi, "\n");
				
				contentField.innerHTML = textContent;
				//contentField.innerHTML = content[0].textContent.trim() ;	
			}
			
			content[0].innerHTML = '';
			content[0].appendChild(contentField);
		
			$(stepEditBox).find('img, h1, .step-content-description').each(function(){
				this.onclick= null;
				this.style.cursor = 'default';
				
			});
			
			$(stepEditBox).find('img').each(function(){
				
				this.onmouseover = function()
				{
					if(this.menu)
					{
						$(this.menu).show();
					}
					else
					{
						var menu = sos.editor.createMenu(this);
						
						this.parentNode.appendChild(menu);
						this.menu = menu;
					}	
				}
				this.onmouseout = function(event)
				{
					if(!event)
					{	
						event = window.event;
						event.relatedTarget = event.toElement;
					}
					if(event.relatedTarget)
					{
						if(event.relatedTarget.className != 'image-edit-menu' && event.relatedTarget.className != 'image-edit-menu small'  && event.relatedTarget.parentNode.className != 'image-edit-menu' && event.relatedTarget.parentNode.className != 'image-edit-menu small' &&  typeof this.menu != 'undefined' && !this.menu.isActive)
						{
							$(this.menu).hide();
						}
					}
				}	
			});
			
			//container.appendChild(diaNavigator);
			/*var newAudio = $('<div class="newAudio"><label for="uploadAudio">Audio bestand: </label></div>');
			newAudio.append('<input type="file" class="uploadAudio" name="uploadAudio" id="uploadAudio" />')
			newAudio.append('<input type="submit" onclick="sos.editor.uploadAudio();"  value="Toevoegen"/>')*/
			//$(container).append(newAudio);
			
			//ADD AUDIO 
			/*var control = audioChooser.init(); 
			$(content[0]).append(control);
			*/
			
			var diaNavigator = document.createElement('div');
			diaNavigator.className = 'diaNavigator';
			
			sos.editor.createPrevButton(diaNavigator, originalStep, step);
			sos.editor.createNextButton(diaNavigator, originalStep, step);
			
			container.appendChild(diaNavigator);
			
			
		/*	var audioUpload = document.createElement('div');
			audioUpload.className = 'audio-upload';
			stepEditBox.appendChild(audioUpload);
			
			var fileUpload = document.createElement('input');
			audioUpload.fileUpload = fileUpload;
			fileUpload.type 		= 'file';
			fileUpload.name 		= 'audiofile';
			fileUpload.className 	= 'audiofile-input';
			*/
			
			
			var audioUpload = document.createElement('div');
			
			
			var inputAudio = $(stepEditBox).find('input.step-audio');
			var currentAudio = false;
			if(inputAudio[0].value && inputAudio[0].value != '')
				currentAudio = inputAudio[0].value; 
			//console.log(inputAudio);
			audioChooser.init(audioUpload, currentAudio);
			
			$(stepEditBox).append(audioUpload);
			
			/*var audioControl = audioChooser.init();
			$(stepEditBox).append(audioControl);*/
			
			
			return stepEditBox;
			
		},
		
		createNextButton : function(container, original, step)
		{
			var nextBtn = document.createElement('img');
			nextBtn.className  = 'button-dia-next';
			var stepBox = original[0].parentNode.parentNode.parentNode.parentNode;
			nextBtn.step = step;
			nextBtn.alt = nextBtn.title = 'Volgende dia';
			nextBtn.stepBox = stepBox;
			if($(stepBox).next().length > 0)
			{
				nextBtn.src =  baseUrl + '/assets/img/dia-next.png';
				nextBtn.style.cursor = 'pointer';
				nextBtn.onclick = function()
				{
					sos.editor.sync($(this.step));
					sos.editor.reset();
					$(container.parentNode.parentNode.parentNode).remove();
					sos.editor.button.edit(null, $(this.stepBox).next());
				}
			}
			else
			{
				nextBtn.src =  baseUrl + '/assets/img/dia-next-inactive.png';
				nextBtn.style.cursor = 'default';
			}	
			
			nextBtn.className  = 'button-dia-next';
			container.appendChild(nextBtn);
		},
		createPrevButton : function(container, original, step)
		{
			var prevBtn 	= document.createElement('img');
			prevBtn.step 	= step;
			var stepBox 	= original[0].parentNode.parentNode.parentNode.parentNode;
			prevBtn.stepBox = stepBox;
			prevBtn.alt = prevBtn.title = 'Vorige dia';
			if($(stepBox).prev().length > 0)
			{
				prevBtn.src =  baseUrl + '/assets/img/dia-prev.png';
				prevBtn.style.cursor = 'pointer';
				//prevBtn.step = step;
				prevBtn.onclick = function()
				{
					sos.editor.sync($(this.step));
					sos.editor.reset();
					$(container.parentNode.parentNode.parentNode).remove();
					sos.editor.button.edit(null, $(this.stepBox).prev());
				}
			}
			else
			{
				prevBtn.src =  baseUrl + '/assets/img/dia-prev-inactive.png';
				prevBtn.style.cursor = 'default';
			}	
			
			container.appendChild(prevBtn);
		},
		sync : function(step)
		{
			var original = $(step[0].originalNode); 
			
			var image1org = original.find('.image1 img');
			var image1new = step.find('.image1 img');
			image1org[0].src = image1new[0].src;
			
			var image2org = original.find('.image2 img');
			var image2new = step.find('.image2 img');
			image2org[0].src = image2new[0].src;
			
			//var orgTitle = original.find('h1');
			//var newTitle = step.find('input.edit-area'); 
			//orgTitle[0].innerHTML = newTitle[0].value;
			
			var showText = original.find('.step-content-description .step-text');
			var newText = step.find('textarea.edit-area'); 
			var orgText = original.find('.step-content-description .step-text-org');
			
			var audioFile = original.find('.step-content-description input.step-audio');
			
			//if(audioChooser.filename)
			audioFile[0].value = audioChooser.filename;
			
			audioChooser.element = {};
			audioChooser.filename = '';
			
			//console.log(newText[0].value);
			var textContent = newText[0].value.replace(/\n/gi, '<br>')
			//textContent = newText[0].value.replace(/\n/gi, '<br>')
			orgText[0].innerHTML = textContent;
			
			textContent = sos.editor.bbcode(textContent);
			showText[0].innerHTML = textContent;
			
		},
		createMenu : function(imageNode)
		{
			var menu = document.createElement('div');
			menu.className = 'image-edit-menu';
			
			var split = imageNode.src.split('/');
			var imagename = split[split.length - 1];
			//console.log(imagename);
			menu.image = imageNode;
			if(imagename == 'image-edit.png')
			{
				menu.className += ' small';
				var addButton = document.createElement('a');
				
				addButton.innerHTML = 'VOEG AFBEELDING TOE';
				addButton.href = '#';
				addButton.onclick= function()
				{
					this.blur();
					this.parentNode.isActive = false;
					$(this.parentNode).hide();
					
					imageChooser.init(this.parentNode.image);
				}	
				menu.appendChild(addButton);
			}
			else
			{	
				var replaceButton = document.createElement('a');
				replaceButton.innerHTML = 'VERVANG AFBEELDING';
				replaceButton.href = '#';
				
				replaceButton.onclick= function()
				{
					this.blur();
					this.parentNode.isActive = false;
					$(this.parentNode).hide();
					imageChooser.init(this.parentNode.image);
				}	
				replaceButton.menu = menu;
				menu.appendChild(replaceButton);
				
				var deleteButton = document.createElement('a');
				deleteButton.innerHTML = 'VERWIJDER AFBEELDING';
				deleteButton.menu = menu;
				deleteButton.onclick = function()
				{
					this.blur();
					this.parentNode.isActive = false;
					$(this.parentNode).hide();
					this.menu.image.src = baseUrl + '/assets/img/image-edit.png';
					
					var imageNode = this.menu.image;
					
					$(this.menu).remove();
					
					imageNode.menu = sos.editor.createMenu(imageNode);
					
					imageNode.parentNode.appendChild(imageNode.menu);
					$(imageNode.menu).hide();
				}
				deleteButton.href = '#';
				menu.appendChild(deleteButton);
			}
			
			menu.isActive = false;
			menu.onmouseover = function()
			{
				console.log('onmousover');
				this.isActive = true;
				this.onmouseout = function()
				{
					this.isActive = false;
				}
			};	
			
			return menu;
		}
	},
	random : function(minVal,maxVal,floatVal)
	{
	  var randVal = minVal+(Math.random()*(maxVal-minVal));
	  
	  return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
	}
};

var audioChooser = 
{
	instance 	: {},
	element		: {},
	init 		: function(element, currentAudio)
	{
		
		this.element = element;
		
		if(currentAudio)
		{
			audioChooser.filename = currentAudio;
			audioChooser.existing();
		}
		else
		{
			var audioUpload = document.createElement('div');
			audioUpload.className = 'audio-upload';
			//stepEditBox.appendChild(audioUpload);
			
			var fileUpload = document.createElement('input');
			audioUpload.fileUpload = fileUpload;
			fileUpload.type 		= 'file';
			fileUpload.name 		= 'audiofile';
			fileUpload.className 	= 'audiofile-input';
			fileUpload.id 			= 'fileupload-field' ;
			//fileUpload.onSelect = function(){alert('test');};
			
			audioUpload.appendChild(fileUpload);
			
			fileUpload.onchange = function(){if(this.value){audioChooser.upload(this);}};  //fileUpload.onmouseout = 
			
			this.instance = this;
			
			
			this.element.appendChild(audioUpload);
			
			//return audioUpload;
			/*var newAudio = $('<div class="newAudio"></div>');
			newAudio.append('<div class="audioContainer"><input type="file" class="uploadAudio" name="uploadAudio" id="uploadAudio" onchange="audioChooser.upload(this);"/></div>');
			//newAudio.append('<input type="submit" onclick="sos.editor.uploadAudio();"  value="Toevoegen"/>');
			
			this.instance = this;
			
			return newAudio;*/
		}
		
	},
	reset : function()
	{
		this.element.innerHTML = '';
		this.init(this.element);
	},
	existing : function()
	{
		this.element.innerHTML = '';
		
		var audioPlayer = document.createElement('div');
		audioPlayer.id = 'audioplayer-' + sos.random(1,99999); 
		audioPlayer.className = 'audio-player';
		this.element.appendChild(audioPlayer);
		
		var audioPlay = document.createElement('div');
		audioPlay.className = 'audio-play';
		audioPlay.onclick = function()
		{
			console.log(audioChooser.filename);
			sos.playAudio(baseUrl + '/file/audio/name/' + audioChooser.filename, audioPlayer.id);
		}
		//
		
		this.element.appendChild(audioPlay);
		var audioRemove = document.createElement('div');
		audioRemove.className = 'audio-remove';
		audioRemove.onclick= function()
		{
			audioChooser.filename='';
			audioChooser.reset();
		}	
		this.element.appendChild(audioRemove);
			
		
		
	},
	upload : function(element)
	{
		var elementId = element.id;
		
		//var_dump(element);
		
		$.ajaxFileUpload
		(
			{
				url				: baseUrl + "/image/index/audioupload/", 
				secureuri		: false,
				fileElementId	: elementId,
				dataType		: 'json',
				success: function (data, status)
				{
					if(typeof(data.error) != 'undefined')
					{
						if(data.error != '')
						{
							alert(data.error);
						}else
						{
							alert(data.msg);
						}
						
						audioChooser.reset(); 
					}
					else
					{
						alert('Jouw geluidsbestand is toegevoegd!');
						audioChooser.filename = data.filename;
						audioChooser.existing();
						
						
					}
					
					
					
					//var container = document.getElem;
				//	$(element.parentNode).remove();
					
					
					
				},
				error: function (data, status, e)
				{
					audioChooser.reset(); 
					alert(e);
				}
			}
		)
	}
		
}

var imageChooser = 
{
		//instance = {},
		images 	: [],
		imageElement: {},
		targetImage : {},
		overlay		: {},
		init 	: function(target)
		{
			//var_dump(target);
			this.targetImage = target;
			this.getImages();
	
			//alert('JAJA')
		},
		getImages : function()
		{
			$.ajax({
			   type: "GET",
			   url:  baseUrl + "/image/",
			   success: function(msg){
			     //alert( "Data Saved: " + msg );
			     
			    imageChooser.images = eval('(' + msg + ')'); 
			    imageChooser.createBox();
				 //sos.showModal(msg);
			   }
			 });
		},
		createBox : function()
		{
			var overlay = document.createElement('div');
			overlay.style.width = document.body.offsetWidth + 'px';
			overlay.style.height = document.documentElement.clientHeight /* || document.defaultView.outerHeight*/ /*|| document.documentElement.clientHeight || document.body.offsetHeight */  + 'px';
			overlay.className = 'overlay-white';
			
			document.body.appendChild(overlay);
			
			this.overlay = overlay;
			
			var box 	= $('<div class="imageChooser round"></div>');
			box.append($('<div class="chooserTitle">Kies een afbeelding</div>'));
			
			var filter = $('<div class="imageFilter"></div>');
			//<input type="text" name="search" class="search-input" value="Zoek verhaal" />
			var filterInput = $('<input type="text" class="search-input" name="search" value="Zoek afbeelding"/>');
			
			filterInput[0].onclick = function(){if(!this.value || this.value == 'Zoek afbeelding')this.value='';};
			filterInput[0].onblur = function(){this.value = (!this.value?'Zoek afbeelding':this.value )};
			filterInput[0].onchange = function()
			{
				if(this.value == 'Zoek afbeelding')
					return;
				
				var imageBlock = $('.imageChooser .images');
				imageBlock[0].innerHTML = '';
				imageChooser.addImages(imageChooser.images, imageBlock, this.value);
				
				return false;
			};
			
			
			//onblur="this.value = (!this.value?'Zoek verhaal':this.value )
			
			filter.append(filterInput);
			box.append(filter);
			
			var close = $('<a class="closeChooser">x</a>');
			close[0].onclick= function(){$('.imageChooser').remove();$(imageChooser.overlay).remove();};
			box.append(close);
			
			
			box.append($('<div class="imageDetails"></div>'));
			
			var selectButton = $('<a class="selectButton"></a>');
			selectButton[0].onclick = function()
			{
				var selectedImage = $('.imageChooser .imageDetails img');
				if(selectedImage[0])
				{
					$('.imageChooser').remove();
					
					if(selectedImage[0].properties.defaultUrl )
						imageChooser.targetImage.src = selectedImage[0].properties.defaultUrl;
					else
						imageChooser.targetImage.src = selectedImage[0].src;
					
					$(imageChooser.targetImage.menu).remove();
					//var_dump(imageChooser.targetImage);
					
					imageChooser.targetImage.menu = sos.editor.createMenu(imageChooser.targetImage);
					
					imageChooser.targetImage.parentNode.appendChild(imageChooser.targetImage.menu);
					$(imageChooser.targetImage.menu).hide();
					
					$(imageChooser.overlay).remove();
					//this.menu = menu;
				}
				else
				{
					alert('Selecteer een afbeelding');
				}
					
			};
			box.append(selectButton);
			
			var images = $('<div class="images"></div>');
			box.append(images);
			
			var newImage = $('<div class="newImage"><label for="uploadImage">Nieuwe afbeelding: </label></div>');
			newImage.append('<input type="file" class="uploadImage" name="uploadImage" id="uploadImage" />')
			newImage.append('<input type="submit" onclick="imageChooser.upload();"  value="Toevoegen"/>')
			box.append(newImage);
		
			this.addImages(this.images, images);
		
			document.body.appendChild(box[0]);
			
		},
		addImages : function(imageData, imageBlock, filter)
		{
			$(imageData).each(function()
			{	
				var doBreak = false; 
				if(filter)
					if(this.title.toLowerCase().indexOf(filter.toLowerCase()) == -1)
						doBreak = true;	
			
				if(!doBreak)
				{	
					//var_dump(this);
					var newImage = $('<img class="chooserImage"/>');
					newImage[0].src = this.url;
					newImage[0].alt = newImage[0].title = this.title;
					newImage[0].properties = this;
					newImage[0].onclick = function ()
					{
						imageChooser.showDetails(this);
						
						$('.imageChooser .images .chooserImage').each(function()
						{
							this.className = 'chooserImage';	
						});
						this.className = 'chooserImage active'
						
						var selectedImage = $('<img src="' + this.src + '"/>');
						$('.imageChooser .images .imageInfo').append(selectedImage);	
							
					};
					imageBlock.append(newImage);
				}
			});
			
			
		},
		showDetails : function(element)
		{
			
			
			var detailImage = element.cloneNode(true); 
			detailImage.properties = element.properties;
			//var_dump(detailImage);
			
			var detailBox 	= $('.imageChooser .imageDetails');
			detailBox[0].innerHTML = '';
			
			detailBox[0].appendChild(detailImage);
			
			detailBox.append($('<br/><strong>Naam: </strong><br/><span title="' + detailImage.properties.title + '">' + detailImage.properties.title.substr(0,22) + '</span>'))
			detailBox.append($('<br/><strong>Bestandsnaam: </strong><br/><span title="' + detailImage.properties.filename + '">' +  (  detailImage.properties.filename.substr(0,22) ) + '</span>'))
			
			
			
		},
		upload : function()
		{
			$.ajaxFileUpload
			(
				{
					url				: baseUrl + "/image/index/upload/", 
					secureuri		: false,
					fileElementId	: 'uploadImage',
					dataType		: 'json',
					success: function (data, status)
					{
						if(typeof(data.error) != 'undefined')
						{
							if(data.error != '')
							{
								alert(data.error);
							}else
							{
								alert(data.msg);
							}
						}
						else
						{
							alert('Jouw nieuwe afbeelding is toegevoegd!');
						}
						
						$.ajax({
							   type: "GET",
							   url:  baseUrl + "/image/",
							   success: function(msg)
							   {
								   var imageBlock = $('.imageChooser .images');
								    imageChooser.images = eval('(' + msg + ')'); 
								    imageBlock[0].innerHTML = '';
								    imageChooser.addImages(imageChooser.images, imageBlock);
							   }
							 });
						
					},
					error: function (data, status, e)
					{
						alert(e);
					}
				}
			)
		}
};

jQuery.JSON = {
	useHasOwn : ( {}.hasOwnProperty ? true : false),
	pad : function(n) {
		return n < 10 ? "0" + n : n;
	},
	m : {
		"\b" : '\\b',
		"\t" : '\\t',
		"\n" : '\\n',
		"\f" : '\\f',
		"\r" : '\\r',
		'"' : '\\"',
		"\\" : '\\\\'
	},
	encodeString : function(s) {
		if (/["\\\x00-\x1f]/.test(s)) {
			return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) {
				var c = jQuery.JSON.m[b];
				if (c) {
					return c;
				}
				c = b.charCodeAt();
				return "\\u00" + Math.floor(c / 16).toString(16)
						+ (c % 16).toString(16);
			}) + '"';
		}
		return '"' + s + '"';
	},
	encodeArray : function(o) {
		var a = [ "[" ], b, i, l = o.length, v;
		for (i = 0; i < l; i += 1) {
			v = o[i];
			switch (typeof v) {
			case "undefined":
			case "function":
			case "unknown":
				break;
			default:
				if (b) {
					a.push(',');
				}
				a.push(v === null ? "null" : this.encode(v));
				b = true;
			}
		}
		a.push("]");
		return a.join("");
	},
	encodeDate : function(o) {
		return '"' + o.getFullYear() + "-" + pad(o.getMonth() + 1) + "-"
				+ pad(o.getDate()) + "T" + pad(o.getHours()) + ":"
				+ pad(o.getMinutes()) + ":" + pad(o.getSeconds()) + '"';
	},
	encode : function(o) {
		if (typeof o == "undefined" || o === null) {
			return "null";
		} else if (o instanceof Array) {
			return this.encodeArray(o);
		} else if (o instanceof Date) {
			return this.encodeDate(o);
		} else if (typeof o == "string") {
			return this.encodeString(o);
		} else if (typeof o == "number") {
			return isFinite(o) ? String(o) : "null";
		} else if (typeof o == "boolean") {
			return String(o);
		} else {
			var self = this;

			var a = [ "{" ], b, i, v;
			for (i in o) {
				if (!this.useHasOwn || o.hasOwnProperty(i)) {
					v = o[i];
					switch (typeof v) {
					case "undefined":
					case "function":
					case "unknown":
						break;
					default:
						if (b) {
							a.push(',');
						}
						a.push(self.encode(i), ":", v === null ? "null" : self
								.encode(v));
						b = true;
					}
				}
			}
			a.push("}");
			return a.join("");
		}
	},
	decode : function(json) {
		return eval("(" + json + ')');
	}
};