/**
 * Central class for tour operator multi choice
 * Tour operators are drawn from the termine_xxx cachefile.
 * @author Michael Dreher <dreher@traveltainment.de>
 * @copyright 2011 Traveltainment GmbH
 * @class The subclass for the tour operator multi choice.
 * @extends TTBaseMultiChoice 
 * @constructor 
 */
TTTourOperatorMultiChoice = function() {
    // Call constructor of base class
    TTTourOperatorMultiChoice.parent.constructor.call(
        this,
        'ttTourOperatorMulti',          // Name der Instanzvariable
        'marke',                        // Hier kommen die Daten hin
        'markeGui',                     // Das Formularfeld (select/input)
        ';',                            // Marke-Separator
        'ttTOMCContainer',              // Container-ID
        'ttTOMCOperator'                // Item Prefix
    );

    this.setConfig({
        syncWithCachefile:   true,                              // Vorgegebene Veranstalter mit Cachefile synchronisieren?
        labelViewName:       'Veranstaltername',                // Label für Ansicht "Veranstaltername" 
        labelViewLogo:       'Logo',                            // Label für Ansicht "Logo" 
        labelViewBoth:       'Veranstaltername &amp; Logo',     // Label für Ansicht "Veranstaltername & Logo" 
        labelAny:            'beliebig',
        labelAnyLayer:       'alle Veranstalter',
        labelMultiChoice:    'Mehrfachauswahl',
        showChangeGui:       false,                             // Zeige als name/logo/both in GUI anzeigen?
        showType:            'both',                            // name / logo / both
        tooltips:            {},                                // Tooltips für bestimmte Veranstalter
        maxLengthNameBoth:   20,                                // Maximallaenge des angezeigten Namens der Veranstalter bei gleichzeitiger Anzeige des Logos
        maxLengthNameName:   20                                // Maximallaenge des angezeigten Namens der Veranstalter bei Anzeige des Namens allein
        //inputGrouped:        true                               // Sollen die Veranstalter im Select gruppiert werden? (optgroup-Tags)
    });

    this.changeGuiIsPrinted = false;
};

// extend TTBaseMultiChoice
TTOOP.extend(TTTourOperatorMultiChoice, TTBaseMultiChoice);

/**
 * Initialization of the tour operator multi choice data. 
 */
TTTourOperatorMultiChoice.prototype.initData = function() {
    // VA-Array aus Cachefile
    var arrMarke = this.isPopup ? opener['arrMarke_' + opener.port] : window['arrMarke_' + port];
    
    // tour operators from cachefile
    if (typeof arrMarke != 'undefined' && arrMarke.length > 0) {
        var groupTmp = [];
        for (var i = 0; i < arrMarke.length; i++) {
            var opTmp = arrMarke[i].split(';');
            this.setLabel(opTmp[1], opTmp[0]);
            groupTmp[groupTmp.length] = opTmp[1];
        }
        // no groups defined by customer
        if (this.config.groups.length == 0) {
            // add default group with all operators from cachefile
            this.addGroup(groupTmp);
        } else {
            // remove tour operators from groups if not exist in cachefile
            if (this.config.syncWithCachefile) {
                this.updateGroupsFromCache();
            }
        }
    } else {
        if (this.config.groups.length > 0 && !this.config.syncWithCachefile) {
            // use customer defined groups without cachefile
            // TODO!
        }
    }
};

/**
 * Print the change GUI elements.
 */
TTTourOperatorMultiChoice.prototype.printAdditional = function() {
    if (this.config.showChangeGui) {
        this.printChangeGui();
    }
};

/**
 * Sets the tooltips for tour operators that are shown on mouseover over the name / logo / checkbox
 * @param {Object} obj
 */
TTTourOperatorMultiChoice.prototype.setTooltips = function(obj) {
    if (typeof obj != 'object' || obj.length == 0) {
        return;
    }
    this.config.tooltips = obj;
};

/**
 * Removes tour operators from the user defined groups that do not exist in the cachefile. 
 */
TTTourOperatorMultiChoice.prototype.updateGroupsFromCache = function() {
    var tmpGroups = [];
    for (var i = 0; i < this.config.groups.length; i++) {
        var tmpGroupsSub = [];
        for (var j = 0; j < this.config.groups[i].length; j++) {
            if (typeof this.labels[this.config.groups[i][j]] == 'object') {
                tmpGroupsSub[tmpGroupsSub.length] = this.config.groups[i][j];
            }
        }
        if (tmpGroupsSub.length > 0) {
            tmpGroups[tmpGroups.length] = tmpGroupsSub;
        }
    }
    this.config.groups = tmpGroups;
};

/**
 * Returns HTML Code of a operator item. 
 * @param {Object} item
 * @param {Object} isSelected
 */
TTTourOperatorMultiChoice.prototype.getItemSrc = function(item, isSelected) {
    var html       = '';
    var opLogoSrc  = this.getOperatorLogoSrc(item);
    var tooltip    = this.getTooltipForOperator(item);
    
    if (typeof this.callbacks.customerPrintOperator == 'function') {
        // kundenspezifische Anzeigemethode
        html += this.callbacks.customerPrintOperator(item, this.labels[item].label, opLogoSrc, isSelected, this.config.controlType, this.config.showType, this.config.showChangeGui);
    } else {
        if (this.config.controlType == 'input') {
            // Checkboxen
            html += '<div id="' + this.itemPrefix + '_' + item + '" class="' + this.itemPrefix + 'Item' + (isSelected ? 'Checked' : '') + '" onmouseover="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOver(this); }" onmouseout="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOut(this); }">'
                 +  '    <div class="' + this.itemPrefix + 'Input"><input id="' + this.itemPrefix + 'Checkbox_' + item + '" type="checkbox" value="' + item + '" onclick="' + this.instanceName + '.clickItem(this);"' + (isSelected ? ' checked="checked"' : '') + ' /></div>';

            if (this.config.showType == 'both' || this.config.showType == 'name') {
                html += '<label for="' + this.itemPrefix + 'Checkbox_' + item + '" class="' + this.itemPrefix + 'Name"' + (tooltip == '' ? '' : ' title="' + tooltip + '"') + '>' + this.getOperatorLabel(item) + '</label>';
            }
            if (this.config.showType == 'both' || this.config.showType == 'logo') {
                html += '<label for="' + this.itemPrefix + 'Checkbox_' + item + '" class="' + this.itemPrefix + 'LogoLabel"><img src="' + this.getOperatorLogoSrc(item) + '" alt="" class="' + this.itemPrefix + 'Logo" title="Veranstalter ' + this.labels[item].label + '" onclick="this.parentNode.click();" /></label>';
            }

            html += '    <div class="clearBoth"><!-- --></div>'
                 +  '</div>';
        } else if (this.config.controlType == 'graphic') {
            // Grafische Elemente
            html += '<div id="' + this.itemPrefix + 'Checkbox_' + item + '" class="' + this.itemPrefix + 'Item' + (isSelected ? 'Checked' : '') + '" onclick="' + this.instanceName + '.clickItem(this);" mcValue="' + item + '" onmouseover="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOver(this); }" onmouseout="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOut(this); }">';

            if (this.config.showType == 'both' || this.config.showType == 'name') {
                html += '<div class="' + this.itemPrefix + 'Name"' + (tooltip == '' ? '' : ' title="' + tooltip + '"') + '>' + this.getOperatorLabel(item) + '</div>';
            }
            if (this.config.showType == 'both' || this.config.showType == 'logo') {
                html += '<div class="' + this.itemPrefix + 'LogoLabel"><img src="' + this.getOperatorLogoSrc(item) + '" alt="" class="' + this.itemPrefix + 'Logo" title="Veranstalter ' + this.labels[item].label + '" /></div>';
            }

            html += '    <div class="clearBoth"><!-- --></div>'
                 +  '</div>';
        }
    }
    return html;
};

/**
 * Returns the HTML Code of the any item.
 */
TTTourOperatorMultiChoice.prototype.getItemSrcAny = function() {
    var html = '';
    if (this.config.controlType == 'input') {
        html = '<div id="' + this.itemPrefix + '_0" class="' + this.itemPrefix + 'Item' + (this.dataArr.length == 0 ? 'Checked' : '') + '" onmouseover="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOver(this); }" onmouseout="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOut(this); }">'
             + '    <div class="' + this.itemPrefix + 'Input">'
             + '        <input id="' + this.itemPrefix + 'Checkbox_0" type="checkbox" value="" onclick="' + this.instanceName + '.clickItem(this);"' + (this.dataArr.length == 0 ? ' checked="checked"' : '') + ' />'
             + '    </div>'
             + '    <label for="' + this.itemPrefix + 'Checkbox_0" class="' + this.itemPrefix + 'Name">' + this.config.labelAnyLayer + '</label>'
             + '</div>';
    } else if (this.config.controlType == 'graphic') {
        html = '<div id="' + this.itemPrefix + 'Checkbox_0" class="' + this.itemPrefix + 'Item' + (this.dataArr.length == 0 ? 'Checked' : '') + '" onclick="' + this.instanceName + '.clickItem(this);" mcValue="" onmouseover="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOver(this); }" onmouseout="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOut(this); }">'
             + '    <div class="' + this.itemPrefix + 'Name">' + this.config.labelAnyLayer + '</div>'
             + '</div>';
    }
    return html;
};

/**
 * Returns the label for an operator.
 * @param {Object} opShort
 */
TTTourOperatorMultiChoice.prototype.getOperatorLabel = function(opShort) {
    if (this.config.showType != 'both' && this.config.showType != 'name') {
        return '';
    }
    var maxLength = this.config.showType == 'both' ? this.config.maxLengthNameBoth : this.config.maxLengthNameName;

    if (typeof TTTourOperatorMultiChoiceCustomerGetOperatorLabel == 'function') {
        return TTTourOperatorMultiChoiceCustomerGetOperatorLabel(opShort, this.labels[opShort].label, maxLength);
    }
    if (this.labels[opShort].label.length > maxLength) {
        return this.labels[opShort].label.substr(0, maxLength - 2) + '...';
    } else {
        return this.labels[opShort].label;
    }
};

/**
 * Returns the logo source for an operator.
 * @param {Object} opShort
 */
TTTourOperatorMultiChoice.prototype.getOperatorLogoSrc = function(opShort) {
    if (this.config.showType != 'both' && this.config.showType != 'logo') {
        return '';
    }

    if (typeof TTTourOperatorMultiChoiceCustomerGetOperatorLogoSrc == 'function') {
        return TTTourOperatorMultiChoiceCustomerGetOperatorLogoSrc(opShort);
    }

    var path = this.isPopup ? opener.imgservPfad : imgservPfad;
    var oKID = this.isPopup ? opener.KID : KID;
    var logo = opShort == 'VTO' ? oKID + '-' + opShort : opShort;
 
    return path + '/images/content/va_logos/small/' + logo + '.gif';
};

/**
 * Returns the tooltip text for an operator.
 * @param {Object} opShort
 */
TTTourOperatorMultiChoice.prototype.getTooltipForOperator = function(opShort) {
    if (typeof this.config.tooltips[opShort] == 'undefined') {
        return '';
    }
    return this.config.tooltips[opShort];
};

/**
 * Prints the Gui change elements.
 */
TTTourOperatorMultiChoice.prototype.printChangeGui = function() {
    var elemName = document.getElementById('ttTOMCChangeViewName');
    var elemLogo = document.getElementById('ttTOMCChangeViewLogo');
    var elemBoth = document.getElementById('ttTOMCChangeViewBoth');

    // Mindestens 2 Elemente müssen vorhanden sein
    if (elemName == null && (elemLogo == null || elemBoth == null) || elemLogo == null && elemBoth == null) {
        return;
    }
    if (elemName != null) {
        if (this.config.controlType == 'input') {
            elemName.innerHTML = '<div class="ttTOMCChangeViewItem' + (this.config.showType == 'name' ? 'Checked' : '') + '" onmouseover="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOver(this); }" onmouseout="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOut(this); }">'
                               + '    <input type="radio" id="ttTOMCView_name" class="ttTOMCChangeViewInput" name="ttTOMCView" value="name" onclick="' + this.instanceName + '.setShowType(\'name\');"' + (this.config.showType == 'name' ? ' checked="checked"' : '') + ' />'
                               + '    <label class="ttTOMCChangeViewLabel" for="ttTOMCView_name">' + this.config.labelViewName + '</label>'
                               + '</div>';
        } else if (this.config.controlType == 'graphic') {
            elemName.innerHTML = '<div class="ttTOMCChangeViewItem' + (this.config.showType == 'name' ? 'Checked' : '') + '" onmouseover="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOver(this); }" onmouseout="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOut(this); }">'
                               + '    <div id="ttTOMCView_name" class="ttTOMCChangeViewInput" view="name" onclick="' + this.instanceName + '.setShowType(\'name\');">' + this.config.labelViewName + '</div>'
                               + '</div>';
        }
    }
    if (elemLogo != null) {
        if (this.config.controlType == 'input') {
            elemLogo.innerHTML = '<div class="ttTOMCChangeViewItem' + (this.config.showType == 'logo' ? 'Checked' : '') + '" onmouseover="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOver(this); }" onmouseout="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOut(this); }">'
                               + '    <input type="radio" id="ttTOMCView_logo" class="ttTOMCChangeViewInput" name="ttTOMCView" value="logo" onclick="' + this.instanceName + '.setShowType(\'logo\');"' + (this.config.showType == 'logo' ? ' checked="checked"' : '') + ' />'
                               + '    <label class="ttTOMCChangeViewLabel" for="ttTOMCView_logo">' + this.config.labelViewLogo + '</label>'
                               + '</div>';
        } else if (this.config.controlType == 'graphic') {
            elemLogo.innerHTML = '<div class="ttTOMCChangeViewItem' + (this.config.showType == 'name' ? 'Checked' : '') + '" onmouseover="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOver(this); }" onmouseout="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOut(this); }">'
                               + '    <div id="ttTOMCView_logo" class="ttTOMCChangeViewInput" view="logo" onclick="' + this.instanceName + '.setShowType(\'logo\');">' + this.config.labelViewLogo + '</div>'
                               + '</div>';
        }
    }
    if (elemBoth != null) {
        if (this.config.controlType == 'input') {
            elemBoth.innerHTML = '<div class="ttTOMCChangeViewItem' + (this.config.showType == 'both' ? 'Checked' : '') + '" onmouseover="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOver(this); }" onmouseout="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOut(this); }">'
                               + '    <input type="radio" id="ttTOMCView_both" class="ttTOMCChangeViewInput" name="ttTOMCView" value="both" onclick="' + this.instanceName + '.setShowType(\'both\');"' + (this.config.showType == 'both' ? ' checked="checked"' : '') + ' />'
                               + '    <label class="ttTOMCChangeViewLabel" for="ttTOMCView_both">' + this.config.labelViewBoth + '</label>'
                               + '</div>';
        } else if (this.config.controlType == 'graphic') {
            elemBoth.innerHTML = '<div class="ttTOMCChangeViewItem' + (this.config.showType == 'both' ? 'Checked' : '') + '" onmouseover="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOver(this); }" onmouseout="if(' + this.instanceName + '.isMouseLeaveOrEnter(event,this)) { ' + this.instanceName + '.mouseOut(this); }">'
                               + '    <div id="ttTOMCView_both" class="ttTOMCChangeViewInput" view="both" onclick="' + this.instanceName + '.setShowType(\'both\');">' + this.config.labelViewBoth + '</div>'
                               + '</div>';
        }
    }
    this.changeGuiIsPrinted = true;
};

/**
 * Sets the type to show in the label (name/logo/both).
 * @param {Object} type
 */
TTTourOperatorMultiChoice.prototype.setShowType = function(type) {
    document.getElementById('ttTOMCView_' + this.config.showType).parentNode.className = 'ttTOMCChangeViewItem';
    document.getElementById('ttTOMCView_' + type).parentNode.className = 'ttTOMCChangeViewItemChecked';

    this.config.showType = type;
    this.printItems();
};

/**
 * 
 */
TTTourOperatorMultiChoice.prototype.setCallbacks = function() {
    if (typeof TTTourOperatorMultiChoiceCustomerInit == 'function') {
        this.setCallback('customerInit', TTTourOperatorMultiChoiceCustomerInit);
    }
    if (typeof TTTourOperatorMultiChoiceCustomerInitCallback == 'function') {
        this.setCallback('customerInitCallback', TTTourOperatorMultiChoiceCustomerInitCallback);
    }
    if (typeof TTTourOperatorMultiChoiceCustomerOpen == 'function') {
        this.setCallback('customerOpen', TTTourOperatorMultiChoiceCustomerOpen);
    }
    if (typeof TTTourOperatorMultiChoiceCustomerOpenCallback == 'function') {
        this.setCallback('customerOpenCallback', TTTourOperatorMultiChoiceCustomerOpenCallback);
    }
    if (typeof TTTourOperatorMultiChoiceCustomerClose == 'function') {
        this.setCallback('customerClose', TTTourOperatorMultiChoiceCustomerClose);
    }
    if (typeof TTTourOperatorMultiChoiceCustomerCloseCallback == 'function') {
        this.setCallback('customerCloseCallback', TTTourOperatorMultiChoiceCustomerCloseCallback);
    }
    if (typeof TTTourOperatorMultiChoiceCustomerSubmitCallback == 'function') {        
        this.setCallback('customerSubmitCallback', TTTourOperatorMultiChoiceCustomerSubmitCallback);
    }
    if (typeof TTTourOperatorMultiChoiceCustomerPrintOperator == 'function') {
        this.setCallback('customerPrintOperator', TTTourOperatorMultiChoiceCustomerPrintOperator);
    }
    if (typeof TTTourOperatorMultiChoiceCustomerClickOperatorCallback == 'function') {
        this.setCallback('customerClickItemCallback', TTTourOperatorMultiChoiceCustomerClickOperatorCallback);
    }
};

// Default instance
var ttTourOperatorMulti = new TTTourOperatorMultiChoice();