var gfx = new Class({

	Implements: [Options],
	options: {},
	loaded: {},
	
	initialize: function(options) {
		this.setOptions(options);
		
		// PRELOAD ICON IMAGES
		// create object
		imageObj = new Image();
		// set image list
		images = new Array();
		images[0]="/content/site/images/gfx/expand";
		images[1]="/content/site/images/gfx/expand_hover";
		images[2]="/content/site/images/gfx/collapse";
		images[3]="/content/site/images/gfx/collapse_hover";
		// start preloading
		// counter
		var i = 0;
		for(i=0; i<=3; i++) 
		{
			// Half of these will probably 404 but we don't always know whether we're using GIF (animated) or PNG (alpha) in our CSS, so we try to load both.
			imageObj.src=images[i]+".gif";
			imageObj.src=images[i]+".png";
		}
		
		
		
		// GET THE FX CLASS AND LOAD REQUESTED FUNCTION BASED ON CLASS NAME
		$$('*[class^=gfx_]').each(function(item, index){
			var fx_class_name = null;
			var fx = null;
			var action = null;
			var id = null;
			var options = null;
			item.get('class').split(' ').each(function(class_name) {
				if(class_name.contains('gfx_')) {
					fx_class_name = class_name;
					fx_name = class_name.replace('gfx_', '');
					fx = fx_name.replace(/_.*$/, '');
					action = fx_name.replace(fx+'_', '');
				}
				if(class_name.contains('gfxid_')) {
					id = class_name;
				}
				if(class_name.contains('gfxoptions_')) {
					options = class_name.replace('gfxoptions_', '');
					options = JSON.decode(options);
				}
			});
			var unique_load_id = id+'_'+fx;
			if(action == 'toggle' && typeOf(this[fx])=='function' && this.loaded[unique_load_id] == null) {
				this.loaded[unique_load_id]==true;
				var settings = {
					'class_name':fx_class_name,
					'fx': fx,
					'action': action,
					'id': id,
					'options': options
				};
				this[fx](settings);
			}
		}.bind(this));
	},
	
	/*
	FX FUNCTIONS
	*/
	
	accordion: function(settings) {
		var els = this.get_togglers(settings);
		if(settings.options == null) {
			settings.options = {
				opacity: true,
				alwaysHide: true,
				onActive: function(toggle, expand) {
					if(settings.id != null) {
						var sibling_togglers = $$('.'+settings.id);
					} else {
						var sibling_togglers = $$('.gfx_'+settings.fx+'_toggle');
					}
					sibling_togglers.removeClass('gfx_toggle_active');
					toggle.addClass('gfx_toggle_active');
				},
				onBackground: function(toggle, expand) {
					toggle.removeClass('gfx_toggle_active');
				}
			};
		}
		// add toggle class
		els.toggler.each(function(item, index) {
			item.addClass('gfx_toggle');
			item.set('id', settings.fx+'_toggle_'+settings.id+'_'+index);
		});
		els.target.each(function(item, index) {
			item.set('id', settings.fx+'_target_'+settings.id+'_'+index);
		});
		new Fx.Accordion(els.toggler, els.target, settings.options);
	},
	
	
	reveal: function(settings) {
		if(settings.options == null) {
			settings.options = {}
		}
		var toggler = $$('.gfx_'+settings.fx+'_toggle');
		var target = $$('.gfx_'+settings.fx+'_target');
		var toggle_id = null;
		var target_id = null;
		toggler.each(function(item, index) {
			item.addClass('gfx_toggle');
			toggle_id = settings.fx+'_toggle_'+settings.id+'_'+index;
			item.set('id', toggle_id);
		});
		target.each(function(item, index) {
			target_id = settings.fx+'_target_'+settings.id+'_'+index;
			item.set('id', target_id);
		});
		$(toggle_id).addClass('gfx_toggle_active');
		$(toggle_id).addEvent('click', function(event) {
			new Fx.Reveal($(target_id), settings.options).toggle();
			$(toggle_id).toggleClass('gfx_toggle_active');
		});
	},
	
	
	
	/*
	SUPPORT FUNCTIONS
	*/
	
	get_togglers: function(settings) {
		if(settings.id != null) {
			var toggle_els = new Array();
			$$("."+settings.id).each(function(item) {
				if(item.hasClass('gfx_'+settings.fx+'_toggle')) {
					toggle_els.push(item);
				}
			});
			var toggler = $$(toggle_els);
			var target_els = new Array();
			$$("."+settings.id).each(function(item) {
				if(item.hasClass('gfx_'+settings.fx+'_target')) {
					target_els.push(item);
				}
			});
			var target = $$(target_els);
		} else {
			var toggler = $$('.gfx_'+settings.fx+'_toggle');
			var target = $$('.gfx_'+settings.fx+'_target');
		}
		
		return {'toggler': toggler, 'target': target};
	}
	

});