/* Simple Accordion Script 
 * Requires Prototype and Script.aculo.us Libraries
 * By: Brian Crescimanno <brian.crescimanno@gmail.com>
 * http://briancrescimanno.com
 * This work is licensed under the Creative Commons Attribution-Share Alike 3.0
 * http://creativecommons.org/licenses/by-sa/3.0/us/
 */

if (typeof Effect == 'undefined')
  throw("You must have the script.aculo.us library to use this accordion");

var Accordion = Class.create({

    initialize: function(id, defaultExpandedCount) {
        if(!$(id)) throw("Attempted to initalize accordion with id: "+ id + " which was not found.");
        this.accordion = $(id);
        this.options = {
            toggleClass: "accordion-toggle",
            toggleActive: "accordion-toggle-active",
            contentClass: "accordion-content"
        }
        this.contents = this.accordion.select('div.'+this.options.contentClass);
        this.isAnimating = false;
        this.maxHeight = 0;
        this.current = defaultExpandedCount ? this.contents[defaultExpandedCount-1] : this.contents[0];
        this.toExpand = this.current;
        //this.checkMaxHeight();
	this.maxHeight = 368;
        this.initialHide();
        this.attachInitialMaxHeight();

        var clickHandler =  this.clickHandler.bindAsEventListener(this);
        this.accordion.observe('click', clickHandler);
    },

    checkMaxHeight: function() {
        for(var i=0; i<this.contents.length; i++) {
            if(this.contents[i].getHeight() > this.maxHeight) {
               this.maxHeight = this.contents[i].getHeight();
            }
        }
    },

    attachInitialMaxHeight: function() {
		this.current.previous('div.'+this.options.toggleClass).addClassName(this.options.toggleActive);
        if(this.current.getHeight() != this.maxHeight) this.current.setStyle({height: this.maxHeight+"px"});
    },

    clickHandler: function(e) {
        var el = e.element();
        if(el.hasClassName(this.options.toggleClass) && !this.isAnimating) {
		   this.toExpand = el.next('div.'+this.options.contentClass);
			if(this.current != this.toExpand){
				this.toExpand.show();
				this.animate();
			}
        }
    },

    initialHide: function(){
        for(var i=0; i<this.contents.length; i++){
            if(this.contents[i] != this.current) {
                this.contents[i].hide();
                this.contents[i].setStyle({height: 0});
            } else {
		this.contents[i].show();
		}
        }
    },

    animate: function() {
        var effects = new Array();
        var options = {
            sync: true,
            scaleFrom: 0,
            scaleContent: false,
            transition: Effect.Transitions.sinoidal,
            scaleMode: {
                originalHeight: this.maxHeight,
                originalWidth: this.accordion.getWidth()
            },
            scaleX: false,
            scaleY: true
        };

        effects.push(new Effect.Scale(this.toExpand, 100, options));

        options = {
            sync: true,
            scaleContent: false,
            transition: Effect.Transitions.sinoidal,
            scaleX: false,
            scaleY: true
        };

        effects.push(new Effect.Scale(this.current, 0, options));

        var myDuration = 0.35;

        new Effect.Parallel(effects, {
            duration: myDuration,
            fps: 35,
            queue: {
                position: 'end',
                scope: 'accordion'
            },
            beforeStart: function() {
                this.isAnimating = true;
                this.current.previous('div.'+this.options.toggleClass).removeClassName(this.options.toggleActive);
                this.toExpand.previous('div.'+this.options.toggleClass).addClassName(this.options.toggleActive);
            }.bind(this),
            afterFinish: function() {
                this.current.hide();
                this.toExpand.setStyle({ height: this.maxHeight+"px" });
                this.current = this.toExpand;
                this.isAnimating = false;
            }.bind(this)
        });
    }

});

var HoverImage  = Class.create();
HoverImage.prototype = {
        initialize: function(element){
                this.element = element;
                this.src = element.src;
                this.hover_src = this.src.substring(0, this.src.indexOf('.jpg')) + ' copia.jpg';
                this.element.observe('mouseover', this.toggle.bindAsEventListener(this));
                this.element.observe('mouseout', this.toggle.bindAsEventListener(this));
        },
        toggle: function() {
                if (this.src == this.element.src) {
                        this.element.src = this.hover_src;
                } else {
                        this.element.src = this.src;
                }
        }
}

function activateShoes() {
	$$('.selectable-shoe').each(function(img){
		img.observe('click', function(shoe) {
			var id = img.id.substring(5);
			var ids = { 0 : 10254, 1: 10251, 2: 10253, 3: 10252 };
			var parent = img.ancestors()[0];
			var index = parent.id.substring(18);
			var select = document.getElementsByName("edit[field_" + ids[index] + "]")[0];
			if (select != 'undefined') {
				var i = 0;
				for(;i < select.options.length; i++) {
					var option = select.options[i];
					if (option.value == id) {
						option.selected = true;
					}
				}
			}
		});
		new HoverImage(img);
	});
}


if($('test-accordion')){   
 accordion = new Accordion("test-accordion", 0);
    activateShoes(); 
}