var ImageScrOOler = new Class({
    Implements: [Options, Events],
    moveDirection: "right",
    moveOffset: 0,
    options: {
        // set defaults here
        targetElement: $empty,  // you NEED the target element to be an object
        imagePath: "",          // prefix images with this
        imageSpacing: 10,       // margin between scrolling images
        imageOpacity: .8,
        clickEvent: function(clickObj) {
            window.location.href = escape(clickObj.url);
        },     // this can open a url or call
        moveDelay: 16,          // animation delay between frames, in ms
        moveSteps: 1,           // move by number of pixels
        imageHeight: 70,        // default image height
        imageWidth: 0,        // default image width
        showProgress: true,     // show a 'status' like layer
        defaultMessage: 'Click on the images below',
        showMessage: ' Show me items from ',
        imageClass: 'cur',      // css class to apply to each image, for example, with cursor: pointer
        EOL: 1000,              // delay after eaching END-OF-LINE in ms
        carousel: !true         // if true, it just recycles images and no EOL is reached, works left to right.
    },
    initialize: function(data, options) {

        this.setOptions(options);

        if ($type(this.options.targetElement) != "element")
            return false;

        if(!data.length)
            return false;

        this.data = data;
        this.options.targetElement.empty();

        // setup our elements
        if (this.options.showProgress) // progress / mouseover status element, style #moostats via css
            this.stats = new Element("span", {id: 'moostats', html: "Initialising..."}).inject(this.options.targetElement);

        // containing titles layer
        this.container = new Element("div", {
            styles: {
                overflow: "hidden",
                height: this.options.imageHeight,
                visibility: "hidden",
                width: this.options.targetElement.getSize().x,
                float: "left"
            }
        }).inject(this.options.targetElement);

        this.subcontainer = new Element("div", {
            styles: {
                overflow: "hidden",
                height: this.options.imageHeight,
                visibility: "hidden",
                width: this.options.targetElement.getSize().x,
                "white-space": "nowrap"
            }
        }).inject(this.container);

        // load images and start moving.
        this.loadAssets();

        // prepare containers and make visible
        this.container.setStyles({
            visibility: "visible",
            opacity: 0.1
        }).fade(0,1);

        this.subcontainer.addEvents({
            mouseleave: function() {
                //this.move();
            }.bind(this),
            mouseenter: function() {
                this.stop();
            }.bind(this)
        }).setStyle("visibility", "visible");

        if (this.options.showProgress)
            this.stats.set("html", this.options.defaultMessage);
        // get going!
        this.stop(); // clear up reload issues
        this.subcontainer.scrollTo(0,0);
        //this.move();
    },
    loadAssets: function() {
        // injects images into our containers.
        var _this = this; // can't bind this for the images onload so save a ref.

        this.subcontainer.empty();
        // loop array
        this.data.each(function(el, i) {
        		var mylink = new Element('a',{'href':el.url,'rel':el.rel,'title':el.title});
            var myimg = new Asset.image(_this.options.imagePath + el.image, {
                title: el.title,
                "class": "mOOimage",
                "border": "0",
                //"rel": el.rel,
                onload: function() {
                    if (i < _this.data.length)
                        this.setStyle("margin-right", _this.options.imageSpacing);

                    // add css settings to images here or change / force height.
                    this.set({
                        styles: {
                            height: _this.options.imageHeight,
                            width: _this.options.imageWidth
                        },
                        opacity: _this.options.imageOpacity
                    }).addClass(_this.options.imageClass);

                    
                }
            });
            
            _this.addImageEvents(myimg);
            myimg.inject(mylink);
            mylink.inject(_this.subcontainer);

            if (_this.options.showProgress) {
                // output how many loaded
                if (i < _this.data.length)
                    _this.stats.set("html", i + ' loaded...');
            }
           
            
           
        }); // each

        this.subcontainer.scrollTo(0,0);
    },
    addImageEvents: function(img) {
        return img.set({
            events: {
            		
                mouseenter: function() {
                    if (this.options.showProgress && img.get("title") != null)
                        this.stats.set("html", " <span style='color:#666'>" + img.get("title") + "</span>");
                    img.set("opacity", 1);
                }.bind(this),
                mouseleave: function() {
                    if (this.options.showProgress)
                        this.stats.set("html", this.options.defaultMessage);
                    img.set("opacity", this.options.imageOpacity);
                }.bind(this)
            }
        });
    },
    getSize: function() {
        // based on mootools 1.11 getSize, gets the subcontainer size and scroll data
        this.subSize = {
            'scroll': {'x': this.subcontainer.scrollLeft, 'y': this.subcontainer.scrollTop},
            'size': {'x': this.subcontainer.offsetWidth, 'y': this.subcontainer.offsetHeight},
            'scrollSize': {'x': this.subcontainer.scrollWidth, 'y': this.subcontainer.scrollHeight}
        };
    },
    frame: function() {
        // move one frame in whatever direction and handle stop/turn around.
        if (this.moveDirection == "right") {
            this.getSize();
            this.subcontainer.scrollTo(this.subSize.scroll.x+this.options.moveSteps, 0); // number of pixels

            if (this.options.carousel) 
            {
            	var first = this.subcontainer.getElements("img.mOOimage")[0];
              if (first) 
              {
              	var firstWidth = first.getStyle("width").toInt() + this.options.imageSpacing;
              	if (this.subSize.scroll.x >= firstWidth + this.moveOffset) 
              	{
              		this.moveOffset += firstWidth;
              		this.addImageEvents(first.clone()).inject(this.subcontainer); 
              		first.removeEvents().removeClass("mOOimage").setOpacity(0.1);
              	}
              }
              return false;
            }
              	
            
            
            this.getSize();
            if (this.subSize.size.x + this.subSize.scroll.x >= this.subSize.scrollSize.x && this.subSize.scroll.x > 0) {
               
            }


        }
        else {
            this.getSize();
            this.subcontainer.scrollTo(this.subSize.scroll.x-this.options.moveSteps, 0); // move nn pixels

            this.getSize();
            if (this.subSize.scroll.x <= 0) {
                
            };
        }
    },
    move: function() {
        // drives moving
        this.stop();
        this.moveTimer = (function() {
            this.frame();
        }).periodical(this.options.moveDelay, this);
    },
    stop: function() {
        // stop moving.
        $clear(this.moveTimer);
    },
    turn: function() {
        // swap direction
        this.moveDirection = (this.moveDirection == "right") ? "left" : "right";
        this.subcontainer.getElements("img").filter(function(el) {
            return !el.hasClass("mOOimage"); // remove ghost images
        }).dispose();
    }
});