var ImgInsert = new Class({
    Implements : [Options],
    options : {
        images  : {},
        limit   : 0, // limits the displayed images to the given int | 0 means all
        shuffle : false
        
    },
    initialize : function(container, options){
        this.setOptions(options);
        this.container = container;
        this.images = this.options.images;

        this.render();
    },
    // variables
    container : $empty(),
    images : $empty(),

    // functions
    render : function(){

        var _self = this;
        var cont = this.build.container();
        
        var count = 0;
        var limit = this.options.limit;

        if(this.options.shuffle){
            this.images.shuffle();
        }

        this.images.each(function(imgSrc){

            if(count < limit){

                var img = _self.build.img(imgSrc);
                //img.cords = cords;
                img.inject(cont);
               
                count++;
            }

        });

        cont.inject(this.container);

    },
    build : {
        img : function(src){

            var image = new Element('img', {'src' : src});

            return image;

        },
        container : function(){

            var container = new Element('div',{
                styles : {'position' : 'relative'}
            });

            return container
        }
    }

});

var ImgStack = new Class({
    //Implements : [ImgInsert],
    Extends : ImgInsert,
    options : {
        offset  : {
            init    : { x:10, y:10 }, // the initial value
            step    : { x:30, y:15 }  // steps in pixels / you can also use negative values
        },
        slide   : {
            support : true,
            width   : { x:30, y:15 } // for now it's only support for the x-axis'
        }
    },
    render : function(){

        // console.log(this.images.length);
        var _self = this;
        var cont = this.build.container();
        //
        // cord initial value
        // var cords = { x:20, y:20 };
        var cords = this.options.offset.init;
        var offsetStep = this.options.offset.step;

        var count = 0;
        var limit = this.options.limit;

        if(this.options.shuffle){
            this.images.shuffle();
        }

        this.images.each(function(imgSrc){

            if(count <= limit){

                var img = _self.build.img(imgSrc, cords, _self);
                //img.cords = cords;
                img.inject(cont);

                cords.x += offsetStep.x;
                cords.y += offsetStep.y;
                // cords.x += 40;
                //cords.y += 13;

                count++;
            }

        });

        cont.inject(this.container);

    },

    build : {
        img : function(src, cords, _self){

            var slideWidth = _self.options.slide.width.x;
            var image = new Element('img', {
                'src' : src,
                styles : {
                    position : 'absolute',
                    left : cords.x + 'px',
                    top : cords.y + 'px'
                },

                events : {
                    mouseenter : function(e){
                        //tween.start('left', this.style.left.toInt(), this.style.left.toInt() - slideValue);
                        (_self.options.slide.support) ? tween.start('left', this.cords.x, this.cords.x - slideWidth) : false;

                    },
                    mouseout : function(){
                        (_self.options.slide.support) ? tween.start('left', this.cords.x ) : false;//, this.cords.x + slideWidth);

                    },
                    click : function(){
                    //dbug.info(this.cords)
                    }
                }
            });

            image.cords = {
                x : cords.x,
                y : cords.y
            }

            if(_self.options.slide.support){
                var tween = new Fx.Tween(image, {
                    duration : 'short',
                    link : 'chain'

                });
            }

            return image;

        },
        container : function(){

            var container = new Element('div',{
                styles : {
                    'position' : 'relative'
                }
            });

            return container
        }
    }
});

Array.implement({
    shuffle:function() {
        this.sort(function (x,y) {
            return Math.floor(Math.random()*3)-1;
        });
        return this;
    }

});