<!--

Initialise.addEvent(function() {

    try {
        /*
         * Simple left and right tab events.
         */
        
        LeftTabEvents.initialize({
            "tab-images":"cell-images",
            "tab-media":"cell-media",
            "tab-datasheets":"cell-datasheets"
        });

        RightTabEvents.initialize({
            "tab-description":"cell-description",
            "tab-tellAFriend":"cell-tellAFriend"
        });
        
        /*
         * build overlay
         */
         var ArtpageOverlay = new Element('div', {
            'id' : 'ArtpageOverlay',
            'style' : 'display: none; position: fixed;'
        });
        
        $('page').insert(ArtpageOverlay);
        
        /*
         * Add event handler info box.
         */
        ArticleInfoBox.initialize();
        
        
        /* Article Addiotions (Accessoires, Replacements */
        ArticleAdditionals.initialize();

        /**
         * Variation selector
         */
        VariationSwitch.initialize();

        /*
         * Add checking methods to TellAFriendform...
         */

        if ($("tellafriendform")) {
            ["sendername","sender","recipientname","recipient"].each(function (name) {
                var item = $$("#tellafriendform input[name="+name+"]");
                TAFFormCheck.register(item[0]);
            });

            if (TAFFormCheck.validate()) {
                TAFFormCheck.showSubmit();
            }
        }
        
        /*
         * Add event handler for images.
         */

        ImageEvent.initialize();

        if ($$("#previewimages img")) {
            $$("#previewimages img").each(function (item) {
                item.observe("click",ImageEvent.handleMainImageEvent);
                item.observe("mouseover",ImageEvent.handlePreviewEvent);
            });
        }

        if ($$("#mediaLinks a")) {
            $$("#mediaLinks a").each(function (item) {
                item.observe("click", ImageEvent.handleMovieEvent);
            });
        }

    }
    catch (e) {

    }
});

/*
 * @object: TabEvents
 * 
 */

LeftTabEvents = {

    active: null,
    registered: new Hash(),

    initialize: function(items) {
        for (var tab in items) {
            if ($(tab) && $(items[tab])) {
                this.register(tab,items[tab]);
            }
        }
    },

    register: function (trigger,target) {
        LeftTabEvents.registered.set(trigger,target);
        $(trigger).observe("click",LeftTabEvents.handleClick);
        $(trigger).writeAttribute("href","#");
        if ($(trigger).hasClassName("selected")) {
            LeftTabEvents.active = trigger;
        }
    },

    handleClick: function (event) {
        if ( ! this.hasClassName("selected")) {

            activeTab = LeftTabEvents.active;
            activeCell = LeftTabEvents.registered.get(activeTab);
            triggerTab = this.getAttribute("id");
            targetCell = LeftTabEvents.registered.get(triggerTab);

            if ($(targetCell) && $(activeCell)) {
            
                LeftTabEvents.active = triggerTab;
                $(activeCell).hide();
                $(activeTab).removeClassName("selected");
                $(triggerTab).addClassName("selected");
                $(targetCell).show();
            }
        }
    }
};

RightTabEvents = {

    active: null,
    registered: new Hash(),

    initialize: function(items) {
        for (var tab in items) {
            if ($(tab) && $(items[tab])) {
                this.register(tab,items[tab]);
            }
        }
    },

    register: function (trigger,target) {
        this.registered.set(trigger,target);
        $(trigger).observe("click",this.handleClick);
        $(trigger).writeAttribute("href","#");
        if ($(trigger).hasClassName("selected")) {
            this.active = trigger;
        }
    },

    handleClick: function (event) {
        if ( ! this.hasClassName("selected")) {

            activeTab = RightTabEvents.active;
            activeCell = RightTabEvents.registered.get(activeTab);
            triggerTab = this.getAttribute("id");
            targetCell = RightTabEvents.registered.get(triggerTab);

            if ($(targetCell) && $(activeCell)) {
            
                RightTabEvents.active = triggerTab;
                $(activeCell).hide();
                $(activeTab).removeClassName("selected");
                $(triggerTab).addClassName("selected");
                $(targetCell).show();
            }
        }
    }
};

/*
 * @object: ArticleInfoBox
 * 
 */

ArticleInfoBox = {

    target : false,

    currentBox : false,

    initialize : function() {

        links = $$('a.article-info-box-link');

        links.each(function(item) {
            item.observe('mouseover', ArticleInfoBox.show, false);
            item.observe('mouseout', ArticleInfoBox.hide, false);
        });  

        boxes = $$('div.article-info-box');

        boxes.each(function(item) {
            item.observe('mouseover', ArticleInfoBox.hold, false);
            item.observe('mouseout', ArticleInfoBox.hideBox, false);
        });

    },

    hold : function() {
        
        if (document.viewport.getWidth() < 1000) {
            $('articleInfoBox' + ArticleInfoBox.target).addClassName('right');
        } else {
            $('articleInfoBox' + ArticleInfoBox.target).removeClassName('right');
        }
        
        this.show();
        
    },
    
    hideBox : function() {
        
        this.hide();
        
    },
    
    show : function() {
        
        ArticleInfoBox.target = this.readAttribute('name');
        
        if (document.viewport.getWidth() < 1000) {
            $('articleInfoBox' + ArticleInfoBox.target).addClassName('right');
        } else {
            $('articleInfoBox' + ArticleInfoBox.target).removeClassName('right');
        }
        
        if (ArticleInfoBox.currentBox) {
            $('articleInfoBox' + ArticleInfoBox.currentBox).hide();
        }
        
        $('articleInfoBox' + ArticleInfoBox.target).show();
        
        ArticleInfoBox.currentBox = ArticleInfoBox.target;
        
    },
    
    hide : function() {
        
        $('articleInfoBox' + ArticleInfoBox.target).removeClassName('right');
        
        ArticleInfoBox.target = this.readAttribute('name');
        
        $('articleInfoBox' + ArticleInfoBox.target).hide();
        
        ArticleInfoBox.currentBox = false;

    },
};

/*
 * @object: Additionals
 * 
 */

ArticleAdditionals = {
    
    currentTab : false,
    
    initialize : function() {
        
        tabLinks = $$('a.tab-link');
        tabLinks.each(function(item) {
            item.observe("click", ArticleAdditionals.switchTab);
        });
        
        contenContainers = $$('div.tab-content-container');
        ArticleAdditionals.currentTab = contenContainers[0];
        
    },
    
    switchTab : function() {
        
        tabLinks = $$('a.tab-link');
        tabLinks.each(function(item) {
            item.removeClassName('active');
        });
        
        this.href = '#additionals';
        // hide first item
        $(ArticleAdditionals.currentTab).hide();
        
        nextItem = this.rel;
        
        this.addClassName('active');
        
        $(nextItem).show();
        
        ArticleAdditionals.currentTab = nextItem;
        
    }

},


/*
 * @object: ImageEvent
 * 
 * ImageList is provided by artpage.module
 * 
 */

ImageEvent = {
    
    imageArray : false,
    
    imageThumbsArray : false,
    
    hqImageHandler : $('ArtpageWindow'),
    
    activeImageThumb : 0,
    
    activeImage : 0,
    
    isActive : 'image',
    
    initialize : function() {

        ImageEvent.updateImageList();

        var imgServer = 'http://images.vkf-renzel.com/';
        var firstImg = ImageList.keys()[0];
        var artHq = ImageList.get(firstImg).hq.url;

        if (!artHq | artHq == '') {
            artHq = ImageList.get(firstImg).art.url;
        }

        if ($('zoomMediaIcon')) {
            $('zoomMediaIcon').href = imgServer + artHq;
            $('zoomMediaIcon').rel = 'lightbox[articleImages]';
            $('zoomMediaIcon').show();
        }

        articleImageThumbs = $$('img.articleImageThumbs');
        // register articleImageThumbs to switch image on mouseover
        articleImageThumbs.each(function(item) {
            item.observe('mouseover', ImageEvent.switchThumbs, false);
        });

    },
    
    switchThumbs : function() {

        thumbImage = this.src;

        tmp = thumbImage.substring(7);
        var imgserver = thumbImage.substring(0,tmp.indexOf('/')+8);

        // Get image name without extension
        var imgname = thumbImage.toString().match(/.*\/(.+?)\./);

        if (imgname && imgname.length > 1) {

            // Get an image object from the ImageList-Hash
            var objImage = ImageList.get(imgname[1]);

            if (objImage && objImage != null) {
                if (objImage.art.url && objImage.art.url != '') {
                    // Assign an image url
                    artImage = imgserver + objImage.art.url;
                }
                $('MainImageDescription').update(objImage.art.desc);
            }
        } else {
            artImage = thumbImage.replace('img/thumb', 'img/art');
        }

        $('MainImage').src = artImage;

    },

    updateImageList: function() {
        this.updateImageList = Prototype.emptyFunction;

        document.observe('click', (function(event){
            var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]');
            if (target) {
                event.stop();

                if (target.rev && target.rev == 'movie') {

                } else {
                    this.handleMainImageEvent(target);
                }
            }
        }).bind(this));
    },

    handleEvent: function(target) {
        if (target.rev && target.rev == 'movie') {
            this.handleMovieEvent(target);
        } else {
            this.handleMainImageEvent(target);
        }
    },

    handleMovieEvent: function (handler) {

        // display a preloader

        ImageEvent.imageArray = [];

        var arrayPageSize = Helper.getPageSize();
        ImageEvent.screenWidth = arrayPageSize[0];
        ImageEvent.screenHeight = arrayPageSize[1];

        $('ArtpageOverlay').setStyle({
            width: ImageEvent.screenWidth + 'px',
            height: ImageEvent.screenHeight + 'px',
            position: 'fixed'
        });

        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

        new Effect.Appear($('ArtpageOverlay'),{
            duration: .4,
            from: 0.0,
            to: 0.4,
            afterFinish : function() {

                // load images
                new Ajax.Updater('ArtpageWindow', '/xhr/art/view-artimage.php?view=movie', {
                    parameters : {
                        article : Conf.article
                    },
                    method : 'post',
                    asynchronous : true,
                    evalScripts : true,
                    onComplete : function() {

                        // register close icons
                        ImageEvent.registerCloseIcons();

                        // now begin to appear image section
                        Effect.Appear($('ArtpageWindow'), {
                            duration: 0.2,
                            afterFinish : function() {
                                // register image thumbs
                                ImageEvent.registerImageThumbs();

                                // scale image
                                setTimeout("ImageEvent.scaleImage()", 500);

                                // register movie links
                                movieLinks = $$('a.play-article-movie');
                                movieLinks.each(function(item) {
                                    item.observe('click', ImageEvent.switchToMovie, false);
                                });

                            }
                        });
                    }
                });

            }
        });
    },

    handleMainImageEvent: function (imageLink) {

        // display a preloader
        $('ArtpageWindow').update('<img src="/img/misc/loading.gif" alt="" />');

        ImageEvent.imageArray = [];
        var imageNum = 0;   

        // get images
        if ((imageLink.rel == 'lightbox')){
            // if image is NOT part of a set, add single image to imageArray
            ImageEvent.imageArray.push([imageLink.href, imageLink.title]);         
        } else {
            // if image is part of a set..
            ImageEvent.imageArray = 
                $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
                collect(function(anchor){ return [anchor.href, anchor.title]; }).
                uniq();

            while (ImageEvent.imageArray[imageNum][0] != imageLink.href) { 
                imageNum++; 
            }
        }

        ImageEvent.activeImage = imageNum;

        var arrayPageSize = Helper.getPageSize();
        ImageEvent.screenWidth = arrayPageSize[0];
        ImageEvent.screenHeight = arrayPageSize[1];

        $('ArtpageOverlay').setStyle({ 
            width: ImageEvent.screenWidth + 'px',
            height: ImageEvent.screenHeight + 'px'
        });

        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

        new Effect.Appear($('ArtpageOverlay'),{
            duration: .4, 
            from: 0.0, 
            to: 0.4,
            afterFinish : function() {

                // load images
                new Ajax.Updater('ArtpageWindow', '/xhr/art/view-artimage.php', {
                    parameters : {
                        article : Conf.article
                    },
                    method : 'post',
                    asynchronous : true, 
                    evalScripts : true,
                    onComplete : function() {

                        $('windowImagePreloader').show();
                        $('articleNameHeader').update(ImageEvent.imageArray[ImageEvent.activeImage][1]);
                        $('windowImagePreloader').hide();
                        $('zoomImage').src =ImageEvent.imageArray[ImageEvent.activeImage][0];                        

                        // register close icons
                        ImageEvent.registerCloseIcons();

                        // now begin to appear image section
                        Effect.Appear($('ArtpageWindow'), {
                            duration: 0.2,
                            afterFinish : function() {
                                // register image thumbs
                                ImageEvent.registerImageThumbs();

                                // scale image
                                setTimeout("ImageEvent.scaleImage()", 500);

                                // register movie links
                                movieLinks = $$('a.play-article-movie');
                                movieLinks.each(function(item) {
                                    item.observe('click', ImageEvent.switchToMovie, false);
                                });

                            }
                        });
                    }
                });
            }
        });
    },

    switchToMovie : function() {

    if (ImageEvent.isActive == 'image') {

            if($('windowImagePreloader')) $('windowImagePreloader').show();

            // show movie
            ImageEvent.isActive = 'movie';
            if($('zoomImageContainer')) $('zoomImageContainer').hide();
            $('moviePlayerContainer').show();
            $('zoomImage').src = '/img/misc/spacer.gif';
            
            $('windowImagePreloader').hide();
        }

    },

    registerImageThumbs : function() {

        this.updateImageList = Prototype.emptyFunction;

        document.observe('click', (function(event){
            var target = event.findElement('a[rel^=thumbswitcher]') || event.findElement('area[rel^=thumbswitcher]');
            if (target) {
                event.stop();
                ImageEvent.handleImageThumbsEvent(target);
            }
        }).bind(this));
       
    },

    handleImageThumbsEvent : function(imageLink) {

        $('windowImagePreloader').show();

        ImageEvent.imageThumbsArray = [];
        var imageNum = 0;   

        // get images
        if ((imageLink.rel == 'thumbswitcher')){
            // if image is NOT part of a set, add single image to imageArray
            ImageEvent.imageThumbsArray.push([imageLink.href, imageLink.title]);         
        } else {
            // if image is part of a set..
            ImageEvent.imageThumbsArray = 
                $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
                collect(function(anchor){ return [anchor.href, anchor.title]; }).
                uniq();

            while ( ImageEvent.imageThumbsArray[imageNum][0] != imageLink.href) {
                imageNum++;
            }
        }

        ImageEvent.activeImageThumb = imageNum;
        
        $('zoomImage').removeAttribute('style');
        $('zoomImage').src =ImageEvent.imageThumbsArray[ImageEvent.activeImageThumb][0];

        // scale image
        setTimeout("ImageEvent.scaleImage()", 500);  

        ImageEvent.isActive = 'image';
        $('moviePlayerContainer').hide();
        $('zoomImageContainer').show();

        $('windowImagePreloader').hide();
    },

    scaleImage : function() {

       /*
         * imageWidth = $('zoomImageDimensionContainer').down().getWidth();
         * 
         * if (imageWidth > 500) {
         * 
         * var xScale = (500 / imageWidth) * 100; var wDiff = imageWidth - 500;
         * 
         * if (wDiff != 0) { new Effect.Scale($('zoomImage'), xScale, {scaleY:
         * false, duration: 0.5, delay: 0.3}); } }
         * 
         * 
         * clearTimeout();
         */
    },

    closeWindow: function () {

        new Effect.Fade($('ArtpageOverlay'));

        $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
        $('ArtpageWindow').hide();

        $('zoomImage').src = '/img/misc/spacer.gif';
    },

    registerCloseIcons : function() {

        windowClosers = $$('a.windowCloser');

        if (windowClosers) {
            windowClosers.each(function(item) {
                item.observe("click",ImageEvent.closeWindow);
            });
        }
        if ($('ArtpageOverlay')) {
            $('ArtpageOverlay').observe("click",ImageEvent.closeWindow);
        }

    }
};


/*
 * @object: TAFFormCheck
 * 
 */

var TAFFormCheck = {

    valid: false,
    map: new Hash(),

    register: function (elem) {
        if (elem.getAttribute("name")){

            elem.observe("change",TAFFormCheck.check);
            TAFFormCheck.map.set(
                elem.getAttribute("name"),
                elem.present()
            );
        }
    },

    validate: function () {
        TAFFormCheck.valid = true;
        TAFFormCheck.map.each(function(pair) {
            if (pair.value === false) {
                return TAFFormCheck.valid = false;
            }
        });
        return TAFFormCheck.valid;
    },

    check: function () {
        TAFFormCheck.map.set(
            this.getAttribute("name"),
            this.present()
        );
        if (TAFFormCheck.validate()) {
            TAFFormCheck.showSubmit();
        } else {
            TAFFormCheck.hideSubmit();
        }
    },

    showSubmit: function () {
        $("TellAFriendSend").show();
    },

    hideSubmit: function () {
        $("TellAFriendSend").hide();
    }
};

/*
 * @object: THPreview
 * 
 */

var THPreview = {

    id:        null,
    image:     null,
    target:    null,
    container: null,

    initialize: function() {
    
        var TDiv = new Element("div", {
            "id" : "thumbTarget",
            "class" : "artimage-preview",
            "style" : "display: none; position:absolute; top:0px: left:0px;"
        });

        // $$('body').insert(TDiv);
        $("page").insert(TDiv);
        this.target = TDiv;
    },

    show : function () {
    
        if (THPreview.id != this.id) {

            THPreview.target = $("thumbTarget");
            // Move old image into it's container.
            if ( ! THPreview.target.empty() ) {
                THPreview.container.update(
                    THPreview.container.innerHTML
                );
            }

            // "this" is our image which triggerd the event.
            THPreview.image = this;
            THPreview.container = $("thumbimg" + this.name);
            // Here we take care for the preview section.
            THPreview.id = this.name;
            // Set the width of the preview container
            THPreview.target.setStyle({
                width: THPreview.container.width + 8 + "px"
            });
            THPreview.target.update(
                THPreview.container.innerHTML
            );
        }

        document.observe("mousemove",THPreview.position,false);
        THPreview.target.show();
    },

    hide : function () {
        THPreview.target.hide();
        document.stopObserving("mousemove",THPreview.position,false);
    },

    position : function (event) {
    
        var right = window.innerWidth-20-event.clientX-25;
        var left = -1000;
        var bottom = window.innerHeight - 20 - event.clientY - 220;
        var xPos = event.pointerX();
        var yPos = event.pointerY();

        if (right < THPreview.target.offsetWidth) {
            THPreview.target.setStyle({
                left: xPos - THPreview.target.offsetWidth + "px"
            });
        } else if (xPos < left) {
            THPreview.target.setStyle({ left: "5px" });
        } else {
            THPreview.target.setStyle({ left: xPos + 25 + "px" });
        }

        if (bottom < THPreview.target.offsetHeight) {

            THPreview.target.setStyle({
                top : yPos - THPreview.target.offsetHeight - 10 + "px"
            });
        } else {
            THPreview.target.setStyle({ top : yPos + 10 + "px" });
        }
    }
};

VariationSwitch = {

    /**
     * Current variation
     */
    selected : 1,

    /**
     * Init variation selector
     */
    initialize : function() {

        if (hiddenVars.enabled != 1) return false;

        if ($("varSelector")) {
            $("varSelector").observe('change', VariationSwitch.select);

            var options = $("varSelector").options;

            for (var i=0; i<options.length; i++) {
                if (options[i].selected == true) {
                    VariationSwitch.selected = options[i].value;
                }
            }
        }

        if ($("varDetailForm")) {

            if (hiddenVars.enabled == 1 && hiddenVars.vars.length>0) {
                hiddenVars.vars.each(function(varsort) {
                    if ($("varItem-" + varsort)) {
                        $("varItem-" + varsort).hide();
                    }
                });
            }

            $("varDetailForm").show();
            $$("div.variationItem").each(function(el) {
                el.hide();
            })
        }

        VariationSwitch.update();
    },

    /**
     * Will be fired on selection changes
     */
    select : function(event) {
        var selector = event.target;
        var options = event.target.children;

        for (var i=0; i<options.length;i++) {
            if (options[i].selected == true) {
                VariationSwitch.selected = options[i].value;
            }
        }
        
        VariationSwitch.update();
    },

    /**
     * Update div, which contains order form
     */
    update : function() {
        if ($("varDetailForm") && $("vardetail-" + VariationSwitch.selected)) {
            var html = $("vardetail-" + VariationSwitch.selected).innerHTML;
            $("varDetailForm").down("div.varContent").update(html);

            VariationSwitch.bindForm();
        }

    },

    /**
     * Order form has a Direct-Order feature, so initialize observers
     * and listen on form submit button
     */
    bindForm : function() {

        if ($("varDetailForm").down("form.BasketForm")) {
            
            var form = $("varDetailForm").down("form.BasketForm");

            Event.observe(form,'submit', function (e) {

                Event.stop(e);

                var inputs = $(this).getInputs();

                new Ajax.Request('/xhr/basket.php', {
                    parameters : Form.serializeElements(inputs),
                    method     :"post",
                    onComplete : function() {

                        new Ajax.Updater('BasketSummary','/xhr/basket.php',{
                            method     :'post',
                            parameters : {bact: 'bskupdate'}
                        });

                        $('BasketSummary').setStyle({ backgroundColor: null });
                    },
                    onSuccess : function (transport) {
                        try {
                            Modalbox.show(transport.responseText,{
                                width       :350,
                                closedelay  :2.5,
                                closeString : $('fastOrderClose').innerHTML
                            });
                        } catch (e) {
                            alert(e.getMessage());
                        }
                    }
                });
            });
        }
    }
};

Helper = {
    getPageSize: function() {
            
         var xScroll, yScroll;

        if (window.innerHeight && window.scrollMaxY) {  
            xScroll = window.innerWidth + window.scrollMaxX;
            yScroll = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight){
            // all but Explorer Mac
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else {
            // Explorer Mac...would also work in Explorer 6 Strict,
            // Mozilla and Safari
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }

        var windowWidth, windowHeight;

        if (self.innerHeight) {
            // all except Explorer
            if(document.documentElement.clientWidth){
                windowWidth = document.documentElement.clientWidth; 
            } else {
                windowWidth = self.innerWidth;
            }
            windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer
            // 6 Strict Mode
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else if (document.body) { // other Explorers
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }

        // for small pages with total height less then height of the viewport
        if(yScroll < windowHeight){
            pageHeight = windowHeight;
        } else { 
            pageHeight = yScroll;
        }

        // for small pages with total width less then width of the viewport
        if(xScroll < windowWidth){
            pageWidth = xScroll;
        } else {
            pageWidth = windowWidth;
        }

        return [pageWidth,pageHeight];
    }
};
-->