// ----------------------------------------------------------------------------
// markItUp!
// ----------------------------------------------------------------------------
// Copyright (C) 2008 Jay Salvat
// http://markitup.jaysalvat.com/
// ----------------------------------------------------------------------------
// Html tags
// http://en.wikipedia.org/wiki/html
// ----------------------------------------------------------------------------
// Basic set. Feel free to add more tags
// ----------------------------------------------------------------------------
mySettings = {
	previewParserPath: '/js/markitup/templateparser.php',
	onShiftEnter:  	{keepDefault:false, replaceWith:'<br />\n'},
	onCtrlEnter:  	{keepDefault:false, openWith:'\n<p>', closeWith:'</p>'},
	onTab:    		{keepDefault:false, replaceWith:'    '},
	markupSet:  [ 	
		{name:'Bold', key:'B', openWith:'(!(<strong>|!|<b>)!)', closeWith:'(!(</strong>|!|</b>)!)' },
		{name:'Italic', key:'I', openWith:'(!(<em>|!|<i>)!)', closeWith:'(!(</em>|!|</i>)!)'  },
		{name:'Stroke through', key:'S', openWith:'<del>', closeWith:'</del>' },
		{separator:'---------------' },
		//{name:'Picture', key:'P', replaceWith:'<img src="[![Source:!:http://]!]" alt="[![Alternative text]!]" />' },
		//{name:'Picture', key:'P', beforeInsert: function(markItUp) { InlineUpload.display(markItUp,true)}},
		//{name:'Browse', key:'F',beforeInsert:function(markItUp){InlineUpload.display(markItUp,false)}},
		{name:'Link', key:'L', openWith:'<a href="[![Link:!:http://]!]"(!( title="[![Title]!]")!)>', closeWith:'</a>', placeHolder:'Your text to link...' },
		{separator:'---------------' },
		{name:'Clean', className:'clean', replaceWith:function(markitup) { return markitup.selection.replace(/<(.*?)>/g, "") } },		
		{name:'Preview', className:'preview',  call:'preview'}
	]
};

var upload = false;
var InlineUpload = 
{
	dialog: null,
	block: '',
	offset: {},
	options: {
		container_class: 'markItUpInlineUpload',
		resultcontainer_id: 'resultcontainer',
		form_id: 'inline_upload_form',
		action: '/js/markitup/markitup_pictureupload.php',
		inputs: {
			titel: { label: 'Titel', id: 'inline_upload_file_title', name: 'inline_upload_file_title' },
			file: { label: 'Bild', id: 'inline_upload_file', name: 'inline_upload_file' }
		},
		submit: { id: 'inline_upload_submit', value: 'upload' },
		close: 'inline_upload_close',
		iframe: 'inline_upload_iframe'
	},
	display: function(hash,uploadOption)
	{
		if(uploadOption)
		{
			if( ! $('.markItUpInlineUpload').length){
				var self = this;
		
				/* Find position of toolbar. The dialog will inserted into the DOM elsewhere
				 * but has position: absolute. This is to avoid nesting the upload form inside
				 * the original. The dialog's offset from the toolbar position is adjusted in
				 * the stylesheet with the margin rule.
				 */
				this.offset = $(hash.textarea).prev('.markItUpHeader').offset();
				
				/* We want to build this fresh each time to avoid ID conflicts in case of
				 * multiple editors. This also means the form elements don't need to be
				 * cleared out.
				 */
				this.dialog = $([
					'<div class="',
					this.options.container_class,
					'"><h6>Bild hochladen</h6><div><form id="',
					this.options.form_id,
					'" target="',
					this.options.iframe,
					'" action="',
					this.options.action,
					'" enctype="multipart/form-data" method="post"><label for="',
					this.options.inputs.titel.id,
					'">',
					this.options.inputs.titel.label,
					'</label><input id="',
					this.options.inputs.titel.id,
					'" name="',
					this.options.inputs.titel.name,
					'" type="text" size="30"><br /><label for="',
					this.options.inputs.file.id,
					'">',
					this.options.inputs.file.label,
					'</label><input id="',
					this.options.inputs.file.id,
					'" name="',
					this.options.inputs.file.name,
					'" type="file" size="10"><br /><label>&nbsp;</label><input type="radio" name="ausrichtung" value="links" /> Links / <input type="radio" name="ausrichtung" value="rechts" /> Rechts<br /><br /><label>&nbsp;</label><input id="',
					this.options.submit.id,
					'" value="',
					this.options.submit.value,
					'" type="button"></form><div id="',
					this.options.close,
					'"></div><iframe id="',
					this.options.iframe,
					'" name="',
					this.options.iframe,
					'" src="about:blank"></iframe></div></div>',
					
				].join(''))
					.appendTo(document.body)
					.hide()
					.css('top', this.offset.top)
					.css('left', this.offset.left);
			
				//init submit button
				 
				$('#'+this.options.submit.id).click(function()
				{
					if($('#'+self.options.inputs.file.id).val() == ''){
						alert('Please select a file to upload');
						return false;
					}
					upload = true;
					$('#'+self.options.form_id).submit().fadeTo('fast', 0.2);
				});
			
						
				// init cancel button
				 
				$('#'+this.options.close).click(this.cleanUp);
				
				
				// form response will be sent to the iframe
				 
				$('#'+this.options.iframe).bind('load', function()
				{
					var response = $.secureEvalJSON(document.getElementById(''+self.options.iframe).contentWindow.document.body.innerHTML);
					
					if (response.status == 'success')
					{
						this.block = [
							'<div class="pageimage ',
							response.ausrichtung,
							'"><a title="',
							response.title,
							'" href="',
							response.image,
							'" rel="zoombox"><img src="',
							response.thumb,
							'" alt="Bild" title="',
							response.title,
							'" width="',
							response.width,
							'" height="',
							response.height,
							'" /></a></div>'
						];
						/* add the img tag */
						$.markItUp({ replaceWith: this.block.join('') } );
						self.cleanUp();
						upload = false;
					}
					else
					{
						/* A really basic example. This should do something a bit more sophisticated. */
						//alert(response.msg);
						alert('Fehler');
						self.cleanUp();
					}

				});
				
				// Finally, display the dialog
				this.dialog.fadeIn('slow');
			}
		}
		else
		{
			if( ! $('.'+this.options.container_class).length){
				var self = this;
				this.offset = $(hash.textarea).prev('.markItUpHeader').offset();
				this.dialog = $([
					'<div class="',
					this.options.container_class,
					'"><h6>Bild einfügen</h6><div><div id="',
					this.options.resultcontainer_id,
					'"></div><div id="',
					this.options.close,
					'"></div>'
				].join(''))
					.appendTo(document.body)
					.hide()
					.css('top', this.offset.top)
					.css('left', this.offset.left)
					.fadeIn('slow');
				$('#'+self.options.close).click(this.cleanUp);
				$('#'+self.options.resultcontainer_id).load('/js/markitup/imageloader.php','',function() {
					$('#'+self.options.resultcontainer_id + ' a').live('click', function(e) {
						e.preventDefault();
					});
					$('#'+self.options.resultcontainer_id + ' a img').live('click', function(e) {
						alert('Bitte die Inputs unter dem Bild benutzen!');
						e.preventDefault();
					});
					$('#'+self.options.resultcontainer_id + ' a input[type="radio"]').live('click', function(e) {
							ausrichtung = $(this).attr("value");
							src = $(this).parents("a").attr("href");
							thumb = $(this).parents("a").attr("rel");
							groesse = $(this).parents("a").attr("rev");
							//$.markItUp( {replaceWith:''+alt+'' });
							//$.markItUp( {replaceWith:'[img]'+src+'[/img]' });
							this.block = [
								'<div class="pageimage ',
								ausrichtung,
								'"><a href="',
								src,
								'" rel="zoombox"><img src="',
								thumb,
								'" alt="Bild" title="" ',
								groesse,
								' /></a></div>'
							];
							/* add the img tag */
							$.markItUp({ replaceWith: this.block.join('') } );
							e.preventDefault();
							self.cleanUp();
					}); 
				});
			}
		}
	},
	cleanUp: function()
	{
		InlineUpload.dialog.fadeOut().remove();
	}
};