var addthis_pub				= 'beto.com',
	addthis_logo			= '',
	addthis_logo_background	= '10d6f9',
	addthis_logo_color		= 'fff',
	addthis_brand			= 'beto.com',
	addthis_options			= 'favorites, email, delicious, google, digg, reddit, facebook, live, more';

var Beto = {
	backgroundToBottom: function(){ this.up('div').style.backgroundPosition = 'left bottom'; },
	backgroundToTop:    function(){ this.up('div').style.backgroundPosition = 'left top';    },
	selectColor: function(value){
		var element = $('slider').down('.focus_img[data-color=' + value + ']');
		if (element){
			Beto.showImage(element);
		}
	},
	showImage: function(element){
		$('solid_image').style.backgroundImage = 'url('  + element.getAttribute('href') + ')';
	}
};

// todo
Beto.Gallery = Class.create({
	initialize: function(gallery, options){
		gallery = $(gallery);
		
		this.loadImage 	= CD3.ImageLoader();
		this.image		= gallery.down('.image_wrapper').down('img');
		this.container 	= gallery.down('.gal_center');
		this.list 		= gallery.down('ul');
		this.thumbs		= this.list.select('li');
		this.options	= Object.extend({
			changeHeight:	false,	
			width:		 	23,
			line:		 	6,
			previewAttr:	'data-src',
			viewAttr:		'href'
		}, options);
		
		this.list.setStyle({
			width:		this.thumbs.length * this.options.width + 'px',
			position:	'relative',
			left:		'0px'
		});
		
		this.imageLoaded = this.imageLoaded.bind(this);
		
		gallery.down('.controls')
			.delegate('.next', 		'click', this.gotoImage.bind(this, 'next', 'first'))
			.delegate('.previous',	'click', this.gotoImage.bind(this, 'previous', 'last'));
		this.list.delegate('a',		'click', this.clickImage.curry(this.selectImage.bind(this)));
	},
	clickImage: function(selectImage, e){
		e.stop();
		selectImage(this);
	},
	gotoImage: function(start, end, e){
		e.stop();
		var selected = this.list.down('a.selected');
	
		this.selectImage(((selected && selected.up('li')[start]('li')) || this.list.select('li')[end]()).down('a'));
	},
	selectColor: function(color){
		var a = this.list.down('a[data-color=' + color + ']');
		if (a) this.selectImage(a);
	},
	selectImage: function(thumb){
		this.setSelected(thumb);
		this.setLoading(true);
		this.setImageLoading(thumb);
		this.setLinkHref(thumb);
		this.setListPosition(thumb);
	},
	setSelected: function(thumb){
		this.list.select('.selected').invoke('removeClassName', 'selected');
		thumb.addClassName('selected');
	},
	setLoading: function(set){
		this.container.up('div')[set ? 'removeClassName' : 'addClassName']('loading');
	},
	setImageLoading: function(thumb){
		this.image.fade({
			duration:	 0.3,
			afterFinish: this.loadImage.curry(thumb.getAttribute(this.options.previewAttr), this.imageLoaded)
		});
	},
	setLinkHref: function(thumb){
		var link = this.image.up('a'),
			src  = thumb.getAttribute(this.options.viewAttr);
			
		link.href = src;
		link.setAttribute("data-src", src);
	},
	setListPosition: function(thumb){
		var thumbs	 = this.thumbs.length,
			position = this.thumbs.indexOf(thumb) || 0;
			position = position < this.options.line ? 0 : (position < thumbs - 1 ? position - 1 : thumbs - 2);
			
		this.list.morph('left: ' + ( -this.options.width * position ) + 'px');
	},
	imageLoaded: function(loader){
		this.image.src = loader.src;
		if (this.options.changeHeight){
			this.container.morph('height: ' + this.image.height + 'px;', {
				duration: 0.4,
				afterFinish: this.imageAppear.bind(this)
			});
		} else {
			this.imageAppear();
		}
	},
	imageAppear: function(){
		this.image.appear({
			duration: 0.4,
		    afterFinish: this.setLoading.bind(this, false)
		});
	}
});

CD3.Behaviors({
	'#slider': function(){
		this.style.width = this.select('li').inject(0, function(count, li){ return count + (li.clientWidth + 1); }) + 'px';
					
		if (this.getElementsByTagName('li').length < 4){
			$('button_left').style.visibility = 'hidden';
			$('button_right').style.visibility = 'hidden';
		} else {					
			new CD3.Slider(this, 'button_left', 'button_right',{ 
				scroll_by:	555,
				event:		'click'
			});
	
			$('button_left').setOpacity(0.2);
		}
		
		if (this.down('a[data-src]')){
			this.delegate('.focus_img', 'click', function(e){
				e.stop();
				Beto.showImage(this);
			});
		}
	},
	'input[type=text],textarea,input[type=submit]':{
		focus: Beto.backgroundToBottom,
		blur:  Beto.backgroundToTop
	},
	'#img_changers:click': {
		'a': function(e){
			e.stop();
			
			$$('#img_changers a').invoke('removeClassName', 'selected');
			
			this.addClassName('selected');
			
			var mainimage = $('mainimage');
		
			mainimage.style.background = 'url("' + this.href + '") no-repeat left top';
			mainimage.morph('height:' + this.down('img').getHeight() + 'px', {duration: 0.5});	
		}
	},
	'#products a.zoomer': {
		mouseenter: function(){
			if (!this.retrieve('thumb')){
				this.store('thumb', this.down('.big_product'));
			}
		
			this.retrieve('thumb').setStyle({
				position: 'absolute',
				display:  'block'
			});
		},
		mousemove: function(e){
			var pos = this.cumulativeOffset(),
				thumb = this.retrieve('thumb');
				
			if (thumb){
				thumb.setStyle({
					top:  e.pointerY() - 150 - pos.top  + 'px',
					left: e.pointerX() + 50  - pos.left + 'px'
				});
			}
		},
		mouseleave: function(){
			this.retrieve('thumb').hide();
		}
	},
	'select': [CD3.Select, {
		onChange: function(value){
			Beto.selectColor(value);
		}
	}],
	'#gadgets-bookmark': {
		mouseover:	function(){ addthis_open(this, '', location.href, 'beto.com');},
		mouseout:	function(){ addthis_close();  },
		click:		function(){ addthis_sendto(); }
	},
	// todo
	'#finish_obprod':{
		mouseover: function(){
			this.down('#dos_ob').style.display = 'block';
		},
		mouseout: function(){
			this.down('#dos_ob').style.display = 'none';
		}
	},
	// todo
	/*
	'#finish_ob:click': {
		'a.triple': function(){
			$$('#finish_ob a.triple').invoke('removeClassName', 'selected');
			this.addClassName('selected');
			
			var img = this.down('img');
			
			$('mainimage').setStyle({
				height:		img.getHeight() + 'px',
				background:	'url("' + img.src + '") no-repeat left top'
			});
		}
	},
	*/
	// todo
	'#gallery1,#gallery2': Beto.Gallery,
	// todo
	'#mainimage2': function(){
		var box = new CD3.Lightbox($$('a.thumb').concat($$('.thumbslist a')));
		
		[$('mainimage2').down('a'), $('mainimage3').down('a')].invoke('observe', 'click', function(e){
			e.stop();
			
			var href = this.getAttribute('data-src');
			box.activeImage = 0;
			box.images.find(function(a, i){
				if (a.getAttribute('data-src') == href) {
					box.activeImage = i;
					return true;
				}
				return false;
			});
			box.show(this);
		});
	}
});