/**
 * 
 */

var Item = Class.create({
    initialize: function(element, index, img, src, altSrc)
    {
        this.flipped = false;
        this.element = element;
        this.index = index;
        this.img = img;
        this.src = src;
        this.altSrc = altSrc;
    },
    isFlipped: function()
    {
        return this.flipped;
    },
    setFlipped: function(flipped)
    {
        this.flipped = flipped;
    },
    getAltSrc: function()
    {
        return this.altSrc;
    },
    getElement: function()
    {
        return this.element;
    },
    getImg: function()
    {
        return this.img;
    },
    getIndex: function()
    {
        return this.index;
    },
    getSrc: function()
    {
        return this.src;
    }
});

var Main = Class.create({
    initialize: function()
    {
    	this.hideInitial();
    	this.items = this.loadItems();
        this.isClicked = false;
    	this.items.each(function(item, index) {
    		$(item.getElement()).on('mouseover', this.mouseOverListener.bind(this));
    		$(item.getElement()).on('mouseout', this.mouseOutListener.bind(this));
            if ($(item.getElement()).hasClassName('clicked')) {
                this.items[index].setFlipped(true);
                this.isClicked = index;
            }
    	}, this);
        this.switchAllImgs();
        this.descriptions = $('mainframe').select('div.description');
    	//document.on('click', this.clickListener.bind(this));
    },
    loadItems: function()
    {
        var items = new Array();
        var itemElements = $('mainframe').select('ul li.item');
    	var altImgs = $('mainframe').select('div.hidden img.alt-img');
    	var itemImgs = $('mainframe').select('ul li.item a img.item-img');
        itemElements.each(function(itemElement, index) {
            items.push(
                new Item(
                    itemElement,
                    index,
                    itemImgs[index],
                    itemImgs[index].readAttribute('src'),
                    altImgs[index].readAttribute('src')
                )
            );
        });
        return items;
    },
    switchAllImgs: function()
    {
    	this.items.each(function(item, index) {
    		this.switchImg(index);
    	}, this);
    },
    switchImg: function(index)
    {
    	if (this.items[index].isFlipped()) {
            $(this.items[index].getImg()).writeAttribute('src', this.items[index].getSrc());
            this.items[index].setFlipped(false);
        } else {
            $(this.items[index].getImg()).writeAttribute('src', this.items[index].getAltSrc());
            this.items[index].setFlipped(true);
        }
    },
    hideInitial: function()
    {
    	var toHideElements = $('mainframe').select('.to-hide');
    	toHideElements.each(function(item, index) {
    		item.hide();
    	});
    },
    clickListener: function(event)
    {
    	var element = Event.findElement(event, 'li.item');
		if (!Object.isElement(element)) {
	    	var element = Event.findElement(event, 'div.description');
		}
    	this.items.each(function(item, index) {
            // An item is clicked
    		if (element == item.getElement()
    		    || element == this.descriptions[index]) {
    			if (this.isClicked !== false
                    && this.isClicked !== index) {
    				this.switchImg(this.isClicked);
                    if (item.isFlipped()) {
    				    this.switchImg(index);
                    }
    			}
    			this.isClicked = index;
    			$(this.items[index].getElement()).addClassName('clicked');
    			this.descriptions[index].show();
    			this.descriptions[index].addClassName('clicked');
            // Elsewhere is clicked
    		} else {
        		$(this.items[index].getElement()).removeClassName('clicked');
    			this.descriptions[index].hide();
        		this.descriptions[index].removeClassName('clicked');
    		}
    	}, this);
    	if (!Object.isElement(element)) {
    		if (this.isClicked !== false) {
    			this.switchImg(this.isClicked);
    		}
        	this.isClicked = false;
    	}
    },
    mouseOutListener: function(event)
    {
    	var element = Event.findElement(event, 'li.item');
    	if (Object.isElement(element)) {
        	this.items.each(function(item, index) {
        		if (element == item.getElement()) {
                    /*
        			if (this.isClicked === false) {
        			    this.descriptions[index].hide();
        			}
        			*/
        			if (this.isClicked === false
                        || this.isClicked !== index) {
		                this.switchImg(index);
                    }
        			//this.descriptions[index].removeClassName('mouse-over');
        		}
        	}, this);
        	element.removeClassName('mouse-over');
    	}
    },
    mouseOverListener: function(event)
    {
    	var element = Event.findElement(event, 'li.item');
    	if (Object.isElement(element)) {
            this.items.each(function(item, index) {
                if (element == item.getElement()) {
                    /*
                    if (this.isClicked === false) {
                        this.descriptions[index].show();
                        this.descriptions[index].addClassName('mouse-over');
                    }
                    */
                    if (this.isClicked === false
                        || this.isClicked !== index) {
                        this.switchImg(index);
                    }
                }
            }, this);
	    	element.addClassName('mouse-over');
    	}
    }
});

document.on('dom:loaded', function() {
	var main = new Main();
});