var visualChains = new Class({      
	Implements: [Chain, Events, Log],
	
	started: false,
	
	complete: function(el) {
		if(!this.completed) {
			this.completed = true;
			this.fireEvent("chainready",el);
		}
	},
	
	isready: function() {
		return this.completed;
	},
	
	initialize: function(element)
	{
		this.element = element;
		this.visual = this.element.getElement('.visual');
		this.settings = new Object({});		
				
		/* check for title JSON this.settings */
		if(this.visual.getProperty('title')) {
			this.settings = JSON.decode(this.visual.getProperty('title'));
			this.visual.removeProperty('title');
		}
		this.image = this.settings.image;
		this.completed = false;		
		
		/* setup styles */
		if(this.settings.styles) {
			
			var default_styles = new Object({
				opacity: 0
			});
			
			var styles_obj = $merge(default_styles, this.settings.styles);
			
			this.visual.store('styles', styles_obj);
			this.visual.setStyles(styles_obj);
			
		}

		/* fx from attribute */
		if(this.settings.fx) {
			var default_fx = new Object({
				duration: 'normal',
				transition: 'quint:in:out',
				onComplete: function() {
					if(!this.callChain()) {
						this.complete();
					}
				}.bind(this)
			});
			
			var fx_obj = $merge(default_fx, this.settings.fx);
			
			var item_fx = new Fx.Morph(this.visual, fx_obj);
			this.visual.store('fx', item_fx);
		}
		/* morph from attribute */
		if(this.settings.morph) {
			var default_morph = new Object({
				opacity: 0
			});
			
			var morph_obj = $merge(default_morph, this.settings.morph);
			
			this.visual.store('morph', morph_obj);
		}
		
		
		/* slide from attribute */
		if(this.settings.slide) {
			var default_slide = new Object({
				mode: 'vertical',
				transition: 'quad:in:out',
				duration: 'normal',
				onComplete: function() {
					
					if(!this.callChain()) {
						this.complete();
					}
					
				}.bind(this)
			});
			
			var slide_obj = $merge(default_slide, this.settings.slide);
			
			var item_slide = new Fx.Slide(this.visual, slide_obj).hide().show().hide();
			this.visual.store('slide', item_slide);
								
		}
	},
	
	startup: function() {
		if(!this.started) {
			this.started = true;
			
			this.initVisual();
		}
	},
	
	stop: function() {
		this.clearChain();
	},
				
	initVisual: function() {
		this.chain(
			function () {
				seqImageLoader.addImage(this.image, this);
				
			},
			
			function (img) {
				if(this.settings.href) {
					
					var visual_link = new Element('a', {
						'href': this.settings.href,
						'target': '_self'
					});
										
					visual_link.adopt(img);
					this.visual.adopt(visual_link);
					
					
					if(this.visual.getParent('.item').getElement('.content_container')) {
						var fx_obj = new Object({
							duration: 'normal',
							transition: 'quint:in:out',
							link: 'cancel'
						});
						
						var visual_fx = new Fx.Tween(this.visual.getParent('.item').getElement('.content_container'), fx_obj);
						
						this.visual.addEvent('mouseover', function(e){
							e.stop();
							visual_fx.start('opacity','0');
						});
						
						this.visual.addEvent('mouseout', function(e){
							e.stop();
							visual_fx.start('opacity','1');
						});
					}
					
										
				}else if(this.settings.youtube) {
					
					var divider = new Element('div', {
						'class': 'divider'
					});
					
					this.visual.adopt(divider);
					var random = Math.floor(Math.random()*1100);
					var swfContainer = new Element('div', {
						'id': 'visual_'+random
					});
					
					this.visual.adopt(swfContainer);
					
					var flashvars = {};
					flashvars.youtubeurl = this.settings.youtube;
					flashvars.youtubeimg = this.settings.image;
					
					var params = {};
					params.allowfullscreen = "true";
					
					var attributes = {};
					
					swfobject.embedSWF(this.settings.site_url+"swf/toob_dark_770_490.swf", "visual_"+random, "770", "490", "9.0.0", this.settings.site_url+"swf/expressInstall.swf", flashvars, params, attributes);					
				}else {
					
					var divider = new Element('div', {
						'class': 'divider'
					});
					
					this.visual.adopt(divider);
					this.visual.adopt(img);
					
				}
				
				this.callChain();
				
			},
			
			function(){
				if((this.visual.retrieve('fx')) && (this.visual.retrieve('morph'))) {
					this.visual.retrieve('fx').start(this.visual.retrieve('morph'));
				}else {
					this.callChain();
				}
				
			},
			
			function() {
				if(this.visual.retrieve('slide')) {
					
					this.visual.retrieve('slide').slideIn();
				}else {
					this.callChain()
				}
				
			},
			
			function() {
				if((!this.visual.retrieve('fx')) && (!this.visual.retrieve('morph')) && (!this.visual.retrieve('slide'))) {
					
					if(!this.callChain()) {
						this.complete(this.element);
					}
				}
				
			}
		)
		this.callChain();
	}
});