function sortArray(array) { 

    // Ergebnis Array
    var array_new = new Array();

    // Temp Array
    var array_tmp = new Array();

    // In Temp Array schreiben mit fortlaufender ID
    for (var key in array)
        array_new.push(array[key] + ';$;' + key);

    // Array Sortieren
    array_new.sort();
    
    return array_new; 
}




var oSel = new Array();
var oNoSel = new Array();


// Anzahl der Gesamt Items ermitteln
function myMultiGetStatus(id,index) {

    // Status
    oSel[index] = 0;
    oNoSel[index] = 0;

    var oS = document.getElementById(id).options;
    for (i = 0; i <= oS.length - 1; i++) {
        if (oS[i].selected == true) oSel[index]++;
        else oNoSel[index]++;
    }

    // ggf. Anzeige aktualisieren
    $("#dSelYes").html(oSel);
    $("#dSelNo").html(oNoSel);

    return;
}


// Auswahloptionen laden
function myMultiLoad(id, index) {

    $("#dSelYesContent" + index).html("");
    $("#dSelNoContent" + index).html("");

    var ontoplist = new Array();
    var list = new Array();
    var oS = document.getElementById(id).options;
    for (i = 0; i <= oS.length - 1; i++) {
        if (oS[i].className == 'ontop') ontoplist[i] = (oS[i].innerHTML + ";$;" + i);
        else list[i] = oS[i].innerHTML;
    }

    // Sortieren
    var list2 = new Array();
    list2 = sortArray(list);
    var ontoplist2 = new Array();
    ontoplist2 = sortArray(ontoplist);

    // ontop Array davor setzen
    list2 = ontoplist2.concat(list2);

    // Liste ausgeben
    for (i = 0; i <= list2.length - 1; i++) {

        var keyvalue = new Array();
        keyvalue = list2[i].split(';$;');
        key = keyvalue[1];

        if (oS[key].selected == true) {
            $("#dSelYesContent" + index).append("<div class=\"cSelValue\" id=\"dSelYesContent" + index + "-" + key + "\" title=\"" + oS[key].innerHTML + "\"><div style=\"float:left; \" title=\"" + oS[key].innerHTML + "\">" + oS[key].innerHTML.substr(0, 30) + "</div><div class=\"cSelRemove\" onclick=\"myMultiRemove('" + id + "','" + index + "','" + key + "')\"></div><div style=\"clear:both;\"></div></div>");
            oSel[index]++;
        }
        else {
            $("#dSelNoContent" + index).append("<div class=\"cSelValue\" id=\"dSelNoContent" + index + "-" + key + "\" title=\"" + oS[key].innerHTML + "\"><div style=\"float:left; \" title=\"" + oS[key].innerHTML + "\">" + oS[key].innerHTML.substr(0, 30) + "</div><div class=\"cSelAdd\" onclick=\"myMultiAdd('" + id + "','" + index + "','" + key + "')\"></div><div style=\"clear:both;\"></div></div>");
            oNoSel[index]++;
        }
    }

    return;
}


// Auswahl selektieren
function myMultiAdd(id, index, i) {

    var oS = document.getElementById(id).options;
    oS[i].selected = true;
    
    /*
    $("#dSelYesContent" + index).append("<div class=\"cSelValue2\" id=\"dSelYesContent" + index + "-" + i + "\"><div style=\"float:left;\">" + oS[i].innerHTML + "</div><div class=\"cSelRemove\" onclick=\"myMultiRemove('" + id + "','" + index + "','" + i + "')\"></div><div style=\"clear:both;\"></div></div>");
    $("#dSelYesContent" + index + "-" + i).slideDown("fast");

    $("#dSelNoContent" +index+"-"+ i).slideUp("fast", function () {
        $("#dSelNoContent" +index+"-"+ i).remove();
    });
    */

    myMultiLoad(id, index);

    // Anzahl Status aktualisieren
    // myMultiGetStatus(id, index);

    // Event bei Änderung
    if (typeof (window.myMultiOnChange) == "function") myMultiOnChange(id);

    return;
}


// Auswahlt entfernen
function myMultiRemove(id, index, i) {

    var oS = document.getElementById(id).options;
    oS[i].selected = false;
    //$("#dSelNoContent" + index).append("<div class=\"cSelValue2\" id=\"dSelNoContent" + index + "-" + i + "\"><div style=\"float:left;\">" + oS[i].innerHTML + "</div><div class=\"cSelAdd\" onclick=\"myMultiAdd('" + id + "','" + index + "','" + i + "')\"></div><div style=\"clear:both;\"></div></div>");
    //$("#dSelNoContent" + index + "-" + i).slideDown("fast");
    
    /*
    $("#dSelYesContent" + index + "-" + i).slideUp("fast", function () {
        //$("#dSelYesContent" + index + "-" + i).remove();
        
    });
    */

    myMultiLoad(id, index);

    // Anzahl Status aktualisieren
    // myMultiGetStatus(id, index);

    // Event bei Änderung
    if (typeof (window.myMultiOnChange) == "function") myMultiOnChange(id);
}


$(document).ready(function () {

        $(".myMulti").each(function (index) {

            // Element ID
            myMultiID = "myMulti" + index;

            // Überschriften
            var myMultiHeader = new Array();
            myMultiHeader = $(this).attr('title').split(';');

            // HTML-Code für Auswahlfelder
            var myMultiHtml = '<div class="cSelNoHeader"><div>' + myMultiHeader[0] + '</div></div><div class="cSelYesHeader"><div>' + myMultiHeader[1] + '</div></div><div style="clear:both;"></div><div class="cSelNoContent" id="dSelNoContent' + index + '"></div><div class="cSelYesContent" id="dSelYesContent' + index + '"></div><div style="clear:both;"></div>';

            // Original Selectfeld verstecken und Neuen HTML-Code hinzufügen
            $(this).attr({ id: myMultiID });
            $(this).hide();
            $(this).after(myMultiHtml);

            // Status
            oSel[index] = 0;
            oNoSel[index] = 0;

            // Anzahl Status aktualisieren
            //myMultiGetStatus(myMultiID, index);

            // Optionen in Auswahlfelder laden
            myMultiLoad(myMultiID, index);

        });
});