var SmoothGlider = new Class.create({
        initialize: function(element, options){
            option = options || {};
            this.options = {
                display: 3,
                displayPerStep: 1,
                duration: 1,
                initializeIndex: 1,
                initializeWithScroll: true,
                initializeWithScrollDuration: 1,
                mainDivId: 'glider',
                subDivId: 'glider_carousel',
                nextDivId: 'glider_next',
                prevDivId: 'glider_prev',
                autoAppendChildren: true
            };
    		    Object.extend(this.options, options);
    		    this.parentElement = $(element);
    		    this.element = $(this.options.subDivId);
    		    
    		    this.elementChildren = this.element.childElements();
            		    
    		    if(!this.element || !this.parentElement || !this.elementChildren)
    		        return;
    		    
            
            if (this.options.autoAppendChildren == true){
        		    this.elementCount = this.elementChildren.length;
        		    var elementsToGenerateIndex = this.options.display;
        		    
        		    //duplicates the elements, depending on the requested per view;
        		    for (var i=0; i<elementsToGenerateIndex; i++){
                    var node = $(this.elementChildren[i]);
                    var nodeClone = node.cloneNode(true);
    
                    //nodeClone.setAttribute('id', $(node).id + "_" + i);
                    nodeClone.setAttribute('id', $(node).id);                
                    
                    var tmp = nodeClone.childElements();
                    
                    var container = $(this.element);
                    container.appendChild(nodeClone);    		    
        		    
                }
            }
            
            this.elementChildren = this.element.childElements();
            this.elementCount = this.elementChildren.length;
    		    
    		    this.containerWidth = this.getStyle($(this.parentElement), "width").replace(/px/, '');
    		    this.contentWidth = this.getStyle($(this.elementChildren[0]), "width").replace(/px/, '');
    		    
    		    this.contentMargin = (this.containerWidth-this.options.display*this.contentWidth)/(this.options.display-1);
    		    
            this.dumpWidth = this.contentWidth*this.elementCount+this.contentMargin*this.elementCount;
            this.dumpWidth = this.dumpWidth + "px";
            
            $(this.element).setStyle({ width: this.dumpWidth });
            $(this.parentElement).setStyle({ overflow: 'hidden' });
            
            
            
            var marginStyle = "0px " + this.contentMargin + "px 0px 0px";
            
            for (var i=0; i < this.elementChildren.length; i++){
                var defMarginTop = this.getStyle($(this.elementChildren[i]), "margin-top"); //alert(defMargin); alert(this.contentMargin);
                var defMarginBot = this.getStyle($(this.elementChildren[i]), "margin-bottom")
                var marginStyle = defMarginTop + " " + this.contentMargin + "px " + defMarginBot + " 0px";  //alert(marginStyle);
                //var marginStyle = "right: " + this.contentMargin + "px";
                $(this.elementChildren[i]).setStyle({ "margin": marginStyle });
            }
            
            var step = (eval(this.contentWidth)+eval(this.contentMargin))*this.options.displayPerStep;
            
            var maxPosL = "0px";
            var maxPosR = (this.elementCount-this.options.display)*step+'px';
            var moveTo = (this.elementCount-this.options.display)*step;
            
            this.settings = {
                stepLength: step,
                stepNext: -step,
                stepPrev: step,
                currentPosition: "",
                maxPositionPrev: maxPosL,
                maxPositionNext: "-" + maxPosR,
                moveToPrev: "-" + moveTo,
                moveToNext: moveTo,
                inMotion: 0
            };
            
            this.startup();
            
            Event.observe($(this.options.nextDivId), 'click', (function(){
                                                                          this.next()
                                                                          }).bind(this));
            Event.observe($(this.options.prevDivId), 'click', (function(){
                                                                          this.previous()
                                                                          }).bind(this));                                                                          
        },

       startup: function(){
            this.setStepInMotion();
            if (this.options.initializeWithScroll) {
                var dur = this.options.initializeWithScrollDuration;
            } else {
                var dur = 0;
            }
            var distro = Math.floor(this.options.display/2);
            var middleDistro = distro+1;
            if (this.options.initializeIndex <= middleDistro) {
                var initStep = this.settings.stepNext*(this.elementCount-this.options.display-(middleDistro-this.options.initializeIndex));
            } else {
                var initStep = this.settings.stepNext*((this.options.initializeIndex-this.options.display)+distro);
            }
            new Effect.Move($(this.element), { x: initStep, y: 0, duration: dur });
            setTimeout(this.setStepOffMotion.bind(this), ((dur*1000)+100));
       },        
                
        next: function(){
            if (this.settings.inMotion != 0) { //alert('in');
                return;
            }
            this.setStepInMotion();
            this.currentPosition();
            if (this.settings.currentPosition == this.settings.maxPositionNext) {
                new Effect.Move($(this.element), { x: this.settings.moveToNext, y: 0, duration: 0.0 });
            } 
            new Effect.Move($(this.element), { x: this.settings.stepNext, y: 0, duration: this.options.duration });
            setTimeout(this.setStepOffMotion.bind(this), ((this.options.duration*1000)+100));
        },
        
        previous: function(){
            if (this.settings.inMotion != 0) { //alert('in');
                return;
            }
            this.setStepInMotion();
            this.currentPosition();
            if (this.settings.currentPosition == this.settings.maxPositionPrev) {
                new Effect.Move($(this.element), { x: this.settings.moveToPrev, y: 0, duration: 0.0 });
            } 
            new Effect.Move($(this.element), { x: this.settings.stepPrev, y: 0, duration: this.options.duration });
            setTimeout(this.setStepOffMotion.bind(this), ((this.options.duration*1000)+100));                    
            
        },
        
        goTo: function (elem){
            var requestedPosLeft = this.getStyle($(this.parentElement), "left");           
            var numericPosition = this.getStyle(this.element, "left").replace(/px/, '');
            var mostLeftElementIndex = Math.ceil(Math.abs(numericPosition/this.contentWidth));
            var mostRightElementIndex = (mostLeftElementIndex+this.options.display)-1;
            var index = new Array();
    		    for (var i=0; i<this.elementCount; i++){
                if (elem == $(this.elementChildren[i]).id) {
                    index[i] = i;
                }
            }
            
            for (var i=0; i<index.length; i++) {
                if ( (index[i] >= mostLeftElementIndex) && (index[i] <= mostRightElementIndex) ){
                    var currentIndex = index[i];
                    break;
                }
            }
            
            if (currentIndex == mostLeftElementIndex) {
                if (this.settings.inMotion != 0) {
                    var waitForStep = (this.options.duration*1000+100);
                } else {
                    var waitForStep = 100;
                }           
                setTimeout(this.previous.bind(this), waitForStep);                
                
            } else if ((currentIndex-mostLeftElementIndex) > 1) {
                if (this.settings.inMotion != 0) {
                    var waitForStep = (this.options.duration*1000+100);
                } else {
                    var waitForStep = 100;
                }
                setTimeout(this.next.bind(this), waitForStep);
            }
        },
        
        currentPosition: function(){
            this.settings.currentPosition = this.getStyle(this.element, "left");
            if (this.settings.currentPosition == 'auto') {
                this.settings.currentPosition = this.settings.maxPositionPrev;
            }
        },
        
        setStepInMotion: function(){
            this.settings.inMotion = 1;
            
        },
        
        setStepOffMotion: function(){
            this.settings.inMotion = 0;
        },
        
        
        getStyle: function(oElm, strCssRule){
          	var strValue = "";
          	if(document.defaultView && document.defaultView.getComputedStyle){
          		strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
          	}
          	else if(oElm.currentStyle){
          		strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
          			return p1.toUpperCase();
          		});
          		strValue = oElm.currentStyle[strCssRule];
          	}
          	return strValue;
       }
       
    });