var handleElements = $$('.handleClass');


var sss = new Class({

    Implements: [Options, Events],
    
    options: {
        sortable: true,		// whether or not elements should be slideable
        sortableOptions: {
            clone: true,// show a clone when sorting
			handle: '.handleClass',

			opacity: .4,	// opacity to set cloned sortable to
            revert: {		// object for sortables revert animation
                transition: Fx.Transitions.Back.easeOut
            }
        },
        slideable: false,	// whether or not the sliders should be made
        slideFxOptions: { 	// options object for Fx.Slide
            transition: Fx.Transitions.Expo.easeOut
        },
        saveable: true,		// whether or not the slide / sort state should be saved
        cookie: true, 		// set to false to use json
        json: {				// the options object for Request.JSON
			url: './'
		}
    },
    
    initialize: function(list, slideToggles, slideElements, options){
        this.setOptions(options);
        if (this.options.sortable) {
            this.list = $(list);
            this.setupSortables();
        }
        if (this.options.slideable) {
            this.slideToggles = $$(slideToggles);
            this.slideElements = $$(slideElements);
            this.setupSliders();
        }
		// console.log(this);
        if (this.options.saveable) {
            if (this.options.cookie) {
                this.cookie = new Hash.Cookie('autoportal_blocos', {duration: 3600}, this.options.cookie); 
            }
            else 
                if (this.options.json) {
                    this.json = new Request.JSON(this.options.json);
                }
            if (this.options.sortable) {
                this.loadSortState();
            }
            if (this.options.slideable) {
                this.loadSliderState();
            }
        }
    },
    
    setupSortables: function(){
        this.sortables = new Sortables(this.list, this.options.sortableOptions);
		if(this.options.saveable)
			this.sortables.addEvent('complete', this.updateSortState.bind(this));
    },
    
    setupSliders: function(){
        this.slideElements.each(function(e, i){
            e.slide = new Fx.Slide(e, this.options.slideFxOptions);
			if(this.options.saveable)
				e.slide.addEvent('complete', this.updateSliderState.bind(this));
            this.slideToggles[i].addEvent('click', function(){
                e.slide.toggle();
            });
        }, this);
    },
    
    updateSortState: function(){
    	this.sortState = new Hash();
		this.sortables.elements.each(function(e,i){
			this.sortState.set(this.list.getChildren().indexOf(e), i);
		}, this);
		if(this.cookie)
			this.cookie.set('sortState', this.sortState);
		else
			if(this.json){
				this.json.send('set=sortState&sortState='+JSON.encode(this.sortState.getClean()));
			}
    },
    
    loadSortState: function(){
		if(this.cookie){
			this.sortState = $H(this.cookie.get('sortState'));
			if(!$defined(this.sortState[0]))
				this.updateSortState();
			this.setSort();
		}
		else
			if(this.json){
				this.json.send('get=sortState');
				this.temp = function(response){
					if (response) {
						this.sortState = $H(response);
						this.setSort();
					}
					else {
						this.updateSortState();
					}
					this.json.removeEvent('complete', this.temp);
				}.bind(this);
				this.json.addEvent('complete', this.temp);
			}

    },
    
	setSort: function(){
		var order = [];
		this.sortables.elements.each(function(e, i){
			order.push(this.sortables.elements[this.sortState[i]]);
		}, this);
		order.each(function(e){
			e.injectBottom(e.getParent());
		});		
	},
	
    loadSliderState: function(){
        if (this.cookie) {
        	this.sliderState = $H(this.cookie.get('sliderState'));
			if(!$defined(this.sliderState[0])){
				this.updateSliderState();
			}
			this.setSliders();
        }
        else 		
            if (this.json) {
				if(this.json.running){
					this.loadSliderState.delay(100, this);
				}
				else{
					this.json.send('get=sliderState');
					this.temp = function(response){
						if (response) {
							this.sliderState = $H(response);
							this.setSliders();
						}
						else{
							this.updateSliderState();
						}
						this.json.removeEvent('complete', this.temp);
					}.bind(this);
					this.json.addEvent('complete', this.temp);
				}
            }
    },
	
    updateSliderState: function(){
		this.sliderState = new Hash();
    	this.slideElements.each(function(e,i){
			this.sliderState.set(i, e.slide.open);
		}, this)
		if(this.cookie)
			this.cookie.set('sliderState', this.sliderState);
		else
			if(this.json){
				this.json.send('set=sliderState&sliderState='+JSON.encode(this.sliderState.getClean()));
			}
    },
	
	setSliders: function(){
		this.sliderState.each(function(state, index){
			if(state)
				var action = 'show';
			else
				var action = 'hide';
			this.slideElements[index].slide[action]();
		}, this);		
	}	
    
});