Event.observe(window,'load',function(){
  
  ClickClear.init()
});

var Email = {
  submit: function(){
    new Ajax.Request('/add_email',{parameters:{address:$F('mailing_list_input')}, onComplete:function(r){
      alert(r.responseText)
    }});
  }
}


var Pic = {
	on:true, 
	infoOn: function(id){
		$('item_'+id).addClassName('over');
	},
	infoOff: function(id){
		$('item_'+id).removeClassName('over');
	},
	toggleBoxes: function(el){
		this.on = !this.on;
		el.update(this.on ? "HIDE BOXES" : "SHOW BOXES");
		$$(".ss_item_picture").invoke('toggleClassName',"ss_item_picture_on");
	},
	toggleBox:function(id){
		var el = $('ip_'+id);
		if(this.on) el.toggleClassName('over');
		else el.toggle();
	}
}

Effect.SlideOffset = function(element) {
  element = $(element);
	var originalOffset = element.getStyle('background-position');

  var offset = originalOffset.split(' ').map(function(s){return parseInt(s)});
	var dims = element.getDimensions();

  var options = Object.extend({
  	duration:5
  }, arguments[1] || {});
	
	//var start = 
	var newStyle = "background-position:" + originalOffset;
	element.setStyle({backgroundPosition:"0px 0pt"});
  return element.morph(newStyle,options);
}


var ImageInfoBox = Class.create();
ImageInfoBox.prototype = {
	initialize: function(element){
		this.options = Object.extend({
				width:50,
				height:50,
	    	fixed:false,
				border:'2px dotted #f00',
				callback: Prototype.K,
				onmouseover: Prototype.K,
				onmouseout: Prototype.K
	    }, arguments[1] || {});
		
		this.element = $(element);
		this.element.makePositioned();
		this.borderSize = parseInt(this.options.border)*2;
		
		this.elementWidth = (this.element.down('img') || this.element).getWidth();
		this.elementHeight = (this.element.down('img') || this.element).getHeight();
		
		if(this.options.color) this.options.border = this.options.border.sub(/(#[a-f0-9]{3,6})/i,this.options.color);
		else this.options.color = this.options.border.match(/(#[a-f0-9]{3,6})/i)[0];
		if(this.options.width == "100%") this.options.width = this.elementWidth-this.borderSize; 
		if(this.options.height == "100%") this.options.height = this.elementHeight-this.borderSize;
		
		this.box = document.createElement('div');
		this.offset = this.options.offset || [this.options.top || 0, this.options.left || 0,this.options.width,this.options.height];
 		this.box.setStyle({	
			border:this.options.border, cursor:'move',
			position:'absolute', top:this.offset[0]+'px', left:this.offset[1]+'px', color:this.options.color,
			width:this.offset[2]+'px', height:this.offset[3]+'px'
		});
		
		if(this.options.text) this.box.update(this.options.text);
		this.box.onmouseover = this.options.onmouseover;
		this.box.onmouseout = this.options.onmouseout;
		
		this.element.appendChild(this.box);
		
		this.draggable = new Draggable(this.box,{boundary:[[0,0],[0,0]], onEnd:(function(){
				this.update();
			}).bind(this)
		});
		
		if(!this.options.fixed){
			this.handle = document.createElement('div');
			this.handle.setStyle({
				position:'absolute', bottom:0, right:0, cursor:'pointer',
				backgroundColor:(this.options.color || this.options.border), 
				width:'10px', height:'10px'
			});
			
			this.box.appendChild(this.handle);
			
			this.resizable = new Resizable(this.box,{
				handle:this.handle,
				bind:true,
				max:[0,0],
				onStart:(function(){}).bind(this),
				onEnd:(function(){
						this.update();
				}).bind(this)
			});
		}
		this.update(true);
	},
	update:function(init){
		var top = parseInt(this.box.getStyle('top'));
		var left = parseInt(this.box.getStyle('left'));
		var height = parseInt(this.box.getStyle('height'));
		var width = parseInt(this.box.getStyle('width'));
		this.offset = [top,left,width,height];
		
		this.draggable.options.boundary[1][0] = this.elementWidth - this.box.getWidth();
		this.draggable.options.boundary[1][1] = this.elementHeight - this.box.getHeight();
		try{
			this.resizable.options.max[0] = this.elementWidth - left - this.borderSize;
			this.resizable.options.max[1] = this.elementHeight - top - this.borderSize;
		}catch(e){}
		
		if(!init) setTimeout((function(){this.options.callback(this)}).bind(this),1);
	}
}

// utility:
function $T(el){
	return $(el).options[$(el).selectedIndex].text
}