MediaWiki:Skin/Spezial:Hochladen.js: Unterschied zwischen den Versionen

aus Kamelopedia, der wüsten Enzyklopädie
Zur Navigation springen Zur Suche springen
(test)
K
 
(29 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 6: Zeile 6:
 
         thisLevel.style.display = 'block';
 
         thisLevel.style.display = 'block';
 
         otherLevel.style.display = 'none';
 
         otherLevel.style.display = 'none';
         linkLevel.style.display = 'inline';
+
         linkLevel.style.display = 'block';
 
     } else {
 
     } else {
 
         thisLevel.style.display = 'none';
 
         thisLevel.style.display = 'none';
         otherLevel.style.display = 'inline';
+
         otherLevel.style.display = 'block';
 
         linkLevel.style.display = 'none';
 
         linkLevel.style.display = 'none';
 
     }
 
     }
Zeile 33: Zeile 33:
 
} );
 
} );
 
}
 
}
addOnloadHook(mk_ajax);
+
jQuery(document).ready(function() {
 +
 
 +
if (window.location.href.indexOf("wpForReUpload=1") == -1){  //nicht beim Re-Upload
 +
      mk_ajax(); 
 +
  } else {
 +
  out = "<p style='padding: 20px; font-weight: bold;'>Geänderten Lizenz-Kram bitte nach dem Hochladen der neuen Version durch Bearbeiten der Datei-Seite anpassen.</p>";
 +
  jQuery('#klicktag').html(out);
 +
    }
 +
});
  
 
/*
 
/*
Zeile 117: Zeile 125:
 
if( obj.innerHTML == msg_OK[msg_OK_counter] )
 
if( obj.innerHTML == msg_OK[msg_OK_counter] )
 
msg_counter_up();
 
msg_counter_up();
obj.innerHTML = msg_OK[msg_OK_counter];
+
//wirft Fehler im IE7 & 8
 +
  //obj.innerHTML = msg_OK[msg_OK_counter];
 +
  jqobj = obj;
 +
  jQuery(jqobj).html(msg_OK[msg_OK_counter]);
 
msg_counter_up();
 
msg_counter_up();
 
}
 
}
Zeile 135: Zeile 146:
 
{
 
{
 
out = create_opts( element, t.value );
 
out = create_opts( element, t.value );
jQuery(imgklick[element].name+"_opt").append(out);
+
jout =  document.getElementById(imgklick[element].name+"_opt");
 +
jQuery(jout).html(out);
 
return true;
 
return true;
 
};
 
};
Zeile 216: Zeile 228:
 
if ( -1 == box.value.search(reg) )
 
if ( -1 == box.value.search(reg) )
 
{ // kein Grundvorlage
 
{ // kein Grundvorlage
alert("Grundvorlage nicht gefunden.\n\n Falls du die Grundvorlage noch nicht eingefügt hast, solltest du das zu allererst tun und erst dann hiermit weitermachen. Den Knopf dafür findest du ein kleines Stückchen weiter oben!");
+
mk_add_g();
 
}
 
}
else
+
{
 
 
document.getElementById(imgklick[element].name+"_button").style.color=BGcolor[1];
 
document.getElementById(imgklick[element].name+"_button").style.color=BGcolor[1];
 
if ( -1 != box.value.search(reg_has_arg))
 
if ( -1 != box.value.search(reg_has_arg))
Zeile 227: Zeile 238:
  
 
add_msg( document.getElementById(imgklick[element].name+"_msg") );
 
add_msg( document.getElementById(imgklick[element].name+"_msg") );
};
+
 
}
 
}
  
Zeile 239: Zeile 250:
 
out += "<form>";
 
out += "<form>";
 
out += "<table class='boxes'>";
 
out += "<table class='boxes'>";
out += "<tr><td class='left'>";
 
out += "Ohne Grundvorlage geht gar nichts! Rein damit, falls noch nicht drin! ";
 
out += "</td><td class='right'>";
 
out += "<input type='button' id='text_box_button' class='";
 
if ( -1 == box.value.search(new RegExp("[{][{]"+grundvorlage.name+"(\s|\n|\r)*([|](.|\n|\r)*)?[}][}]")) )
 
{
 
out += "buttonStyle1";
 
}
 
else
 
{
 
out += "buttonStyle2";
 
}
 
out += "' value='Grundvorlage&nbsp;einfügen' onclick='mk_add_g();'>";
 
out += " <span id='g_msg'></span>";
 
out += "</td></tr>";
 
 
out += "</table>";
 
out += "</table>";
 
out += "</form>";
 
out += "</form>";
Zeile 265: Zeile 261:
 
var out = "";
 
var out = "";
 
out += "<div class='box0' >";
 
out += "<div class='box0' >";
 +
out += "<p class='angabe'>Beschreibende Markierungen</p>";
 
out += "<form>";
 
out += "<form>";
 
out += "<table class='boxes'>";
 
out += "<table class='boxes'>";
out += "<tr><td colspan='2'><small>Hier kannst du Schlüsselwörter angeben, bitte <b>durch Komma</b> trennen! Angeben kannst du z.B. Motiv, Farben, Besonderheiten, … . <b>Beachte bitte:</b> Mach die Tags kurz und knackig, z.B. <i>Kuh, Weiß, Lila, Violett</i>. Wenn du dein Bild mit <i>Eine weiß-violette Kuh</i> tagst (also ohne Kommas), wird es nur gefunden werden, wenn genau das ins Suchfeld eingegeben wird.</small></td></tr>";
+
out += "<tr><td colspan='2'><small>Hier kannst du <b>durch Komma</b> getrennte – Schlüsselwörter angeben (z.B. Motiv, Farben, Besonderheiten).<br /><b>Beachte bitte:</b> Mach die Tags kurz und knackig, z.B. <i>Kuh, Weiß, Lila, Violett</i>. </small></td></tr>";
 
out += "</td></tr>";
 
out += "</td></tr>";
 
out += "<tr><td class='left'>";
 
out += "<tr><td class='left'>";
 
out += "<textarea id='tag_box' style='width: 90%;'></textarea>";
 
out += "<textarea id='tag_box' style='width: 90%;'></textarea>";
out += "</td><td class='right'>";
+
out += "</td><td class='right' valign='top'>";
out += "<input type='button' id='tag_box_button' class='buttonStyle0' value='Tags&nbsp;Hinzufügen' onclick='mk_add_tags();'>";
+
out += "<input type='button' id='tag_box_button' class='buttonStyle0' value='Hinzufügen' onclick='mk_add_tags();'>";
 
out += " <span id='tag_msg'></span>";
 
out += " <span id='tag_msg'></span>";
 
out += "</td></tr></table>";
 
out += "</td></tr></table>";
Zeile 292: Zeile 289:
 
if ( -1 == box.value.search(reg) )
 
if ( -1 == box.value.search(reg) )
 
{ // kein Grundvorlage
 
{ // kein Grundvorlage
alert("Grundvorlage nicht gefunden.\n\n Falls du die Grundvorlage noch nicht eingefügt hast, solltest du das zu allererst tun und erst dann hiermit weitermachen. Den Knopf dafür findest du ein kleines Stückchen weiter oben!");
+
mk_add_g();
return;
+
}
}
+
else
 
{
 
 
document.getElementById("tag_box_button").style.color=BGcolor[1];
 
document.getElementById("tag_box_button").style.color=BGcolor[1];
 
if ( -1 != box.value.search(reg_has_arg))
 
if ( -1 != box.value.search(reg_has_arg))
Zeile 303: Zeile 298:
 
box.value = box.value.replace( reg_hasnt_arg, "$1|"+tag_arg+"=\n"+val+"\n$2");
 
box.value = box.value.replace( reg_hasnt_arg, "$1|"+tag_arg+"=\n"+val+"\n$2");
 
add_msg(document.getElementById("tag_msg"));
 
add_msg(document.getElementById("tag_msg"));
}
+
 
}
 
}
  
Zeile 314: Zeile 309:
 
{
 
{
 
box.value += "{{"+grundvorlage.einfg+"}}";
 
box.value += "{{"+grundvorlage.einfg+"}}";
add_msg(document.getElementById("g_msg"));
+
//add_msg(document.getElementById("g_msg"));
document.getElementById("text_box_button").style.color=BGcolor[2];
+
//document.getElementById("text_box_button").style.color=BGcolor[2];
 
}
 
}
else
+
else {
 
alert("Wiki sagt: Ich glaube, da gibt es schon eine Grundvorlage.");
 
alert("Wiki sagt: Ich glaube, da gibt es schon eine Grundvorlage.");
 +
}
 +
return;
 
}
 
}
  
Zeile 334: Zeile 331:
 
if ( ! box || box == null )
 
if ( ! box || box == null )
 
{ // Bild wird nicht hochgeladen, sondern bearbeitet!
 
{ // Bild wird nicht hochgeladen, sondern bearbeitet!
                 klapp1 = "<div id='lboxein'><a href='javascript:einaus2(\"lbox\",\"lboxein\",\"lboxaus\")'>[Bild-Lizenz-Box anzeigen]</a></div><div id='lboxaus' style='display:none;'><a href='javascript:einaus2(\"lbox\",\"lboxein\",\"lboxaus\")'>[Bild-Lizenz-Box verbergen]</a></div><div id='lbox' style='display:none;'>";
+
                 klapp1 = "<div id='lboxein' style='padding:5px;'><a href='javascript:einaus2(\"lbox\",\"lboxein\",\"lboxaus\")'>[Bild-Lizenz-Box anzeigen]</a></div><div id='lboxaus' style='display:none;padding:5px;border-bottom:1px solid #aaa;'><a href='javascript:einaus2(\"lbox\",\"lboxein\",\"lboxaus\")'>[Bild-Lizenz-Box verbergen]</a> (Hinweis: Grundvorlage muss nicht mehr per Huf eingefügt werden)</div><div id='lbox' style='display:none;'>";
 
                 klapp2 = "</div>";
 
                 klapp2 = "</div>";
 
box = document.getElementById("wpTextbox1");
 
box = document.getElementById("wpTextbox1");
Zeile 351: Zeile 348:
  
 
var out = "";
 
var out = "";
out += mk_g_box();
+
//out += mk_g_box();
 
//---------------------------------------------------
 
//---------------------------------------------------
 
for ( e=0; e<imgklick.length; e++ ) {
 
for ( e=0; e<imgklick.length; e++ ) {
 
out += "<div class='box1'>";
 
out += "<div class='box1'>";
 +
out += "<p class='angabe'>Angaben zur "+ imgklick[e].name + "</p>";
 
out += "<form>";
 
out += "<form>";
 
out += "<table class='boxes'>";
 
out += "<table class='boxes'>";
Zeile 378: Zeile 376:
 
out += "</select>";
 
out += "</select>";
 
out += " <span id='" + imgklick[e].name + "_opt'>"+create_opts( e, selectedIndex )+"</span> ";
 
out += " <span id='" + imgklick[e].name + "_opt'>"+create_opts( e, selectedIndex )+"</span> ";
out += "</td><td class='right'>";
+
out += "</td><td class='right' valign='top'>";
out += "<input type='button' id='"+imgklick[e].name+"_button' class='buttonStyle0' value='"+imgklick[e].name+"&nbsp;hinzufügen' onclick='mk_add("+e+");'>";
+
out += "<input type='button' id='"+imgklick[e].name+"_button' class='buttonStyle0' value='Hinzufügen' onclick='mk_add("+e+");'>";
 
out += " <span id='" + imgklick[e].name + "_msg'></span>";
 
out += " <span id='" + imgklick[e].name + "_msg'></span>";
 
out += "</td></tr></table>";
 
out += "</td></tr></table>";
Zeile 389: Zeile 387:
 
out += mk_tag_box();
 
out += mk_tag_box();
 
         jout = klapp1 + "<div class='outer' >" + out + "</div>" + klapp2;
 
         jout = klapp1 + "<div class='outer' >" + out + "</div>" + klapp2;
         jQuery('#klicktag').append(jout);
+
         jQuery('#klicktag').html(jout);
 
};
 
};

Aktuelle Version vom 1. Februar 2014, 00:15 Uhr

function einaus2 (inhalt, einblenden, ausblenden) {
    var thisLevel  = document.getElementById(inhalt);
    var otherLevel = document.getElementById(einblenden);
    var linkLevel  = document.getElementById(ausblenden);
    if (thisLevel.style.display == 'none') {
        thisLevel.style.display = 'block';
        otherLevel.style.display = 'none';
        linkLevel.style.display = 'block';
    } else {
        thisLevel.style.display = 'none';
        otherLevel.style.display = 'block';
        linkLevel.style.display = 'none';
    }
  }
/* === Hochlade-Seite === */

var box; // Globale Variable
var BGcolor = [ "red", "green", "gray" ];
/*
 * generieren der Datenstruktur aus DPL-Ergebnissen - #1: AJAX-Request
 */
var imgklick = new Array();

function mk_ajax()
{

	jQuery.ajax( {
		url: wgScript,
		context: document.body,
		dataType: "text", 
		data: 'title=Kamelopedia:Bildsuche/Klick-Tpl&action=raw&templates=expand',
		success: function( data, textStatus ) { gen_imgklick( data ); mkALL(); }
	} );
}
jQuery(document).ready(function() {

if (window.location.href.indexOf("wpForReUpload=1") == -1){   //nicht beim Re-Upload
      mk_ajax();  
	  } else {
	   out = "<p style='padding: 20px; font-weight: bold;'>Geänderten Lizenz-Kram bitte nach dem Hochladen der neuen Version durch Bearbeiten der Datei-Seite anpassen.</p>";
	   jQuery('#klicktag').html(out);
	  	  }
});

/*
 * generieren der Datenstruktur aus DPL-Ergebnissen - #2: Parser
 */
function gen_imgklick( txt )
{

        txt = txt.replace(/ *[|¦] */g, "|");
        txt = txt.replace(/[\n\r]+/g, "\n" );

        /* Sicherheits-Feature: HTML-Tags weg (bis auf <br>) */
        txt = txt.replace(/[<]/g, "&lt;" );
        txt = txt.replace(/[>]/g, "&gt;" );
        txt = txt.replace( /&lt;br *\/? *&gt;/g, "<br/>" );
        lines = txt.split( "\n" );
//alert(txt);
        for( i=0; i<lines.length; i++ )
        {
                //zeile auslesen
                type = lines[i].substring(0,1);
                lines[i] = lines[i].substring(1);
                elements = lines[i].split( "|" );
                
                if( type == ";" ) // Vorlage
                {
                if ( elements[4] == "no" ) // ignorieren-Flag gesetzt
                        continue;
                if ( elements[2] == "" )
                        elements[2] = elements[1];
                if ( ! imgklick[0] || imgklick[imgklick.length-1].name != elements[0] )
                        imgklick.push( { name: elements[0], arg: elements[0], prefix:elements[0], opts: [ ] } );
                imgklick[imgklick.length-1].opts.push( { name: elements[2], info: elements[3], vorlage: elements[1], args: [ ], selected: elements[4] } );
                }
                else if( type == "*" ) // Argument
                {
                opts = imgklick[imgklick.length-1].opts;
                opts[opts.length-1].args.push( { arg: elements[0], type: elements[1], info: elements[2], pre: elements[3], options: elements.slice(4) } );
                }
        }
}

/*
 * Benutzer-Rückmeldungen:
 */
msg_OK = 
[
	"In Ordnung.",
	"Aber gerne.",
	"Bitteschön.",
	"Klar doch!",
	"Kein Problem.",
	"Jawohl.",
	"Gerne doch."
];


// name: Wie heißt die Grundvorlage?
// einfg: Wie soll sie am Anfang eingefügt werden?
grundvorlage =
{ 
	name: "Bild",
	einfg: "Bild\n"
};

// Welches Argument ("|xxxx=") soll für die Tags verwendet werden?
tag_arg = "Motiv";

// globales Prefix für Vorlagen (Grundvorlage ausgenommen)
globalPrefix = "Bild/";
// globaler Separator
globalSep = ": ";

/* Programmablauf */

/*
 * Den Nachrichtenzähler auf irgendwas setzen
 */
msg_OK_counter = Math.floor( Math.random() * msg_OK.length );

function add_msg( obj )
{
	if( obj.innerHTML == msg_OK[msg_OK_counter] )
		msg_counter_up();
		//wirft Fehler im IE7 & 8
	  //obj.innerHTML = msg_OK[msg_OK_counter];
	  jqobj = obj;
	  jQuery(jqobj).html(msg_OK[msg_OK_counter]);
	msg_counter_up();
}

function msg_counter_up()
{
	msg_OK_counter++;
	if ( msg_OK_counter >= msg_OK.length )
		msg_OK_counter = 0;
}
/*
 * fügt zu einer Auswahl die Optionsbeschreibung und die Argumente ein.
 * element: nummer des Arrayelementes ( imgklick[?] )
 * t: das Auswahlelement (select)
 */
function mk_opts( element, t )
{
	out = create_opts( element, t.value );
	jout =  document.getElementById(imgklick[element].name+"_opt");
	jQuery(jout).html(out);
	return true;
};

/*
 * gibt zu einer Auswahl die Optionsbeschreibung zurück.
 * element: nummer des Arrayelementes imgklick[?]
 * val: nummer des Arrayelements imgklick[].opts[?] bzw. Nummer der Auswahl
 */
function create_opts( element, val )
{
	var out = imgklick[element].opts[val].info + "<br/>";
	var wdt;// optionale Variable für die Breite eines Eingabefeldes
	for ( i = 0; i<imgklick[element].opts[val].args.length; i++ )
	{
		arg = imgklick[element].opts[val].args[i];
		if ( arg.type == "textarea" )
			out += "<br/>" + arg.info + " <textarea style='width: 90%;' id='"+imgklick[element].name+"_arg_" + i+"'>"+arg.pre+"</textarea>";
                else if ( arg.type == "select" && imgklick[element].opts[val].args[i].options != null && imgklick[element].opts[val].args[i].options[0] != null)
                {

                        out += "<br/>" + arg.info + " <select id='"+imgklick[element].name+"_arg_" + i+"'>";
                        for ( opt=0; opt<imgklick[element].opts[val].args[i].options.length; opt++ )
                        {

                                pos =  imgklick[element].opts[val].args[i].options[opt].indexOf("=");
                                var optkey; var optval;

                                if ( pos == -1 )
                                {
                                         optkey = imgklick[element].opts[val].args[i].options[opt];
                                         optval = imgklick[element].opts[val].args[i].options[opt];
                                }
                                else
                                {
                                         optval = imgklick[element].opts[val].args[i].options[opt].substring(0,pos);
                                         optkey = imgklick[element].opts[val].args[i].options[opt].substring(pos+1);
                                }
                                var sel = "";
                                if ( optkey == imgklick[element].opts[val].args[i].pre )
                                        sel = "select='selected'"; 
                                out += "<option value='"+optval+"' "+sel+">"+optkey+"</option>";
                                
                        }
                        out += "</select>";
                }
		else
		{
			if (imgklick[element].opts[val].args[i].options[0])
			{
				wdt=imgklick[element].opts[val].args[i].options[0];
			}
			else
			{
				wdt="150px";
			}
			out += arg.info + " <input type='" + arg.type + "' style='width:"+wdt+"' value='"+arg.pre+"' id='"+imgklick[element].name+"_arg_" + i + "'/>&nbsp;";
		}
	}
	return out;
}

/*
 * fügt Text in die Textbox ein (eigentliches Klicktag)
 */
function mk_add( element )
{
	obj = imgklick[element].opts[document.getElementById(imgklick[element].name+"_select").value];
	var args = "";
	for( i=0; i<obj.args.length; i++ )
	{
		args += "|" + obj.args[i].arg + "=" + document.getElementById(imgklick[element].name+"_arg_"+i).value;
	}
	var val = "{{"+globalPrefix+imgklick[element].prefix+globalSep+obj.vorlage+args+"}}";

	var arg = imgklick[element].arg;
	var reg = new RegExp("[{][{]"+grundvorlage.name+"[\s\n\r]*([|](.|\n|\r)*)?[}][}]");
	var reg_has_arg = new RegExp("([{][{]"+grundvorlage.name+"[\s\n\r]*([|](.|\n|\r)*)?[|][\s\n]*"+arg+"=)((.|\n|\r)*}})");
	var reg_hasnt_arg = new RegExp("([{][{]"+grundvorlage.name+"[\s\n\r]*)(([|](.|\n|\r)*)?[}][}])");
	if ( -1 == box.value.search(reg) )
	{ // kein Grundvorlage
		mk_add_g();
	}
	
		document.getElementById(imgklick[element].name+"_button").style.color=BGcolor[1];
		if ( -1 != box.value.search(reg_has_arg))
			box.value = box.value.replace( reg_has_arg, "$1\n"+val+"$4" );
		else
			box.value = box.value.replace( reg_hasnt_arg, "$1|"+arg+"=\n"+val+"\n$2");

		add_msg( document.getElementById(imgklick[element].name+"_msg") );	
	
}

/*
 * returnt eine Box zum Einfügen der übergeordneten Vorlage
 */
function mk_g_box ()
{
	var out = "";
	out += "<div class='box1' >";
	out += "<form>";
	out += "<table class='boxes'>";
	out += "</table>";
	out += "</form>";
	out += "</div>";
	return out;
}


function mk_tag_box ()
{
	var out = "";
	out += "<div class='box0' >";
	out += "<p class='angabe'>Beschreibende Markierungen</p>";
	out += "<form>";
	out += "<table class='boxes'>";
	out += "<tr><td colspan='2'><small>Hier kannst du – <b>durch Komma</b> getrennte – Schlüsselwörter angeben (z.B. Motiv, Farben, Besonderheiten).<br /><b>Beachte bitte:</b> Mach die Tags kurz und knackig, z.B. <i>Kuh, Weiß, Lila, Violett</i>. </small></td></tr>";
	out += "</td></tr>";
	out += "<tr><td class='left'>";
	out += "<textarea id='tag_box' style='width: 90%;'></textarea>";
	out += "</td><td class='right' valign='top'>";
	out += "<input type='button' id='tag_box_button' class='buttonStyle0' value='Hinzufügen' onclick='mk_add_tags();'>";
	out += " <span id='tag_msg'></span>";
	out += "</td></tr></table>";
	out += "</form>";
	out += "</div>";
	return out;
}



function mk_add_tags ()
{
	var val = document.getElementById("tag_box").value;

	var reg = new RegExp("[{][{]"+grundvorlage.name+"[\s\n\r]*([|](.|\n|\r)*)?[}][}]");
	var reg_has_arg = new RegExp("([{][{]"+grundvorlage.name+"[\s\n\r]*([|](.|\n|\r)*)?[|][\s\n\r]*"+tag_arg+"=[\s\n\r]*)((.|\n|\r)*[}][}])");
	var reg_hasnt_arg = new RegExp("([{][{]"+grundvorlage.name+"[\s\n\r]*)(([|](.|\n|\r)*)?[}][}])");

	if ( -1 == box.value.search(reg) )
	{ // kein Grundvorlage
		mk_add_g();
		}
	
		document.getElementById("tag_box_button").style.color=BGcolor[1];
		if ( -1 != box.value.search(reg_has_arg))
			box.value = box.value.replace( reg_has_arg, "$1"+val+", $4" );
		else
			box.value = box.value.replace( reg_hasnt_arg, "$1|"+tag_arg+"=\n"+val+"\n$2");
		add_msg(document.getElementById("tag_msg"));
	
}

/*
 * fügt die Grundvorlage ein
 */
function mk_add_g ()
{
	if ( -1 == box.value.search(new RegExp("[{][{]"+grundvorlage.name+"(\s|\n|\r)*([|](.|\n|\r)*)?[}][}]")) )
	{
		box.value += "{{"+grundvorlage.einfg+"}}";
		//add_msg(document.getElementById("g_msg"));
		//document.getElementById("text_box_button").style.color=BGcolor[2];
	}
	else {
		alert("Wiki sagt: Ich glaube, da gibt es schon eine Grundvorlage.");
		}
		return;
}


/*
 * am Anfang alles reinladen
 */

function mkALL()
{
	box = document.getElementById("wpUploadDescription");
        var klapp1 = "";
        var klapp2 = "";

	if ( ! box || box == null )
	{ // Bild wird nicht hochgeladen, sondern bearbeitet!
                klapp1 = "<div id='lboxein' style='padding:5px;'><a href='javascript:einaus2(\"lbox\",\"lboxein\",\"lboxaus\")'>[Bild-Lizenz-Box anzeigen]</a></div><div id='lboxaus' style='display:none;padding:5px;border-bottom:1px solid #aaa;'><a href='javascript:einaus2(\"lbox\",\"lboxein\",\"lboxaus\")'>[Bild-Lizenz-Box verbergen]</a> (Hinweis: Grundvorlage muss nicht mehr per Huf eingefügt werden)</div><div id='lbox' style='display:none;'>";
                klapp2 = "</div>";
		box = document.getElementById("wpTextbox1");
		var ibox = document.createElement("div");
		ibox.id = "klicktag";
		tb = document.getElementById("wpTextbox1");
		if ( tb )
			tb.parentNode.insertBefore(ibox, tb);
		else
			box.parentNode.insertBefore(ibox, box);
	}
	if (  ! box || box == null )
        {
		return;
        }

	var out = "";
	//out += mk_g_box();
//---------------------------------------------------
	for ( e=0; e<imgklick.length; e++ )	{
		out += "<div class='box1'>";
		out += "<p class='angabe'>Angaben zur "+ imgklick[e].name + "</p>";
		out += "<form>";
		out += "<table class='boxes'>";
		out += "<tr><td class='left'>";
		out += "<select name='" + e + "' id='" + imgklick[e].name + "_select' size='1' onchange='mk_opts( "+e+", this );'>";

		var selectedIndex = null;var selectedIndex = null;
		for ( i = 0; i<imgklick[e].opts.length; i++ )
		{
			var sel = "";
			if ( imgklick[e].opts[i].selected == "selected" && selectedIndex == null )
			{
					sel=' selected="selected" ';
					selectedIndex=i;
			}
			else
					sel = '';
			out += "<option value='" + i + "'"+sel+">" + imgklick[e].opts[i].name + "</option>";
		}

		if ( selectedIndex == null )
			selectedIndex = 0;
		out += "</select>";
		out += " <span id='" + imgklick[e].name + "_opt'>"+create_opts( e, selectedIndex )+"</span> ";
		out += "</td><td class='right' valign='top'>";
		out += "<input type='button' id='"+imgklick[e].name+"_button' class='buttonStyle0' value='Hinzufügen' onclick='mk_add("+e+");'>";
		out += " <span id='" + imgklick[e].name + "_msg'></span>";
		out += "</td></tr></table>";
		out += "</form>";
		out += "</div>";
	}

//-------------------------------------------------------
	out += mk_tag_box();
        jout = klapp1 + "<div class='outer' >" + out + "</div>" + klapp2;
        jQuery('#klicktag').html(jout);
};