/**
 * Ajax.Request.abort
 * extend the prototype.js Ajax.Request object so that it supports an abort method
 */
Ajax.Request.prototype.abort = function() {
    // prevent and state change callbacks from being issued
    this.transport.onreadystatechange = Prototype.emptyFunction;
    // abort the XHR
    this.transport.abort();
    // update the request counter
    Ajax.activeRequestCount--;
};

/**
 * Concept Creative for Magento
 * 
 * This is the javascript source file for the better checkout.
 *
 * @author     Roy Klopper <roy.klopper@concept-creative.com>
 * @copyright  Copyright (c) 2010 Concept Creative (http://www.concept-creative.com)
 */
var Cc = {};


/**
 * Concept Creative Toggler class
 * 
 * This class enables the use of toggling several boxes with a simple radio input
 *
 * @author     Roy Klopper <roy.klopper@concept-creative.com>
 * @copyright  Copyright (c) 2010 Concept Creative (http://www.concept-creative.com)
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 * @version    0.1.0
 */
Cc.Toggler = Class.create({
	
	initialize: function()
	{
		this.elements = [];
		
		$$('.toggler').each(this.attach.bind(this));
		
	},
	
	attach: function(element) {

		if (element.tagName.toLowerCase() == 'select')
        {
            Event.observe(element, 'blur', this.click.bindAsEventListener(this, element));
        }
        else if (element.type.toLowerCase() == 'radio' || element.type.toLowerCase() == 'checkbox' || element.tagName.toLowerCase() == 'a')
        {
            Event.observe(element, 'click', this.click.bindAsEventListener(this, element));
        }
        else
        {
            Event.observe(element, 'change', this.click.bindAsEventListener(this, element));
        }
		
		var key = element.name || element.rel;
		
		if(this.elements[key] == undefined)
		{
			this.elements[key] = [];
		}
		
		this.elements[key].push(element);
	},
	
	click: function(e, toggler)
	{
		if(toggler.tagName.toLowerCase() == 'a')
		{
			e.stop();
		}
		
		var key = toggler.name || toggler.rel;

		if(toggler.hasClassName('toggle-title'))
		{
			var target = toggler.title;
			var display = parseInt(toggler.value);
			
			var box = $('box-' + target);
			
			if(display > 0)
			{
				box.setStyle({'display': 'none'});
			}
			else
			{
				box.setStyle({'display': 'block'});
			}
		}
		else
		{
			if (toggler.type.toLowerCase() == 'checkbox')
			{
				var target = toggler.id;
			}
			else
			{
				var target = toggler.value || toggler.id;
			}
		
			this.elements[key].each(function(element){
			
				if (toggler.type.toLowerCase() == 'checkbox')
				{
					var value = element.id;
				}
				else
				{
					var value = element.value || element.id;
				}
				
				var box = $('box-' + value);

				if(value === target)
				{
					if(toggler.tagName.toLowerCase() === 'a' || toggler.type.toLowerCase() == 'checkbox')
					{
						var current = box.getStyle('display');
						
						if(current === 'none')
						{
							box.setStyle({'display': 'block'});
						}
						else
						{
							box.setStyle({'display': 'none'});
						}
					}
					else
					{
						box.setStyle({'display': 'block'});
					}
				}
				else
				{
					box.setStyle({'display': 'none'});
				}
				
			}, this);
		}
	}
	
});

document.observe('dom:loaded', function(e){
	new Cc.Toggler();
});

Cc.AjaxForm = Class.create({
	
	initialize: function(form)
	{
		this.form = $(form);
		this.validator = new Validation(this.form,{
		    onSubmit : true,
		    immediate : true,
		    focusOnError : true
		});
		
		this.form.observe('submit', this.save.bindAsEventListener(this));
	},
	
	save: function(e)
	{
		e.stop();
		if(this.validator.validate())
		{
			new Ajax.Updater(this.form.up(), this.form.action, {
	            parameters: this.form.serialize(true),
	            evalScripts: true,
	            method: 'post'
	        });
		}
	}
});

Cc.Overlay = Class.create({
	
	styles: {
	    'position': 'fixed',
	    'top': 0,
	    'opacity': 0,
	    'display': 'none',
	    'left': 0,
	    'width': '100%',
	    'height': '100%',
	    'zIndex': 9998
	},
	
	ieStyles: {
	    'position': 'absolute',
	    'display': 'none',
	    'top': 0,
	    'left': 0,
	    'zIndex': 9998
	},
	
	initialize: function()
	{
		this.container = new Element('div', {
			'id': 'conceptcreative-overlay'
		});
		
		$(document.body).insert(this.container);
		
		if(Prototype.Browser.IE)
		{
			this.container.setStyle(this.ieStyles);
	    }
		else
	    {
			this.container.setStyle(this.styles);
		}
		
		Event.observe(window, 'scroll', this.position.bind(this));
        Event.observe(window, 'resize', this.position.bind(this));
	},
	
	show: function()
	{
		this.container.show();
		
		new Effect.Opacity(this.container, { to: 0.6, duration: 0.5 });
	},
	
	hide: function()
	{
		Event.stopObserving(window,'resize', this.position.bind(this));
        Event.stopObserving(window,'resize', this.position.bind(this));
        
        this.container.hide();
	},
	
	position: function(){
        this.container.setStyle({
            width: document.body.clientWidth + 'px',
            height: document.body.clientHeight + 'px'
        });
    }
	
});

Cc.Modal = Class.create({
	
	styles: {
	    position: 'absolute',
	    width: '750px',
	    top: '25px',
	    left: '50%',
	    minHeight: '100px',
	    marginLeft: '-395px',
	    marginBottom: '10px',
	    padding: '20px',
	    zIndex: 10000
	},
	
	initialize: function()
	{
		this.overlay = new Cc.Overlay();
		
		this.container = new Element('div', {
			'id': 'conceptcreative-modal'
		});
		
		this.wrapper = new Element('div', {
			'id': 'conceptcreative-modal-wrapper'
		});
		
		this.close = new Element('div', {
			'id': 'conceptcreative-modal-close'
		});
		
		this.container.insert(this.close)
					  .insert(this.wrapper)
					  .setStyle(this.styles)
					  .hide();
		
		$(document.body).insert(this.container);
	},
	
	show: function(element)
	{
		this.overlay.show();

		this.wrapper.update(element.innerHTML);
		
		this.position();
		
        Event.observe(window, 'scroll', this.position.bind(this));
        Event.observe(window, 'resize', this.position.bind(this));
        
        this.container.observe('click', this.hide.bind(this));
        this.overlay.container.observe('click', this.hide.bind(this));
        
        this.container.show();
        
        new Effect.ScrollTo(this.container);
	},
	
	hide: function()
	{
		this.overlay.hide();
		
		Event.stopObserving(window, 'resize', this.position.bind(this));
        Event.stopObserving(window, 'resize', this.position.bind(this));
        
        this.container.stopObserving('click', this.hide.bind(this));
        this.overlay.container.stopObserving('click', this.hide.bind(this));
        
		this.container.hide();
	},
	
	position: function()
	{
        Position.prepare();
        
        var top = (Position.deltaY + parseInt(this.styles.top));
        var height = parseInt(this.container.getStyle('height'));

        if((height + top) < document.body.clientHeight)
        {
        	if(this.morph)
        		this.morph.cancel();

	        this.morph = new Effect.Morph(this.container, {
	        	'style': 'top: ' + top + 'px;' 
	        });
        }
    }
});