// class:           hOOmanTest
// version:         0.9
// dependencies:    mootools 1.2.3 core, 1.2.3 more (Drag.js)
// tested on:       FireFox 3, IE7, Safari 4 (beta), Opera 9.60
// last updated:    26/06/2009
// url:             http://fragged.org/
// author:          dimitar chrostoff <christoff@gmail.com>
// authorised use:  modify and use as you deem fit. any link back appreciated :)

var hOOmanTest = new Class({
    Implements: [Events,Options],
    initialize: function(el, options) {
        // set default options...
        this.setOptions($merge({
            messageHtml: "Prove you're human and drag the <strong>[what]</strong> below into the BOX<br clear='all'>",
            messageClass: "botMessage", // needed in css
            images: [{              // images to be dragged and their names
                name: "CUBES",
                src: "/images/captcha/cubes.png"
            },
            {
                name: "PAPER",
                src: "/images/captcha/news.png"
            },
            {
                name: "PLUS",
                src: "/images/captcha/plus.png"
            },
            {
                name: "CONE",
                src: "/images/captcha/cone.png"
            }],
            background: {
                url: "/images/captcha/nobots.gif",
                width: 289,
                height: 118
            },
            callback: $empty // a function to run after drop, args: human(bool), this(bound object instance)
        }, options));


        this.element = $(el); // the target element
        this.createTest();
    },
    createTest: function() {
        // figure out what to move first
        if (this.container)
            this.container.dispose();

        this.human = false;

        if (!this.element)
            return false;

        // need two that show
        this.mover = this.options.images.getRandom();
        this.dummy = this.options.images.erase(this.mover).getRandom();

        this.container = new Element("div", {
            styles: {
                background: "url("+this.options.background.url+") no-repeat",
                width: this.options.background.width,
                height: this.options.background.height
            }
        });

        this.instructions = new Element("div", {
            html: this.options.messageHtml.replace("[what]", this.mover.name)
        }).addClass(this.options.messageClass).inject(this.container);

        this.dropper = new Element("div", {
            "class": "dropper"
        }).inject(this.container);

		this.objects = new Element("div", {
			"class": "objects"
		}).inject(this.container);

        this.container.inject(this.element);

        var coords = this.container.getCoordinates();
        
        this.dummy.object = new Element("div", {
            styles: {
                background: "url("+this.dummy.src+") no-repeat"
			}
        }).inject(this.objects);
        


        this.mover.object = new Element("div", {
            styles: {
                background: "url("+this.mover.src+") no-repeat",
                cursor: "move"
            },
            html: "&nbsp;"
        }).inject(this.objects);

        
        if (Browser.Engine.trident)
            this.mover.object.setOpacity(1);
        else
            this.mover.object.fade(0,1);

		
		var coords = this.mover.object.getPosition($("mOOdalBox"));
		
        this.drag = this.mover.object.makeDraggable({
            droppables: [this.dropper],
            container: this.container,
            onDrop: function(el, droppable, event) {
                if (!droppable) {
                    this.options.callback.run(false, this);
                    return false;
                }

                droppable.adopt(new Asset.image(this.mover.src));
                
				
                
                this.human = true;
                this.mover.object.dispose();
                this.options.callback.run(true, this);
                this.fireEvent("passed");
            }.bind(this),
            onEnter: function(el, droppable) {
            }
        });
        
        var doFix = !false;
        if (Browser.Engine.trident && doFix)
        	this.mover.object.setPosition({
        		x: coords.x,
        		y: coords.y + 4
			});

    },
    passed: function() {
        this.fireEvent("passed");
    }

});