/**
 * Global Variables
 */
var selectedEngine = false;
var requestCompleted = true;
/**
 * Refresh the slider with the current pricing
 */
function hideSlider() {
    $('slider').hide();
}
document.observe("dom:loaded", hideSlider);

/**
 * Refresh the slider with the current pricing
 */
function refreshSlider() {
    new Ajax.Request('json/slider', {
        onComplete: function(response) {
            text = response.responseText;

            if (text != '' && !Element.visible('slider')) {
                new Effect.SlideDown('slider', { beforeStart:function() {
                    $('slidercontent').update(text);
                }

                });
            } else if (text == '' && Element.visible('slider')) {
                new Effect.SlideUp('slider', {afterFinish:function() {
                    $('slidercontent').update(text);
                }
                });
            } else {
                $('slidercontent').update(text);
            }
        }
        ,on412: function(response) { // Session ungültig
            window.location = '/konfi'; // IE6 may need this: setTimeout(function(){window.location = '/konfi';}, 0);
            return false;
        }
    });

}
//document.observe("dom:loaded",refreshSlider);


/**
 * Refresh the slider content with the current pricing
 */
function refreshSliderContent() {

    new Ajax.Request('json/slider', {
        onComplete: function(response) {
            text = response.responseText;
            if (Element.visible('slider')) {
                new Effect.SlideUp('slider', {afterFinish:function() {
                    $('slidercontent').update(text);
                }
                });
            }
        }
        ,on412: function(response) { // Session ungültig
            window.location = '/konfi'; // IE6 may need this: setTimeout(function(){window.location = '/konfi';}, 0);
            return false;
        }
    });

}


/**
 * Generic function to show a error Message
 */
function showError(message) {
    $('konfierror').update(message);
    $('konfierror').appear({duration: 1.0});
}

function hideError() {
    $('konfierror').update('');
}


/**
 * Class to handle Background-Position,
 *     which is different between IE and the rest of the World.
 * This class needs prototype.js
 *
 * Currently always uses "px" as unit.
 */
var bgImageHandler = Class.create({

    /**
     * Constructor
     *
     * set some defaults
     */
    initialize: function(elem) {
        this.elem = $(elem);
        this.isIE = Prototype.Browser.IE;
        if (this.isIE) {
            this.posX = this.elem.getStyle('backgroundPositionX');
            this.posY = this.elem.getStyle('backgroundPositionY');
        } else {
            var splitRes = this.elem.getStyle('backgroundPosition').split(' ');
            this.posX = splitRes[0];
            this.posY = splitRes[1];
        }
    },
    /**
     * setter for x-coordinate
     */
    setX: function(pixels) {

        if (this.isIE) {
            this.elem.setStyle({backgroundPositionX: pixels + 'px'});
        } else {
            this.elem.setStyle({backgroundPosition: pixels + 'px' + ' ' + this.posY });
        }

        return;
    },
    /**
     * setter for y-coordinate
     */
    setY: function(pixels) {

        if (this.isIE) {
            this.elem.setStyle({backgroundPositionY: pixels + 'px'});
        } else {
            this.elem.setStyle({backgroundPosition: this.posX + ' ' + pixels + 'px'});
        }

        return;
    }
}); // end Class bgImageHandler
/**
 * Class that handles the Main Tabs
 */
var mainTabHandler = Class.create({

    /**
     * Constructor
     *
     * set some defaults
     */
    initialize: function() {
        this.activeTab = false;
        this.tabs = ['engine', 'colors', 'rims', 'equip', 'accessory', 'final'];
    },

    /**
     * Show another tab
     */
    showTab: function(event, tab) {
        if (mainTabHdl.inProgress) {
            return false;
        }

        new Ajax.Request('json/checktab/tab/' + tab, {
            onComplete: function(response) {
                if (response.responseJSON && response.responseJSON.hasError) {
                    showError(response.responseJSON.error);
                }
                else {
                    var tabArt = "";
                    var splitRes; // result from string.split()
                    if ($('tab_' + tab).hasClassName('tab_' + tab + '_long') ||
                        $('tab_' + tab).hasClassName('tab_' + tab + '_active_long') ||
                        $('tab_' + tab).hasClassName('tab_' + tab + '_visited_long'))
                        tabArt = "_long";

                    if ($('tab_' + this.activeTab)) {
                        // remove exist class, because don't use multiple class for stupid IE6
                        $('tab_' + this.activeTab).removeClassName('tab_' + this.activeTab + '_active' + tabArt);
                        // add new class
                        $('tab_' + this.activeTab).addClassName('tab_' + this.activeTab + '_visited' + tabArt);
                        this.activeTab = tab;
                    }
                    else {
                        this.activeTab = tab;
                    }

                    // remove exist class, because don't use multiple class for stupid IE6
                    if ($('tab_' + tab).hasClassName('tab_' + tab + '_visited' + tabArt))
                        $('tab_' + tab).removeClassName('tab_' + tab + '_visited' + tabArt);
                    else
                        $('tab_' + tab).removeClassName('tab_' + tab + tabArt);
                    // add new class
                    $('tab_' + tab).addClassName('tab_' + tab + '_active' + tabArt);

                    $('overlay').setOpacity(0);
                    $('overlay').show();

                    //refresh the slider
                    if (tab != 'engine') {
                        refreshSlider();
                    }

                    new Ajax.Request('konfi/show/tab/' + tab, {
                        evalScripts: true,
                        onComplete: function(response) {
                            $('overlay').hide();
                            $('ajaxcontent').update(response.responseText);
                            $('konfierror').update('');

                            //check if tab is last page and remove next-button, else show it
                            if (tab == 'final') {
                                $$('#konfifooter .weiter').each(function(element) {
                                    $(element).style.display = 'none';
                                });
                            } else {
                                $$('#konfifooter .weiter').each(function(element) {
                                    $(element).style.display = 'block';
                                });
                            }
                            mainTabHdl.inProgress = false;
                        }
                    });
                }
            }.bind(this),

            // Session ungültig
            on412: function(response) {
                window.location = '/konfi'; // IE6 may need this: setTimeout(function(){window.location = '/konfi';}, 0);
                return false;
            }
        });
        return false;
    },
    /**
     * Attach Click observers on individual Tabs and Button "next tab"
     */
    attachObservers: function() {
        this.tabs.each(function(element) {
            var tab = $('tab_' + element);
            if (tab !== null) {
                tab.observe('click', this.showTab.bindAsEventListener(this, element));
            }
        }.bind(this));
        if ($('nexttabButton')) {
            $('nexttabButton').observe('click', function(event) {
                for (i = 0; i < this.tabs.length; i++) {
                    if (this.tabs[i] == this.activeTab && i < this.tabs.length - 1) {
                        this.showTab(null, this.tabs[i + 1]);
                        return;
                    }
                }
            }.bind(this));
        }
        // return false; // always return false to prevent a href action being executed
    }
}); // End Class mainTabHandler

/**
 * Create instance of mainTabHandler in global scope and set default tab, if not set.
 */
var mainTabHdl;
document.observe("dom:loaded", function() {
    mainTabHdl = new mainTabHandler();
    mainTabHdl.attachObservers();
    if (mainTabHdl.activeTab === false && !activeTab) {
        mainTabHdl.showTab(null, 'engine');
    }
    else {
        mainTabHdl.showTab(null, activeTab);
    }
});
/**
 * Class that handles mouseOver/Out and Click Events on the engineFilters
 */
var engineFilterHandler = Class.create({
    /**
     * Constructor
     */
    initialize: function() {
        this.inProgress = false;
    },
    /**
     * Handle MouseOver Event
     */
    mOverEv: function(event) {

        var e = event.element();
        if (!e.hasClassName('item')) {
            e = e.up('div.item');
        }

        //if element is marked as inactive, do nothing
        if (e.hasClassName('inactive')) {
            return false;
        }

        if (e.hasClassName('selected')) {
            e.down('img.check').writeAttribute('src', '/_gfx/konfi/kreuzchen.gif');
        }

        e.style.cursor = 'pointer';

        e.down('div.text').setStyle({ border: '2px solid #B6BBD0'});
        e.down('img.check').setStyle({ visibility: 'visible' });
        if (undefined !== e.down('img.info')) {
            e.down('img.info').setStyle({ visibility: 'visible'});
        }
    },
    /**
     * Handle MouseOut Event
     */
    mOutEv: function(event) {

        document.body.style.cursor = 'auto';
        var e = event.element();
        if (!e.hasClassName('item')) {
            e = e.up('div.item');
        }
        e.down('div.text').setStyle({ border: '2px solid #FFF'});
        if (!e.hasClassName('selected')) {
            e.down('img.check').setStyle({ visibility: 'hidden'});
            if (undefined !== e.down('img.info')) {
                e.down('img.info').setStyle({ visibility: 'hidden'});
            }
        }
        e.down('img.check').writeAttribute('src', '/_gfx/konfi/haekchen.gif');
    },
    /**
     * Handle Click Event
     */
    mClickEv: function(event) {
        var e = event.element();
        if (!e.hasClassName('item')) {
            e = e.up('div.item');
        }

        //if element is marked as inactive, do nothing
        if (e.hasClassName('inactive')) {
            return false;
        }

        if (e.hasClassName('selected')) { // was active, set inactive
            e.removeClassName('selected');
        } else {
            e.addClassName('selected');
        }


        var id = e.id;
        var result = id.match(/filter_(.*)_(.*)_(.*)/);
        var filter = result[1];
        var dbId = result[2];
        var mode = result[3];

        $('overlay').setOpacity(0);
        $('overlay').show();

        if (this.inProgress) {
            return false;
        }

        this.inProgress = true;
        var url = 'konfi/show/tab/engine/filter/' + filter + '/filterid/' + dbId + '/mode/' + mode;

        var ajaxRequest = new Ajax.Updater('ajaxcontent', url, {evalScripts: true,
            onComplete: function(response) {
                $('overlay').hide();
                engFilterHdl.inProgress = false;
            }
            ,on412: function(response) { // Session ungültig
                window.location = '/konfi'; // IE6 may need this: setTimeout(function(){window.location = '/konfi';}, 0);
                return false;
            }});
    },
    /**
     * Initialize a new Prototip element on elem with content
     */
    activatePrototip: function(elem, content) {
        new Tip(elem, content, {
            style: 'hyuEngineFilter',
            hideAfter: 0.1
        });
        return;
    },
    /**
     * Attach MouseOver/Out an CLick observers
     */
    attachObservers: function() {
        $$('div.filter>div').each(function(element) {
            if (element.id == '') {
                return;
            } // div's without ID are not a action element

            $(element).observe('mouseover', this.mOverEv.bindAsEventListener(this));

            $(element).observe('mouseout', this.mOutEv.bindAsEventListener(this));

            $(element).observe('click', this.mClickEv.bindAsEventListener(this));

            // If we have a Info-Button, attach a prototip to it
            var tipImg = element.down('img.info');
            if ((typeof tipImg != 'undefined')) { // we have a info button
                var infoId = element.id;
                var result = infoId.match(/filter_(.*)_(.*)_(.*)/);
                var filter = result[1];
                var dbId = result[2];
                var infotext = new Ajax.Request('json/infotext/part/' + filter + '/id/' + dbId, {onComplete: function(response) {
                    this.activatePrototip(tipImg, response.responseJSON.infotext);
                }.bind(this)});
            }
        }.bind(this));
        return;
    }
}); // End Class engineFilterHandler

/**
 * Class that handles mouseOver/Out and Click Events on the engineList
 */
var engineListHandler = Class.create({
    /**
     * Constructor
     */
    initialize: function() {
        this.tOut = null; // Class var to store a timeout
        this.activeItem = null; // store currently selected element
        this.activeBorderColor = '#B6BBD0'; // 2px border aktiv
        this.inactiveBorderColor = '#ffffff'; // 2px border inaktiv
        this.inactiveLowerLineColor = '#d8d7d5'; // 1px Line below a inactive row
        this.activeLowerLineColor = '#ffffff'; // 1px Line below a active row
    },
    /**
     * Generic method to hide/deactivate an Item
     */
    hideItem: function(item) {
        //try{
        document.body.style.cursor = 'auto';
        item.down('div.items').setStyle({ borderColor: '#ffffff' });

        if (!item.hasClassName('selected')) {
            item.setStyle({ borderColor: this.inactiveLowerLineColor });
            item.down('img.check').setStyle({ visibility: 'hidden' });
            if (undefined !== item.down('img.info')) {
                item.down('img.info').setStyle({ visibility: 'hidden'});
            }
        }
        //} catch( err) {
        //	window.alert('engineListHandler.hideItem: JavaScript Exception: '+err);
        //}
    },
    /**
     * Generic method to show/activate an Item
     */
    showItem: function(item) {

        document.body.style.cursor = 'pointer';
        item.addClassName('mouseover');

        //item.setStyle({ borderColor: this.activeLowerLineColor });
        item.down('div.items').setStyle({ borderColor: this.activeBorderColor });
        item.down('img.check').setStyle({ visibility: 'visible' });
        if (undefined !== item.down('img.info')) {
            item.down('img.info').setStyle({ visibility: 'visible'});
        }
    },
    /**
     * Handle MouseOver Event
     *
     * MouseOver clears the mouseOut Timeout and activates the new Element, if it's not the selected one.
     */
    mOverEv: function(event) {
        var e = event.element();
        if (e.hasClassName('info')) { // if this is the info image, we have a pointer
            document.body.style.cursor = 'pointer';
        }
        if (!e.hasClassName('line')) {
            e = e.up('div.line');
        }
        if (this.tOut) {
            clearTimeout(this.tOut);
        }
        if (this.activeItem !== null) {
            this.hideItem(this.activeItem);
        }
        this.activeItem = e;
        this.showItem(e);

        if (e.hasClassName('selected')) {
            e.down('img.check').writeAttribute('src', '/_gfx/konfi/kreuzchen.gif');
        }
    },
    /**
     * Handle MouseOut Event
     *
     * MouseOut sets a Timeout to clear the last active item, if it's not the selected one.
     */
    mOutEv: function(event) {
        document.body.style.cursor = 'auto';
        var e = event.element();
        if (!e.hasClassName('line')) {
            e = e.up('div.line');
        }

        e.removeClassName('mouseover');

        if (!e.hasClassName('selected')) {
            var self = this;
            this.tOut = setTimeout(function() {
                self.hideItem(e);
            }, 50);
        }

        e.down('img.check').writeAttribute('src', '/_gfx/konfi/haekchen.gif');
    },
    /**
     * Handle Click Event
     *
     * Click selects the current item and updates the slider.
     * Also catches the click on the info-Button.
     */
    mClickEv: function(event) {
        var e = event.element();
        if (!e.hasClassName('line')) {
            e = e.up('div.line');
        }
        var lastSelected = false;
        $$('div#output>div.selected').each(function(element) {
            lastSelected = element;
            element.down('div.items').setStyle({ borderColor: this.activeLowerLineColor });
            element.down('img.check').setStyle({ visibility: 'hidden' });
            if (element.down('img.info')) {
                element.down('img.info').setStyle({ visibility: 'hidden' });
            }
            element.removeClassName('selected');
        }.bind(this));
        var colorcode = e.readAttribute('colorcode');
        var trimlevel = e.readAttribute('trimlevel');
        var bodygeneration = e.readAttribute('bodygeneration');
        //changeBody(bodygeneration);
        changeLine(bodygeneration, trimlevel, colorcode, true);
        var id = e.readAttribute('engineid');
        var request = new Ajax.Request('json/engine/id/' + id, {onComplete: function(response) {
            if (response.responseJSON.hasBody) {
                $('comparemodels').removeClassName('inactive');
                $('comparemodels').src = '/_gfx/konfigurator/button_vergleichen.gif';
                enableNexttabButton();
            }
            else {
                $('comparemodels').addClassName('inactive');
                $('comparemodels').src = '/_gfx/konfigurator/button_vergleichen_inactive.gif';
                disableNexttabButton();
            }
            hideError();
            refreshSliderContent();
        }});

        if (!lastSelected || lastSelected != e) {
            e.addClassName('selected');
        }
    },
    /**
     * Initialize a new Prototip element on elem with content
     */
    activatePrototip: function(elem, content) {
        new Tip(elem, content, {
            style: 'hyuEngineList',
            hideAfter: 0.1
        });
        // elem.prototip.show();
        return;
    },
    /**
     * Attach MouseOver/Out an Click observers
     */
    attachObservers: function() {
        $$('div#output>div.line').each(function(element) {

            $(element).observe('mouseover', this.mOverEv.bindAsEventListener(this));

            $(element).observe('mouseout', this.mOutEv.bindAsEventListener(this));

            $(element).observe('click', this.mClickEv.bindAsEventListener(this));

            // If we have a Info-Button, attach a prototip to it
            var tipImg = element.down('img.info');
            if ((typeof tipImg != 'undefined')) { // we have a info button
                var engineId = element.readAttribute('engineid');
                var infotext = new Ajax.Request('json/infotext/part/engine/id/' + engineId, {onComplete: function(response) {
                    this.activatePrototip(tipImg, response.responseJSON.infotext);
                }.bind(this)});
            }
        }.bind(this));
        // suppress last bottom line
        ($('output').immediateDescendants()).last().setStyle({borderBottom: '0'});
        return;
    }
}); // End Class engineListHandler


function observeReconfigureButton() {
    if ($('reconfigurecar')) {
        $('reconfigurecar').observe('click', function(event) {
            if ($('reconfigurecar').down('img').readAttribute('src') == '/_gfx/konfigurator/button_zurueck_zur_modellauswahl.gif') {
                $('reconfigurecar').writeAttribute('href', '/konfi');
                window.location.href = '/konfi';
            }
            else {
                request = new Ajax.Request('json/resetcar', {onComplete: function(response) {
                    window.location.href = '/konfi/konfi';
                }});
            }
        });
    }
}
document.observe("dom:loaded", observeReconfigureButton);

//observe sort icons of engine list
function observeEngineSortIcons() {
    $$('.listhl .sorticon').each(function(element) {
        $(element).observe('click', function(event) {

            request = new Ajax.Request('json/sortenginelist/orderby/' + $(element).readAttribute('sort'), {onComplete: function(response) {
                mainTabHdl.showTab(null, 'engine');
            }});
        });
    });
}

//observe mouseover and clicks on colors
function observeColors() {
    currentColor = false;
    $$('div.farbe').each(function(element) {
        if ($(element).hasClassName('selected')) {
            currentColor = element;
        }
        if (!$(element).hasClassName('inactive')) {

            if ($(element).down('img.info')) {
                tip = new Tip($(element).down('img.info'), unescape($(element).down('img.info').readAttribute('tooltip')), {
                    style: 'hyuEngineFilter',
                    hideAfter: 0.1
                });
            }

            //on click change color of car
            $(element).observe('click', function(event) {
                if (!event.element().hasClassName('info') && requestCompleted) {
                    requestCompleted = false;
                    colorcode = $(element).readAttribute('colorcode');
                    colorid = $(element).readAttribute('colorid');

                    if (currentColor) {
                        $(currentColor).removeClassName('selected');
                    }

                    currentColor = element;

                    if ($(element).hasClassName('selected')) {
                        $(element).removeClassName('selected');
                    }
                    else {
                        $(element).addClassName('selected');
                    }

                    request = new Ajax.Request('json/colors/id/' + colorid, {onComplete: function() {
                        changeColor(colorcode);
                        requestCompleted = true;
                        mainTabHdl.showTab(null, 'colors');
                    }});
                }
            });

            $(element).observe('mouseover', function(event) {
                $(element).addClassName('mouseover');
            });

            $(element).observe('mouseout', function(event) {
                $(element).removeClassName('mouseover');
            });
        }
        else {
            request = new Ajax.Request('html/colorinactive/id/' + $(element).readAttribute('colorid'), {onComplete: function(response) {
                elementOffset = $(element).positionedOffset();
                viewportWidth = document.viewport.getDimensions().width;

                if (elementOffset[0] > (viewportWidth / 2)) {
                    tooltipFilter = 'hyuColorPopupLeft';
                }
                else {
                    tooltipFilter = 'hyuColorPopup';
                }

                tip = new Tip($(element), response.responseText, {
                    style: tooltipFilter,
                    hideAfter: 0.1
                });
            }});
        }
    });
}

//observe mouseover and clicks on cushions
function observeCushions() {

    currentCushion = false;
    $$('div.polster').each(function(element) {
        if ($(element).hasClassName('selected')) {
            currentCushion = element;
        }

        if (!$(element).hasClassName('inactive')) {

            if ($(element).down('img.info')) {
                tip = new Tip($(element).down('img.info'), unescape($(element).down('img.info').readAttribute('tooltip')), {
                    style: 'hyuEngineFilter',
                    hideAfter: 0.1
                });
            }

            //on click change cushion of car
            $(element).observe('click', function(event) {
                cushionid = $(element).readAttribute('cushionid');
                if (event.element().hasClassName('detail')) {
                    showDetailCarousel('cushionDetailOverlay', 'cushionid', cushionid, true);
                }
                else if (event.element().hasClassName('image') || event.element().hasClassName('check') || event.element().hasClassName('selectable')) {
                    if (currentCushion) {
                        $(currentCushion).removeClassName('selected');
                    }
                    currentCushion = element;
                    if ($(element).hasClassName('selected')) {
                        $(element).removeClassName('selected');
                    }
                    else {
                        $(element).addClassName('selected');
                    }
                    request = new Ajax.Request('json/cushions/id/' + cushionid, {onComplete: function(response) {
                        if ($(element).hasClassName('carouselItem')) {
                            if (response.responseJSON.selected) {

                                $(element).down('img.check').writeAttribute('src', '/_gfx/konfi/kreuzchen.gif');
                            }
                            else {
                                $(element).down('img.check').writeAttribute('src', '/_gfx/konfi/haekchen.gif');
                            }
                        }
                        if (!$(element).hasClassName('carouselItem')) {
                            mainTabHdl.showTab(null, 'colors');
                        }
                    }});
                }
            });

            $(element).observe('mouseover', function(event) {
                $(element).addClassName('mouseover');
            });

            $(element).observe('mouseout', function(event) {
                $(element).removeClassName('mouseover');
            });
        }
        else {
            request = new Ajax.Request('html/cushioninactive/id/' + $(element).readAttribute('cushionid'), {onComplete: function(response) {
                elementOffset = $(element).positionedOffset();
                viewportWidth = document.viewport.getDimensions().width;

                if (elementOffset[0] > (viewportWidth / 2)) {
                    tooltipFilter = 'hyuCushionPopupLeft';
                }
                else {
                    tooltipFilter = 'hyuCushionPopup';
                }

                tip = new Tip($(element), response.responseText, {
                    style: tooltipFilter,
                    hideAfter: 0.1
                });
            }});
        }
    });
}

//observe mouseover and clicks on cushions
function observePackages(tab) {

    var currentPackage = false;
    var cssSelector = (tab == 'equip') ? 'div.equippaket' : 'div.paket';

    $$(cssSelector).each(function(element) {
        if ($(element).hasClassName('selected')) {
            currentPackage = element;
        }

        if (!$(element).hasClassName('inactive')) {
            if ($(element).down('img.info')) {
                tip = new Tip($(element).down('img.info'), unescape($(element).down('img.info').readAttribute('tooltip')), {
                    style: 'hyuEngineFilter',
                    hideAfter: 0.1
                });
            }


            equiprequest = new Ajax.Request('html/getcolorcushion/id/' + $(element).readAttribute('packageid') + '/package/1/tab/equip', {onComplete: function(equipresponse) {
                if (equipresponse.responseText != '' && !$(element).hasClassName('selected')) {
                    $(element).removeClassName('mouseover');
                    tip = new Tip($(element), equipresponse.responseText, {
                        style: 'hyuRimPopup',
                        hideAfter: 0.1
                    });
                } else {
                    //on click change package of car
                    $(element).observe('click', function(event) {
                        packageid = $(element).readAttribute('packageid');
                        hasrims = $(element).readAttribute('hasrims');
                        if (!packageid) {
                            packageid = $(element).readAttribute('equipid');
                        }

                        cushionid = $(element).readAttribute('cushionid');

                        if (event.element().hasClassName('detail')) {
                            /*Effect.Appear($(element).down('div.detailimage'), { duration: 0.5 ,from:0.0, to:1.0});
                             event.stop();*/
                        }
                        else if (event.element().hasClassName('image') || event.element().hasClassName('check') || event.element().hasClassName('selectable')) {
                            if (currentPackage) {
                                $(currentPackage).removeClassName('selected');
                            }
                            currentPackage = element;
                            if ($(element).hasClassName('selected')) {
                                $(element).removeClassName('selected');
                            }
                            else {
                                $(element).addClassName('selected');
                            }

                            if (hasrims == "0") {
                                url = 'json/packages/id/' + packageid;
                            } else {
                                url = 'json/rimpackage/id/' + packageid;
                            }


                            if (cushionid) {
                                url = url + '/cushionid/' + cushionid;
                            }

                            request = new Ajax.Request(url, {onComplete: function(response) {
                                //sonderfall ix20 Paketfelge
                                //console.log(response.responseJSON);
                                if (hasrims == "1") {
                                    //    try {
                                    changeWheels(response.responseJSON.selectedRim);
                                    //  } catch(e) {
                                    //  }
                                }
                                if ($(element).hasClassName('carouselItem')) {
                                    if (response.responseJSON.selected) {

                                        $(element).down('img.check').writeAttribute('src', '/_gfx/konfi/kreuzchen.gif');
                                    }
                                    else {
                                        $(element).down('img.check').writeAttribute('src', '/_gfx/konfi/haekchen.gif');
                                    }
                                }
                                else {
                                    mainTabHdl.showTab(null, tab);
                                }
                            }});
                        }
                    });
                }
            }});


            $(element).observe('mouseover', function(event) {

                $(element).addClassName('mouseover');
                if ($(element).hasClassName('selected') && !$(element).hasClassName('carouselItem') && $(element).readAttribute('defaultpackage') != '1') {
                    $(element).down('img.check').writeAttribute('src', '/_gfx/konfi/kreuzchen.gif');
                }

            });

            $(element).observe('mouseout', function(event) {
                $(element).removeClassName('mouseover');
                if (!$(element).hasClassName('carouselItem')) {
                    $(element).down('img.check').writeAttribute('src', '/_gfx/konfi/haekchen.gif');
                }
            });
        }
        else if (!$(element).up('#zusatzausstattung')) {
            request = new Ajax.Request('html/packageinactive/id/' + $(element).readAttribute('packageid'), {onComplete: function(response) {
                elementOffset = $(element).positionedOffset();
                viewportWidth = document.viewport.getDimensions().width;

                if (elementOffset[0] > (viewportWidth / 2)) {
                    tooltipFilter = 'hyuPackagePopupLeft';
                }
                else {
                    tooltipFilter = 'hyuPackagePopup';
                }

                tip = new Tip($(element), response.responseText, {
                    style: tooltipFilter,
                    hideAfter: 0.1
                });
            }});
        }
        else {
            request = new Ajax.Request('html/packageinactive/tab/equip/id/' + $(element).readAttribute('packageid'), {onComplete: function(response) {
                if (response.responseText) {
                    elementOffset = $(element).positionedOffset();
                    viewportWidth = document.viewport.getDimensions().width;

                    if (elementOffset[0] > (viewportWidth / 2)) {
                        tooltipFilter = 'hyuPackagePopupLeft';
                    }
                    else {
                        tooltipFilter = 'hyuPackagePopup';
                    }

                    tip = new Tip($(element), response.responseText, {
                        style: tooltipFilter,
                        hideAfter: 0.1
                    });
                }
            }});
        }


//		else{
//			$(element).observe('mouseover', function(event){
//				elementOffset = $(element).positionedOffset();
//				viewportWidth = document.viewport.getDimensions().width;
//
//				if(elementOffset[0] > (viewportWidth / 2)){
//					tooltipFilter = 'hyuRimPopupLeft';
//				}
//				else{
//					tooltipFilter = 'hyuRimPopup';
//				}
//
//				tip = new Tip($(element), 'Dieser Artikel ist in der gewählten Variante nicht verfügbar. Wählen Sie eine andere Variante um diesen Artikel zu erhalten.', {
//					style: tooltipFilter,
//					hideAfter: 0.1
//				});
//			});
//		}
        /*
         if(tab == 'equip'){
         $$('.zubehoer.equippaket img.selectable').each(function(element){
         $(element).observe('mouseover', function(event){
         $(element).up('.equippaket').addClassName('mouseover');
         if($(element).up('.equippaket').readAttribute('tooltip') && !event.element().hasClassName('buttons')){
         tip = new Tip($(element).up('.equippaket'), $(element).up('.equippaket').readAttribute('tooltip'), {
         style: 'hyuCushionPopup',
         hideAfter: 0.1
         });
         }
         });

         $(element).observe('mouseout', function(event){
         $(element).up('.equippaket').removeClassName('mouseover');
         });
         });
         }*/
    });
}

function observeAccessoryTabs() {

    var accessorytabs = ['aussen', 'innen', 'infotainment', 'sicherheit', 'transport'];
    accessorytabs.each(function(element) {
        if ($('tab_' + element).hasClassName('active')) {
            var bgh = new bgImageHandler($('tab_' + element));
            bgh.setY(-42);
        } else if ($('tab_' + element).hasClassName('visited')) {
            var bgh = new bgImageHandler($('tab_' + element));
            bgh.setY(-21);
        } else {
            var bgh = new bgImageHandler($('tab_' + element));
            //bgh.setY(0);
            bgh.setY(-21);
        }
    });
    accessorytabs.each(function(element) {
        if ($('tab_' + element) === null) {
            return true;
        }
        $('tab_' + element).observe('click', function(event) {
            $('overlay').setOpacity(0);
            $('overlay').show();
            url = 'konfi/show/tab/accessory/subtab/' + element;
            ajaxRequest = new Ajax.Updater('ajaxcontent', url, {evalScripts: true, onComplete: function(response) {
                $('overlay').hide();
                $('tab_' + element).addClassName('active');
            }});
        });
        return null;
    });

    return null;
}


function observeRimsTabs() {

    var rimstabs = ['serie', 'leichtmetall', 'komplett', 'all'];
    rimstabs.each(function(element) {
        if ($('tab_' + element).hasClassName('active')) {
            var bgh = new bgImageHandler($('tab_' + element));
            bgh.setY(-42);
        } else if ($('tab_' + element).hasClassName('visited')) {
            var bgh = new bgImageHandler($('tab_' + element));
            bgh.setY(-21);
        } else {
            var bgh = new bgImageHandler($('tab_' + element));
            //bgh.setY(0);
            bgh.setY(-21);
        }
    });
    rimstabs.each(function(element) {
        if ($('tab_' + element) === null) {
            return;
        }
        $('tab_' + element).observe('click', function(event) {
            var elem = $('overlay');
            elem.setOpacity(0);
            elem.show();
            var url = 'konfi/show/tab/rims/subtab/' + element;
            var ajaxRequest = new Ajax.Updater('ajaxcontent', url, {
                evalScripts: true,
                onComplete: function(response) {
                    $('overlay').hide();
                    $('tab_' + element).addClassName('active');
                }
            });
        });
        return;
    });
    return;
}

function observeRims() {

    $$('div.felge').each(function(element) {
        if (!$(element).hasClassName('inactive')) {

            if ($(element).down('img.info')) {

                elementOffset = $(element).positionedOffset();
                viewportWidth = document.viewport.getDimensions().width;

                if (elementOffset[0] > (viewportWidth / 2)) {
                    tooltipFilter = 'hyuRimsTooltipLeft';
                }
                else {
                    tooltipFilter = 'hyuRimsTooltip';
                }

                var tip = new Tip($(element).down('img.info'), unescape($(element).down('img.info').readAttribute('tooltip')), {
                    style: tooltipFilter,
                    hideAfter: 0.1
                });
            }

            if ($(element).down('img.check')) {
                if ($(element).down('img.check').readAttribute('tooltip')) {
                    elementOffset = $(element).positionedOffset();
                    viewportWidth = document.viewport.getDimensions().width;

                    if (elementOffset[0] > (viewportWidth / 2)) {
                        tooltipFilter = 'hyuRimsTooltipLeft';
                    }
                    else {
                        tooltipFilter = 'hyuRimsTooltip';
                    }

                    var tip = new Tip($(element).down('img.check'), unescape($(element).down('img.check').readAttribute('tooltip')), {
                        style: tooltipFilter,
                        hideAfter: 0.1
                    });
                }

            }

            rimrequest = new Ajax.Request('html/getcolorcushion/id/' + $(element).readAttribute('rimid') + '/package/' + $(element).readAttribute('package') + '/tab/rim', {onComplete: function(rimresponse) {
                if (rimresponse.responseText != '' && !$(element).hasClassName('selected')) {
                    $(element).removeClassName('mouseover');
                    tip = new Tip($(element), rimresponse.responseText, {
                        style: 'hyuRimPopup',
                        hideAfter: 0.1
                    });
                } else {

                    $(element).observe('click', function(event) {
                        var rimcode = $(element).readAttribute('rimcode');
                        var rimid = $(element).readAttribute('rimid');
                        var is_package = $(element).readAttribute('package');
                        if (event.element().hasClassName('detail')) {
                            showDetailCarousel('rimDetailOverlay', 'rimid', rimid, true);
                        }
                        else if (event.element().hasClassName('image') || event.element().hasClassName('check') || event.element().hasClassName('selectable')) {
                            if ($(element).hasClassName('selected')) {
                                $(element).removeClassName('selected');
                            } else {
                                $(element).addClassName('selected');
                            }
                            if (is_package == "0") {
                                action = 'json/rims/id/';
                            } else {
                                action = 'json/rimpackage/id/';
                            }
                            var request = new Ajax.Request(action + rimid, {onComplete: function(response) {

                                try {
                                    changeWheels(response.responseJSON.selectedRim);
                                } catch(e) {
                                }

                                if ($(element).hasClassName('carouselItem')) {
                                    if (response.responseJSON.selected) {
                                        $(element).down('img.check').writeAttribute('src', '/_gfx/konfi/kreuzchen.gif');
                                    }
                                    else {
                                        $(element).down('img.check').writeAttribute('src', '/_gfx/konfi/haekchen.gif');
                                    }
                                }
                                if (!$(element).hasClassName('carouselItem')) {
                                    mainTabHdl.showTab(null, 'rims');
                                }
                            }});
                        }
                    });
                }
            }});


            $(element).observe('mouseover', function(event) {
                $(element).addClassName('mouseover');
                if ($(element).hasClassName('selected') && !$(element).hasClassName('carouselItem') && $(element).readAttribute('defaultrim') != '1') {
                    $(element).down('img.check').writeAttribute('src', '/_gfx/konfi/kreuzchen.gif');
                }


            });

            $(element).observe('mouseout', function(event) {
                $(element).removeClassName('mouseover');
                if (!$(element).hasClassName('carouselItem')) {
                    $(element).down('img.check').writeAttribute('src', '/_gfx/konfi/haekchen.gif');
                }
            });


        }
        else {
            //   $(element).observe('mouseover', function(event) {
            rimrequest = new Ajax.Request('html/getriminactive/id/' + $(element).readAttribute('rimid'), {onComplete: function(rimresponse) {
                tip = new Tip($(element), rimresponse.responseText, {
                    style: 'hyuRimPopup',
                    hideAfter: 0.1
                });
            }});
            //  });

        }
    });
}

function observeEquip(tab) {

    $$('div.zubehoer').each(function(element) {

        if ($(element).hasClassName('equippaket')) {
            return false;
        }

        if (!$(element).hasClassName('inactive')) {

            if ($(element).down('img.info')) {
                elementOffset = $(element).positionedOffset();
                viewportWidth = document.viewport.getDimensions().width;

                if (elementOffset[0] > (viewportWidth / 2)) {
                    tooltipFilter = 'hyuEquipTooltipLeft';
                }
                else {
                    tooltipFilter = 'hyuEquipTooltip';
                }

                var tip = new Tip($(element).down('img.info'), unescape($(element).down('img.info').readAttribute('tooltip')), {
                    style: tooltipFilter,
                    hideAfter: 0.1
                });
            }

            $(element).observe('click', function(event) {

                var equipid = $(element).readAttribute('equipid');
                if (event.element().hasClassName('detail')) {
                    if (tab == 'equip') {
                        showDetailCarousel('equipDetailOverlay', 'equipid', equipid, true);
                    }
                    else {
                        showDetailCarousel('accessoryDetailOverlay', 'equipid', equipid, true);
                    }

                }
                else if (event.element().hasClassName('image') || event.element().hasClassName('check') || event.element().hasClassName('selectable')) {
                    if ($(element).hasClassName('selected')) {

                        $(element).removeClassName('selected');
                    }
                    else {

                        $(element).addClassName('selected');
                    }
                    var action = 'json/equip/id/';
                    var request = new Ajax.Request(action + equipid, {
                        onComplete: function(response) {
                            if ($(element).hasClassName('carouselItem')) {
                                if (response.responseJSON.selected) {

                                    $(element).down('img.check').writeAttribute('src', '/_gfx/konfi/kreuzchen.gif');
                                }
                                else {
                                    $(element).down('img.check').writeAttribute('src', '/_gfx/konfi/haekchen.gif');
                                }
                            }

                            if (!$(element).hasClassName('carouselItem')) {
                                mainTabHdl.showTab(null, tab);
                            }
                        }
                    });
                }
            });

            $(element).observe('mouseover', function(event) {

                $(element).addClassName('mouseover');
                if ($(element).hasClassName('selected') && !$(element).hasClassName('carouselItem')) {
                    $(element).down('img.check').writeAttribute('src', '/_gfx/konfi/kreuzchen.gif');
                }
            });

            $(element).observe('mouseout', function(event) {
                $(element).removeClassName('mouseover');
                if (!$(element).hasClassName('carouselItem')) {
                    $(element).down('img.check').writeAttribute('src', '/_gfx/konfi/haekchen.gif');
                }
            });
        }
        else {
            //$(element).observe('mouseover', function(event) {
            tip = new Tip($(element), 'Dieser Artikel ist in der gewählten Variante nicht verfügbar. Wählen Sie eine andere Variante um diesen Artikel zu erhalten.', {
                style: 'hyuRimPopup',
                hideAfter: 0.1
            });
            //});
        }
        return true;
    });
}

function observeCushionColor() {
    $$('div.cushioncolor').each(function(element) {
        $(element).observe('mouseover', function(event) {
            $(element).addClassName('cushioncolor_mouseover');
        });

        $(element).observe('mouseout', function(event) {
            $(element).removeClassName('cushioncolor_mouseover');
        });

        $(element).observe('click', function(event) {
            colorcode = $(element).readAttribute('colorcode');
            colorid = $(element).readAttribute('colorid');
            cushionid = $(element).readAttribute('cushionid');
            packageid = $(element).readAttribute('packageid');
            url = 'json/cushioncolor/colorid/' + colorid + '/cushionid/' + cushionid + '/packageid/' + packageid;
            changeColor(colorcode);

            request = new Ajax.Request(url, {onComplete: function(response) {
                mainTabHdl.showTab(null, 'colors');
            }});
        });
    });
}

function observeRemovePackageColor(tab) {
    $$('div.cushioncolor').each(function(element) {
        $(element).observe('mouseover', function(event) {
            $(element).addClassName('cushioncolor_mouseover');
        });

        $(element).observe('mouseout', function(event) {
            $(element).removeClassName('cushioncolor_mouseover');
        });

        $(element).observe('click', function(event) {
            colorcode = $(element).readAttribute('colorcode');
            colorid = $(element).readAttribute('colorid');
            partid = $(element).readAttribute('partid');
            ispackage = $(element).readAttribute('ispackage');
            url = 'json/removepackagecolor/colorid/' + colorid + '/partid/' + partid + '/ispackage/' + ispackage;


            request = new Ajax.Request(url, {onComplete: function(response) {

                mainTabHdl.showTab(null, tab);

            }});
        });
    });
}


function observeRimColor() {
    $$('div.cushioncolor').each(function(element) {
        $(element).observe('mouseover', function(event) {
            $(element).addClassName('cushioncolor_mouseover');
        });

        $(element).observe('mouseout', function(event) {
            $(element).removeClassName('cushioncolor_mouseover');
        });

        $(element).observe('click', function(event) {
            colorcode = $(element).readAttribute('colorcode');
            colorid = $(element).readAttribute('colorid');
            rimid = $(element).readAttribute('rimid');
            url = 'json/rimcolor/colorid/' + colorid + '/rimid/' + rimid;
            changeColor(colorcode);

            request = new Ajax.Request(url, {onComplete: function(response) {
                mainTabHdl.showTab(null, 'rims');
            }});
        });
    });
}


function observeCushionPackage(tab) {
    if (tab == undefined) tab = 'colors';

    $$('div.cushionpackage').each(function(element) {
        $(element).observe('mouseover', function(event) {
            $(element).addClassName('cushionpackage_mouseover');
        });

        $(element).observe('mouseout', function(event) {
            $(element).removeClassName('cushionpackage_mouseover');
        });

        $(element).observe('click', function(event) {
            packageid = $(element).readAttribute('packageid');
            cushionid = $(element).readAttribute('cushionid');
            url = 'json/cushionpackage/cushionid/' + cushionid + '/packageid/' + packageid + '/tab/' + tab;

            request = new Ajax.Request(url, {onComplete: function(response) {
//				mainTabHdl.showTab(null, 'colors');
                mainTabHdl.showTab(null, tab);
            }});
        });
    });
}


function observeColorPackage(tab) {
    if (tab == undefined) tab = 'colors';

    $$('div.cushionpackage').each(function(element) {
        $(element).observe('mouseover', function(event) {
            $(element).addClassName('cushionpackage_mouseover');
        });

        $(element).observe('mouseout', function(event) {
            $(element).removeClassName('cushionpackage_mouseover');
        });

        $(element).observe('click', function(event) {
            //colorcode = $(element).readAttribute('colorcode');
            packageid = $(element).readAttribute('packageid');
            colorid = $(element).readAttribute('colorid');
            url = 'json/packagecolor/colorid/' + colorid + '/packageid/' + packageid + '/tab/' + tab;
            //changeColor(colorcode);

            request = new Ajax.Request(url, {onComplete: function(response) {
//				mainTabHdl.showTab(null, 'colors');
                mainTabHdl.showTab(null, tab);
            }});
        });
    });
}

function observePackageColor() {
    $$('div.packagecolor').each(function(element) {
        $(element).observe('mouseover', function(event) {
            $(element).addClassName('cushioncolor_mouseover');
        });

        $(element).observe('mouseout', function(event) {
            $(element).removeClassName('cushioncolor_mouseover');
        });

        $(element).observe('click', function(event) {
            colorcode = $(element).readAttribute('colorcode');
            colorid = $(element).readAttribute('colorid');
            packageid = $(element).readAttribute('packageid');
            url = 'json/packagecolor/colorid/' + colorid + '/packageid/' + packageid;
            changeColor(colorcode);

            request = new Ajax.Request(url, {onComplete: function(response) {
                mainTabHdl.showTab(null, 'colors');
            }});
        });
    });
}

function observeCompareModelsButton() {
    $('comparemodels').observe('click', function(event) {

        try {
            if (!event.element().hasClassName('inactive')) {
                new Ajax.Request('konfi/compare', {
                    onComplete: function(response) {
                        $$('#compareModelsOverlay .overlaycontent').each(function(element) {
                            $(element).update(response.responseText);
                        });
                    }
                    ,on412: function(response) { // Session ungültig
                        window.location = '/konfi'; // IE6 may need this: setTimeout(function(){window.location = '/konfi';}, 0);
                        return false;
                    }});
                showOverlay('compareModelsOverlay');
            }
        }
        catch(err) {

            //alert("ERROR: "+err);
        }
    });
}

function observeEmissionButton(id_comb_final) {
    $('emission').observe('click', function() {
        loadEmissionsData(id_comb_final);
        showOverlay('emissionsOverlay');
    });
}

function observeEmissionButtonNew(model,body) {
    $('emission').observe('click', function() {
        new Ajax.Request('/konfi/emission/htmltable/model/'+model+'/body/'+body+'/width/0/target/konfi', {
            onComplete: function(response) {
                $$('#emissionsOverlay .overlaycontent').each(function(element) {
                    $(element).update(response.responseText);
                });
                showOverlay('emissionsOverlay');
            }
            ,on412: function(response) { // Session ungültig
                window.location = '/konfi'; // IE6 may need this: setTimeout(function(){window.location = '/konfi';}, 0);
                return false;
            }
        });

    });
}

function loadEmissionsData(id_comb_final) {
    var params = {};
    if (id_comb_final) {
        params.id_comb_final = id_comb_final;
    }

    new Ajax.Request('konfi/emissions', {
        parameters:params,
        onComplete: function(response) {
            $$('#emissionsOverlay .overlaycontent').each(function(element) {
                $(element).update(response.responseText);
            });
        }
        ,on412: function(response) { // Session ungültig
            window.location = '/konfi'; // IE6 may need this: setTimeout(function(){window.location = '/konfi';}, 0);
            return false;
        }
    });
}

function observeDealersearchButton(id_comb_final) {

    if ($('dealersearchbutton')) {
    	$('dealersearchbutton').observe('click', function() {
        	var params = {};
        	if (id_comb_final)
            	params.id_comb_final = id_comb_final;
        	new Ajax.Request('konfi/dealersearch', {
            	parameters:params,
            	onComplete: function(response) {
                	$$('#dealersearchOverlay .overlaycontent').each(function(element) {
                    	$(element).update(response.responseText);
                	});
            	},
            	on412: function(response) { // Session ungültig
                	window.location = '/konfi'; // IE6 may need this: setTimeout(function(){window.location = '/konfi';}, 0);
                	return false;
            	}});
        	showOverlay('dealersearchOverlay');
    	});
    }
}

function observeGetOfferButton(link) {

    if ($('getofferbutton')) {
    	$('getofferbutton').observe('click', function() {

        	new Ajax.Request('/forms/index/getoffer/car/' + link, {
            	onComplete: function(response) {
                	$$('#getofferOverlay .overlaycontent').each(function(element) {
                    	$(element).update(response.responseText);
                	});
            	}
            	,on412: function(response) { // Session ungültig
                	window.location = '/konfi'; // IE6 may need this: setTimeout(function(){window.location = '/konfi';}, 0);
                	return false;
            	}});
        	showOverlay('getofferOverlay');
    	});
    }
}

function showOverlay(overlayid) {

    if ($(overlayid) == null) {
        return true;
    }
    $(overlayid).hide();

    var elem = $('overlay');
    if (elem == null) {
        return true;
    }
    elem.toggle();

    if (!$(overlayid).visible()) {

        try {
            var viewportHeight = document.viewport.getHeight();
            var viewportWidth = document.viewport.getWidth();
            var scroll = document.viewport.getScrollOffsets();

            var layerHeight = $(overlayid).getHeight();
            var layerWidth = $(overlayid).getWidth();

            //var viewportOffset = $(overlayid).viewportOffset().top;
            var viewportOffset = 0;

            $('overlay').style.height = viewportHeight + scroll.top + "px";

            topPosition = ((viewportHeight - layerHeight) / 2) + scroll.top;
            leftPosition = ((viewportWidth - layerWidth) / 2) + scroll.left;

            if (navigator.appName == "Microsoft Internet Explorer" && (navigator.appVersion.indexOf('MSIE 6') != -1)) {
                leftPosCorrection = ($('overlay').viewportOffset().left * -1);
                if (leftPosCorrection > 0) {
                    leftPosCorrection = 0 - leftPosCorrection;
                }

                leftPosition = 0;

                overlayWidth = document.viewport.getWidth();
                if (overlayWidth < $('outer').getWidth()) {
                    overlayWidth = $('outer').getWidth();
                }

                $('overlay').style.position = 'absolute';
                $('overlay').style.left = leftPosCorrection + 'px';
                $('overlay').style.width = overlayWidth;
                $('overlay').style.height = ($('outer').getHeight() + $('header').getHeight()) + 'px';
            }

            $(overlayid).style.top = topPosition + "px";
            $(overlayid).style.left = leftPosition + "px";
            $('overlay').hide();
            Effect.Appear($('overlay'), { duration: 0.5 ,from:0.0, to:0.75});
            Effect.Appear($(overlayid), { duration: 0.5 ,from:0.0, to:1.0});
        }
        catch(err) {
            //alert("ERROR: "+err);
        }
    }

    $('overlay').observe('click', function(event) {
        hideOverlay(overlayid);
        Event.stopObserving($('overlay'));
    });

    $$('.detail_out').each(function(element) {
        $(element).observe('click', function(event) {
            hideOverlay(overlayid);
            Event.stopObserving($(element));
        });
    });

    return true;
}

function hideOverlay(overlayid) {
    Effect.Fade('overlay', { duration: 0.5 ,from:0.75, to:0.0});
    Effect.Fade(overlayid, { duration: 0.5 ,from:1.0, to:0.0});

    if ($(overlayid).readAttribute('reloadtab')) {
        mainTabHdl.showTab(false, $(overlayid).readAttribute('reloadtab'));
    }
}

function observeEmissionPopup() {
    $('buttonemissionclose').observe('click', function(event) {
        hideOverlay('emissionsOverlay');
    });
}

function observeCompareModelList() {
    $('buttoncompareclose').observe('click', function(event) {
        hideOverlay('compareModelsOverlay');
    });

    $$('div.selectModel').each(function(element) {

        $(element).observe('click', function(event) {
            if ($(element).down('.modelList').visible()) {
                $(element).down().setStyle({backgroundImage:'url(/_gfx/konfi/selectModel_on.gif)'});
            } else {
                $(element).down().setStyle({backgroundImage:'url(/_gfx/konfi/selectModel_off.gif)'});
            }
            Effect.toggle($(element).down('.modelList'), 'blind', {duration: 0.5});
        });
        $(element).observe('mouseover', function(event) {
            $(element).style.cursor = 'pointer';
        });

        $(element).observe('mouseout', function(event) {
            $(element).style.cursor = 'auto';
        });


    });

    $$('div.modelListEntry').each(function(element) {
        $(element).observe('click', function(event) {
            new Ajax.Request('konfi/compare/modelid/' + $(element).readAttribute('modelid') + '/row/' + $(element).readAttribute('modelrow'), {onComplete: function(response) {
                $$('#compareModelsOverlay .overlaycontent').each(function(element) {
                    $(element).update(response.responseText);
                });
            }});
        });
        $(element).observe('mouseover', function(event) {
            $(element).style.cursor = 'pointer';
        });

        $(element).observe('mouseout', function(event) {
            $(element).style.cursor = 'auto';
        });


    });
    $$('div.modelListEntryData').each(function(element) {

        $(element).observe('click', function(event) {
            new Ajax.Request('konfi/comparedata/modelid/' + $(element).readAttribute('modelid') + '/row/' + $(element).readAttribute('modelrow'), {onComplete: function(response) {
                $$('#compareModelsOverlay .overlaycontent').each(function(element) {
                    $(element).update(response.responseText);
                });
            }});
        });
        $(element).observe('mouseover', function(event) {
            $(element).style.cursor = 'pointer';
        });

        $(element).observe('mouseout', function(event) {
            $(element).style.cursor = 'auto';
        });
    });

    $$('a.comparechangemodel').each(function(element) {

        $(element).observe('click', function(event) {
            var modelid = element.readAttribute('modelid');
            if (modelid) {
                var request = new Ajax.Request('json/engine/id/' + modelid + '/continue/1', {onComplete: function(response) {
                    mainTabHdl.showTab(false, 'engine');
                    hideOverlay('compareModelsOverlay');
                    var colorcode = element.readAttribute('colorcode');
                    var trimlevel = element.readAttribute('trimlevel');
                    var bodygeneration = element.readAttribute('bodygeneration');
                    changeLine(bodygeneration, trimlevel, colorcode, true);
                }});
            }
        });
    });

    $$('a.compareclosemodel').each(function(element) {
        $(element).observe('click', function(event) {
            hideOverlay('compareModelsOverlay');
        });
        $(element).observe('mouseover', function(event) {
            $(element).style.cursor = 'pointer';
        });

        $(element).observe('mouseout', function(event) {
            $(element).style.cursor = 'auto';
        });
    });

    $('buttontabcompareequip').observe('click', function(event) {
        new Ajax.Request('konfi/compare', {
            onComplete: function(response) {
                $$('#compareModelsOverlay .overlaycontent').each(function(element) {
                    $(element).update(response.responseText);
                });
            }
            ,on412: function(response) { // Session ungültig
                window.location = '/konfi'; // IE6 may need this: setTimeout(function(){window.location = '/konfi';}, 0);
                return false;
            }});
    });

    $('buttontabcomparedata').observe('click', function(event) {
        new Ajax.Request('konfi/comparedata', {onComplete: function(response) {
            $$('#compareModelsOverlay .overlaycontent').each(function(element) {
                $(element).update(response.responseText);
            });
        }
            ,on412: function(response) { // Session ungültig
                window.location = '/konfi'; // IE6 may need this: setTimeout(function(){window.location = '/konfi';}, 0);
                return false;
            }});
    });
}

function observeGetOfferOverlay() {
    $('container_tab_haendler').hide();
    $('container_tab_senden').hide();
    $('container_tab_danke').hide();

    $('buttongetofferclose').observe('click', function(event) {
        hideOverlay('getofferOverlay');
    });
}

function observeDetailCarousel(overlay, key) {
    $$('#' + overlay + ' div.detailCarousel').each(function(element) {
        $(element).select('div.carouselItem').each(function(item) {
            $(item).select('div.buttons .next, div.buttons .previous').each(function(element) {
                $(element).observe('click', function(event) {
                    button = event.element();
                    showDetailCarousel(overlay, key, button.readAttribute('elementid'));
                    event.stop();
                });
            });
        });
    });
}

function showDetailCarousel(overlay, key, id, showoverlay) {
    $$('#' + overlay + ' div.detailCarousel .carouselItem').each(function(element) {
        if ($(element).readAttribute(key) != id) {
            $(element).hide();
        }
        else {
            $(element).show();
        }
    });

    if (showoverlay) {
        showOverlay(overlay);
    }
}

function observeFinalTablinks() {
    $$('div .lastlink').each(function(element) {
        element.observe('click', function(event) {
            if (element.hasClassName('farben')) {
                mainTabHdl.showTab(false, 'colors');
            }

            if (element.hasClassName('zusatz')) {
                mainTabHdl.showTab(false, 'equip');
            }

            if (element.hasClassName('felgen') || element.hasClassName('felgenzubehoer')) {
                mainTabHdl.showTab(false, 'rims');
            }

            if (element.hasClassName('zubehoer')) {
                mainTabHdl.showTab(false, 'accessory');
            }
        });
    });
}

function observeAcceptDealerButton() {
    $('buttonsearchclose').observe('click', function(event) {
        hideOverlay('dealersearchOverlay');
    });

    $('acceptdealerbutton').observe('click', function(event) {
        var params = {};
        params['dealerid'] = $('mapactionacceptdealer').readAttribute('dealerid');
        params['lat'] = $('mapactionacceptdealer').readAttribute('lat');
        params['lon'] = $('mapactionacceptdealer').readAttribute('lon');
        params['searchaddress'] = $('mapactionacceptdealer').readAttribute('searchaddress');
        new Ajax.Request('json/dealer', {parameters:params,
            onComplete: function(response) {
                hideOverlay('dealersearchOverlay');
                mainTabHdl.showTab(false, 'final');
            },
            on412: function(response) { // Session ungültig
                window.location = '/konfi'; // IE6 may need this: setTimeout(function(){window.location = '/konfi';}, 0);
                return false;
            }
        });
    });
}

function enableNexttabButton() {
    $('nexttabButton').down('img').src = '/_gfx/konfigurator/button_weiter.gif';
    $('reconfigurecar').down('img').src = '/_gfx/konfigurator/button_neu_konfigurieren.gif';
}
function disableNexttabButton() {
    $('nexttabButton').down('img').src = '/_gfx/konfigurator/button_weiter_inactive.gif';
}