/**
 * Example I:
 */
var ChainOnObjects = function(n){
    this.name = n;
    this.date = null;
    this.online = false;
};
ChainOnObjects.prototype.setDate = function(){
    this.date = new Date();
    return this;
};
ChainOnObjects.prototype.setOnline = function(){
    this.online = true;
    return this;
};



/**
 * Example II:
 */
var Chain_on_element = function(id){
    this.element = document.getElementById(id);
};
Chain_on_element.prototype = {
    // Method for styling a element
    style:function(p,v){
        this.element.style[p] = v;
        return this;
    },
    // Method for applying eventhandlers on a element
    on:function(fn,type){
        var el = this.element;
        if(el.attachEvent){
            el['e'+type+fn] = fn;
            el[type+fn] = function(){el['e'+type+fn](window.event);};
            el.attachEvent('on'+type,el[type+fn]);
        } else{
            el.addEventListener(type,fn,false);
        }
        return this;
    },
    // Method for applying inner HTML on a element
    inner:function(v){
        this.element.innerHTML = v;
        return this;
    }
};
// Attach the object on the window object so we can just type cEl('value') anywhere we want
var init_cEl = function(){
    window.cEl = function(){
        return new Chain_on_element(arguments);
    };
}();



/**
 * Example III:
 */
var Chain_on_elements = function(name){
    this.elements = document.getElementsByTagName(name);
};
Chain_on_elements.prototype = {
    // Loop method used to apply the same method on several elements
    forEach:function(fn){
        var i = this.elements.length;
        while(i--){
            fn.call(this, this.elements[i]);
        }
        return this;
    },
    // Method for styling elements
    style:function(p,v){
        this.forEach(function(el){
            el.style[p] = v;
        });
        return this;
    },
    // Method for applying inner HTML on elements
    inner:function(v){
        this.forEach(function(el){
            el.innerHTML = v;
        });
        return this;
    }
};
// Attach the object on the window object so we can just type cEls('value') anywhere we want
var init_cEls = function(){
    window.cEls = function(){
        return new Chain_on_elements(arguments);
    };
}();



/**
 * Functions triggering the different examples
 */
var example1 = function(){
    var Foo = new ChainOnObjects('Tux');
    Foo.setDate().setOnline();
    document.getElementById('example1').innerHTML = 'Object <b>' + Foo.name + '</b> now set with the date <b>' + Foo.date + '</b> and online status <b>' + Foo.online + '</b>.';
};

var example2 = function(){
    cEl('example2').style('color','olive').
              style('backgroundColor','orange').
              style('fontSize',32).
              on(function(){alert('Whooo ha! I got a event attached to me also!');},'click').
              inner('Now I\'m nice! Try to click me!');
};

var example3 = function(){
    cEls('li').style('color','olive').inner('Ohh.. New inner value!');
};