/*
    Gallery
    
    HTML: 
    <div class="gallery">
        <div class="gallerySlide">
            <a class="slide slide-rwd inactive"></a>
            <ul>
                <li>...</li>
            </ul>
            <a class="slide slide-fwd"></a>
        </div>
    </div>
    
    Beide a-tags können per onmouseover oder onclick 
    "return slideGallery(Optionen);" mitbekommen.
    
    Bei onmouseover muss nur this übergeben werden.
    Bei onclick muss man zusätzlich noch die Anzahl der
    Elemente, um die weitergeschaltet werden soll und optional
    noch true angeben, sofern die Bewegung flüssig erfolgen 
    soll.
*/

Function.prototype.bind = function() {
  var __method = this, args = $A(arguments), object = args.shift();
  return function() {
    return __method.apply(object, args.concat($A(arguments)));
  }
}

Function.prototype.bindAsEventListener = function(object) {
  var __method = this;
  return function(event) {
    return __method.call(object, event || window.event);
  }
}

var $A = Array.from = function(iterable) {
  if (!iterable) return [];
  if (iterable.toArray) {
    return iterable.toArray();
  } else {
    var results = [];
    for (var i = 0; i < iterable.length; i++)
      results.push(iterable[i]);
    return results;
  }
}

function getStyle(el, property) {
    var style = window.getComputedStyle
              ? window.getComputedStyle(el, '')
              : el.currentStyle;
    if (!style) { return; }
    return style[property];
}

function hasClass(className, el) {
    var classes = el.className.split(/\s+/);
    for (var i=0; i<classes.length; i++) {
        if (classes[i] === className) { return true; }
    }
    return false;
}

function addClass(className, el) {
    if (!hasClass(className, el)) {
        el.className += ' '+className;
    }
}

function removeClass(className, el) {
    var re = new RegExp('(^|\\s)'+className+'(\\s|$)', 'g');
    el.className = el.className.replace(re, ' ');
}

function slideGallery(obj, amount, swift) {
    var root = obj.parentNode; // Should go up to a "gallerySlide"-element
    if (root.slider) {
        root.slider.setAmount(obj, amount);
        root.slider.slide(amount);
        return false;
    }
    root.slider = new Slider(root, obj, amount, swift);
    root.slider.slide(amount);
    return false;
}

function Slider(root, caller, amount, swift) {
    this.root = root;
    this.swift = swift;
    this.list = root.parentNode.getElementsByTagName('ul')[0];
    for (var i=0; i<root.childNodes.length; i++) {
        var item = root.childNodes.item(i);
        if (item.nodeName && item.nodeName.toLowerCase() == 'a') {
            if (hasClass('slide-rwd', item)) { this.sliderRwd = item; }
            if (hasClass('slide-fwd', item)) { this.sliderFwd = item; }
        }
    }
    var item = this.list.getElementsByTagName('li')[0];
    this.itemWidth = item.offsetWidth + parseInt(getStyle(item, 'marginLeft'), 10) + parseInt(getStyle(item, 'marginRight'), 10);
    this.listWidth = this.itemWidth * this.list.getElementsByTagName('li').length;
    this.setAmount(caller, amount);   
}
Slider.prototype.setAmount = function(caller, amount) {
    if (amount) {
        caller.onclick = function() { return this.slide(amount); }.bind(this);
    } else {
        this.sliderRwd.onclick = function() { return false; }
        this.sliderRwd.onmouseover = function() { this.interval = this.startslide(-1); }.bind(this);
        this.sliderRwd.onmouseout = function() { this.stopslide(this.interval); }.bind(this);
        this.sliderFwd.onclick = function() { return false; }
        this.sliderFwd.onmouseover = function() { this.interval = this.startslide(1); }.bind(this);
        this.sliderFwd.onmouseout = function() { this.stopslide(this.interval); }.bind(this);
        this.interval = this.startslide((caller == this.sliderRwd ? -1 : 1));        
    }
    if (!caller.blur) { caller.blur = function() { return false; }; }
}
Slider.prototype.slide = function(amount) {
    if (!amount) { return false; }
    var pos = parseInt(getStyle(this.list, 'marginLeft'), 10);
    var oldpos = pos;
    pos = pos-this.itemWidth*amount;
    //document.forms[0].inpUsername.value = '('+pos+') ';
    if (pos <= -(this.listWidth - this.itemWidth*amount)) {
        pos  = -(this.listWidth - this.itemWidth*amount);
        addClass('inactive', this.sliderFwd);
    } else if (this.listWidth > -this.itemWidth*amount) {
        removeClass('inactive', this.sliderFwd);
    }
    if (pos >= 0) {
        pos  = 0;
        addClass('inactive', this.sliderRwd);
    } else {
        removeClass('inactive', this.sliderRwd);
    } 
    //document.forms[0].inpPassword.value = '('+pos+') ';
    //document.forms[0].inpUsername.value = this.sliderRwd.className;
    //document.forms[0].inpPassword.value = this.sliderFwd.className;
    if (!this.swift) {
        if (this.list && this.list.style) { this.list.style.marginLeft = pos+'px'; }
    } else if (oldpos != pos) {        
        var obj = this.list;
        var steps = 12;
        var freq = 30;
        var step = parseInt((pos - oldpos) / steps, 10);
        var s = 0;
        var interval = window.setInterval(function() {
            oldpos += step;
            s++;
            if (s >= steps) {
                obj.style.marginLeft = pos+'px';
                window.clearInterval(interval);
            } else {
                obj.style.marginLeft = oldpos+'px';
            }
        }, freq);
    }
    this.sliderRwd.blur();
    this.sliderFwd.blur();
    return false;
}

Slider.prototype.startslide = function(step) {
    var step = step * 15;
    var obj = this.list;
    var freq = 28;
    var list = this.list;
    var fwd = this.sliderFwd;
    var rwd = this.sliderRwd;
    var items = this.list.getElementsByTagName('li')    
    var max = this.listWidth - this.list.parentNode.offsetWidth - parseInt(getStyle(items[items.length-1], 'marginRight'), 10);
    var interval = window.setInterval(function() {
        var pos = parseInt(getStyle(list, 'marginLeft'), 10) - step;
        //document.forms[0].inpUsername.value = '('+pos+') ';
        if (pos <= -max) {
            pos  = -max;
            if (!hasClass('inactive', fwd)) { addClass('inactive', fwd); }
            window.clearInterval(interval);
        } else {
            if (hasClass('inactive', fwd)) { removeClass('inactive', fwd); }
        }
        if (pos >= 0) {
            pos  = 0;
            if (!hasClass('inactive', rwd)) { addClass('inactive', rwd); }
            window.clearInterval(interval);
        } else {
            if (hasClass('inactive', rwd)) { removeClass('inactive', rwd); }
        }
        obj.style.marginLeft = pos+'px';
    }, freq);
    return interval;
}

Slider.prototype.stopslide = function(interval) {
    window.clearInterval(interval);
}