// Input-Felder: Value ein- und ausblenden
var inputValueHash = new Hash();

function init_input_toggle() {
    if ($$('.toggle')) {
        $$('.toggle').each(function(feld) {
            inputValueHash.set(feld.id, feld.value);
            feld.observe('focus', inputFocus);
            feld.observe('blur', inputBlur);
        });
    }
}
function inputFocus(event) {
    var inputEl = event.element();
    if (inputEl.value == inputValueHash.get(inputEl.id)) {
        inputEl.value = '';
        inputEl.style.color = '#222';
    }
}
function inputBlur(event) {
    var inputEl = event.element();
    if (inputEl.value == '') {
        inputEl.value = inputValueHash.get(inputEl.id);
        inputEl.style.color = '#f00000';
    }
}

function toggleForms(event) {

    var elToShow = this.up().next('.togglebox');
    if (!(this.up().next().hasClassName('togglebox'))) {elToShow = false;}
    var elToHide = this.up(1).select('.togglebox');

    elToHide.each(function(hideme){
       if (hideme.style.display == 'none') {return false};
       new Effect.BlindUp(hideme, {duration: 0.5});
    });

    if (elToShow != false && elToShow.style.display == 'none') {
       new Effect.BlindDown(elToShow, {duration: 0.5});
    }
}

// target="_blank" per Javascript anfuegen
function externalLinks() {
  if (!document.getElementsByTagName) return;
      var anchors = document.getElementsByTagName("a");
      for (var i=0; i<anchors.length; i++) {
          var anchor = anchors[i];
          if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")
              anchor.target = "_blank";
      }
}


// Bestellformular Schritt 1 - wechsel zwischen Vorname und Firma
function firma() {
    var el = $('anrede');
    var i = el.selectedIndex;
    var elVal = el.options[i].value;
    var label = $('anrede_firma');

    if (elVal == 'Firma') {
        label.update('Firmenname:');
    } 
    else {
        label.update('Vorname:');
    }
} 



/*  ----------------------------------------------------------------------------------------------------------  */
/*      ibSlider
/*  ----------------------------------------------------------------------------------------------------------  */

var SlidingBox = Class.create({

    _offset: null,
    increments: 2,  // want to change default increments?

    // Don't like the CSS classnames? Change'em here...
    classNames : {
        slider          : 'slider',         //
        slideLeft       : 'slide-left',     //
        slideRight      : 'slide-right',    //
        slideContent    : 'slide-content'   //
    },

    initialize: function(sbox) {
        this.setSlidingContainer(sbox);                                         // calculate container sizes
        $$('.'+this.classNames.slideLeft).invoke('addClassName', 'inactive');   // hide left scroll links
    },

    setSlidingContainer: function(sbox) {
        // get all vars...
        var container = sbox.down('.'+this.classNames.slideContent);
        var itemCount = container.select('a').size();
        _offset = this.getScrollOffset(sbox); // get total width of child element
        var containerWidth = (_offset / increments) * itemCount;
        // ... and set container width
        container.setStyle({
            left: 0,
            width: (containerWidth + 10) + 'px' // +10 to prevent some irritating bugs
        });
        // now, bind event handler to the box
        sbox.observe('click', this.slideBoxEvents.bindAsEventListener(this));
    },

    // how many items to move at a time
    getIncrements: function(box) {
        var value = box.classNames().inspect(); // get all the applied classnames
        if (value.indexOf('move-') != -1) {
            inc = parseInt(value.split('-')[1]);
            return inc;
        } else {
            return this.increments;
        }
    },

    getScrollOffset: function(box) {
        if (!box.hasClassName(this.classNames.slider)) {
            box = box.up('.'+this.classNames.slider);
        }
        var con = box.down('.'+this.classNames.slideContent);
        var items = con.childElements('li'); // get children
        var obj = items.first();
        _offset = parseInt(obj.getWidth()) + parseInt(obj.getStyle('margin-right')) + parseInt(obj.getStyle('margin-left'));
        increments = this.getIncrements(box);
        return _offset * increments;
    },

    // figure out which element was clicked and say what happens next
    slideBoxEvents: function(event) {
        trigger = event.element();
        // ... this is a scroll trigger...
        if (trigger.match('.'+this.classNames.slideLeft) || trigger.match('.'+this.classNames.slideRight)) {
            this.horizontal_slider(trigger);
        // ... or nothing
        } else {
            return false;
        }
    },

    horizontal_slider: function(trigger) {
        var actual_position, max_position, scroll_target;
        // Slide right
        if (trigger.hasClassName(this.classNames.slideRight)) {
            scroll_target = trigger.previous().firstDescendant(); // container element to scroll
            scroll_offset = this.getScrollOffset(trigger);
            var maskSize = parseInt(scroll_target.up().getWidth());
            actual_position = (Math.abs(parseFloat(scroll_target.style.left)));
            max_position = parseInt(scroll_target.getStyle('width')) - actual_position - 10; // stop scrolling at this point // -10 due to that irritating bug 
            var lastMargin = parseInt(scroll_target.firstDescendant().getStyle('margin-right'));
            // scroll inner element and stop at max value
            if (max_position > maskSize) {
                new Effect.Move(scroll_target, {
                    x: -(scroll_offset),
                    y: 0,
                    mode: 'relative',
                    queue: {position: 'end', scope: 'anims', limit: 1}
                });
                max_position = max_position - scroll_offset - lastMargin;
            }
            // toggle triggers inactive-state
            if (max_position <= maskSize) {
                trigger.addClassName('inactive');
            }
            triggerLeft = trigger.previous(1);
            triggerLeft.removeClassName('inactive');
        // Slide left
        } else if (trigger.hasClassName(this.classNames.slideLeft)) {
            scroll_target = trigger.next().firstDescendant(); // inner element to scroll
            actual_position = scroll_target.getStyle('left');
            // scroll inner element and stop at max value
            if (actual_position != '0px') {
                new Effect.Move(scroll_target, {
                    x: scroll_offset,
                    y: 0,
                    mode: 'relative',
                    queue: {position: 'end', scope: 'anims', limit: 1}
                });
            }
            // toggle triggers inactive-state
            actual_position = parseInt(scroll_target.getStyle('left')) + (scroll_offset);
            if (actual_position >= 0) {
                trigger.addClassName('inactive');
            }
            var triggerRight = trigger.next(1);
            triggerRight.removeClassName('inactive');
        }
    }
});


/*  ----------------------------------------------------------------------------------------------------------  */


function bookmark(URL, Title)
{
    if (window.sidebar)
    {
        // firefox
        window.sidebar.addPanel(Title, URL, "");
    }
    else if(window.opera && window.print)
    {
        // opera
        var elem = document.createElement('a');
        elem.setAttribute('href', URL);
        elem.setAttribute('title', Title);
        elem.setAttribute('rel', 'sidebar');
        elem.click();
    }
    else if(document.all)
    {
        // ie
        window.external.AddFavorite(URL, Title);
    }
}


function init() {
    // Input Field Value toggle
    init_input_toggle()

    // External Links
    externalLinks();

    // Product Slider
    if ($$('.slider').size() >= 1) {
        $$('.slider').each(function(box) {
            new SlidingBox(box);
        });
    }
    // abo form
    if ($$('.field .togglebox').length >= 1) {
        $$('.field li > input[type=radio]').each(function(radiobtn) {
            if (radiobtn.checked == false && radiobtn.up().next().hasClassName('togglebox')) {
                radiobtn.up().next().hide();
            }
        });
        if (!Prototype.Browser.IE) {
            $$('.field input[type=radio]').invoke('observe', 'change', toggleForms);
        } else {
            $$('.field input[type=radio]').invoke('observe', 'click', toggleForms);
        }
    }

}

// Initialisierung nach Event DOMContentLoaded
document.observe("dom:loaded", init);