var Slide = Class.create();
Slide.prototype = {
	options: {},
	initialize: function(el) {
		
		 var opts = Object.extend({
	      display:               	"auto",
	      axis:          	"vertical",
	      loc:          		"RIGHT",
	      locOffSet:			0, 
	      slideWidth:		    15,
	      slideHeight:		    200,
	      theme:		        "default",
	      insert:				"before",
	      show:					"appear",
	      attach:				false
	    }, arguments[1] || {});

	   	this.options = opts;
		
		this.el = $(arguments[0]);
		this.setSlideStruct();
		this.setTheme();
		
		if(this.options.attach) this[this.options.attach]();
	
	},
	setSlideStruct: function(){
		this.slide = {vertical:{},horizontal:{},parent:{}};
		this.slide.parent.id = this.el.id;
		this.slide.id = this.slide.parent.id + '_slide';
		
		this.slide.vertical.dimension = 'getHeight';
		this.slide.vertical.margin = 'margin-top|margin-bottom';
		this.slide.vertical.padding = 'padding-top|padding-bottom';
		this.slide.vertical.size = 'height';
		this.slide.vertical.pos = 'top';
		this.slide.vertical.adjust = 'multiply';
		
		this.slide.horizontal.dimension = 'getWidth';
		this.slide.horizontal.margin = 'margin-left|margin-right';
		this.slide.horizontal.padding = 'padding-left|padding-right';
		this.slide.horizontal.size = 'width';
		this.slide.horizontal.pos = 'left';
		this.slide.vertical.adjust = 'one';
	},
	setTheme: function() {
		switch(this.options.theme){
			case 'default':
				this.slide.html = this.builder._default(this);
			break;
			case 'pointers':
				this.slide.html = this.builder._pointers(this);
			break;
			default:
				this.slide.html = this.builder._default(this);
		}
		this.insert();
	},
	builder:{	
		_default:function(o){
			template = Builder.node('div',{id:o.slide.id, "class":'slider', style: 'display:none'},[
					Builder.node('div',{"class":'handle'})
			]);
			return template;
		},
		
		_pointers: function(o){
			template = Builder.node('div',{id: o.slide.id, "class":'slider'},[
								Builder.node('div',{"class":'handle'})
							]);
			return template;				
		}
	},
	axis: {
		vertical:  function(){
			e = arguments[0];
			s = arguments[1];
			opt = arguments[2] || {
				loc:	"RIGHT",
				offSet: 0
			};
			
			$(e.id).setStyle({position:'absolute',height:s.getHeight()+'px'});
			Element.clonePosition(e,s,{
				setWidth:false,
				setHeight:false,
				setLeft:true,
				setTop:true,
				setHeight:false,
				offsetLeft:(opt.loc=="LEFT")?(e.getWidth()+opt.offSet)*-1:s.getWidth()+opt.offSet,
				offsetTop:0
			});
		},
		horizontal: function(){
			e = arguments[0];
			s = arguments[1];
			opt = arguments[2] || {
				loc:	"BOTTOM",
				offSet: 0
			};
			
			e.setStyle({position:'absolute',width:s.getWidth()+'px'});
			Element.clonePosition(e,s,{
				setWidth:false,
				setHeight:false,
				setLeft:true,
				setTop:true,
				setHeight:false,
				offsetLeft:0,
				offsetTop: (opt.loc=="TOP")?(e.getHeight()+opt.offSet)*-1:s.getHeight()+opt.offSet
			});
		}
	},
	attach: function(){
		this.axis[this.options.axis](this.slide.html,this.el,{
			offSet: this.options.locOffSet,
			loc: this.options.loc
		});
		this.display();
	},
	create: function(){
		this.display();
	},
	display: function(){
		canDisplay = this.slider();
		
		switch(this.options.display){
			case 'auto':
				if(canDisplay){
					$$("div#"+this.slide.html.id).invoke(this.options.show);
				}		
			break;
			case 'always':
				if(!canDisplay){
					this.sliderObj.setDisabled();
				}
				$$("div#"+this.slide.html.id).invoke(this.options.show);
			break;
			case 'always-opaque':
				$$("div#"+this.slide.html.id).invoke(this.options.show);
				if(!canDisplay){
					this.sliderObj.setDisabled();
					new Effect.Opacity(this.slide.html,{
						from:1.0,
						to:0.3,
						queue: 'end'
					});
				}
			break;
			default:
			if(canDisplay){
				$$("div#"+this.slide.html.id).invoke(this.options.show);
			}
		}
	},
	insert: function(){
		switch(this.options.insert){
			case 'before':
				Element.insert(this.el,{before:this.slide.html});
			break;
			case 'after':
				Element.insert(this.el,{after:this.slide.html});
			break;
			default :
				Element.insert(this.el,{before:this.slide.html});
		}
	},
	getAdjacents: function(bits,opts){
		ret = {margin:0,padding:0};
		size = 'bits.size';
		
		if(bits.size()== 1){
			return 0;
		}else{
			if(bits.first().getStyle(opts.margin.split('|')[0])!=''&&bits.first().getStyle(opts.margin.split('|')[0])!='0px'){
				ret.margin =  bits.first().getStyle(opts.margin.split('|')[0]).split('px')[0]*bits.size();
			}else{
				if(bits.first().getStyle(opts.margin.split('|')[1])!=''&&bits.first().getStyle(opts.margin.split('|')[1])!='0px'){
					ret.margin =  bits.first().getStyle(opts.margin.split('|')[1]).split('px')[0]*bits.size();
				}
			}
			
			if(bits.first().getStyle(opts.padding.split('|')[0])!=''&&bits.first().getStyle(opts.padding.split('|')[0])!='0px'){
				ret.padding = bits.first().getStyle(opts.padding.split('|')[0]).split('px')[0]*bits.size();
			}else{
				if(bits.first().getStyle(opts.padding.split('|')[1])!=''&&bits.first().getStyle(opts.padding.split('|')[1])!='0px'){
					ret.padding =  bits.first().getStyle(opts.padding.split('|')[1]).split('px')[0]*bits.size();
				}
			}
			return parseInt(ret.margin)+parseInt(ret.padding);
		}
		
	},
	slider: function(){
		var slider = this.slide.html;
        var opts = this.slide[this.options.axis];
        var bits = this.el.down().immediateDescendants();
		
		var size = bits.size() * bits.first()[opts.dimension]();
		
		adjust = this.getAdjacents(bits,opts); 
		
		calc = adjust+size;
		
		diff = (calc - this.el[opts.dimension]());
		
		this.slide.html.down().style[opts.size] = (this.el[opts.dimension]() - diff <= 0)?'10px':this.el[opts.dimension]() - diff + 'px';
	
		this.sliderObj = new Control.Slider(this.slide.html.down(), this.slide.html, {
	      axis:this.options.axis,
	      range: $R(0, diff),
	      sliderValue: 0,
	      el: this.el,
	      onSlide: function(value) {
	       this.move(value,this.el);
	      },
	      onChange: function(value) { 
	        this.move(value,this.el);
	      },
	      move: function(value,el){
	      	var pos = Math.round(value) * -1;
			el.down().style[opts.pos] = pos + 'px';
	      }
	    });
	    
	    return (diff>0)?true:false;
	}
}