/**
 * Component: mylo.projects
 * Carousel like slider component
 *
 * @version        0.1
 *
 * @license        http://creativecommons.org/licenses/by/2.5/bg/
 * @author        Lyubomir Petrov <lpetrov@mylo.bg>
 * @copyright    Mylo Creative, Mylo Ltd
 */
 
 if(typeof(mylo) == "undefined")
    var mylo={};
    
mylo.projects = new Class({
    options:{
        leftButton:null,
        rightButton:null,
        elementWidth:null, //in px pleasee
        inactiveOpacity:0.4,
        scrollSpeed:1400,
        scrollTransition:Fx.Transitions.Quint,
        onSlide:Class.empty,
        onInit:Class.empty
    },
    element:null,
    elements:[],
    activeElement:0,
    scroller:null,
    initialize:function(el, options) {
        this.setOptions(options);
        this.element = $(el);
        this.elements = this.element.getElementsBySelector("li");
        if(this.options.elementWidth == null) {
            this.options.elementWidth = $(this.elements[0]).getSize().scrollSize.x;
        }
                                   
        //dynamicly set size of the inner wrapper
        this.element.getElementsBySelector("ul")[0].setStyle("width",(this.options.elementWidth*this.elements.length)+"px");
        
        //bind buttons
        this.options.rightButton.addEvent("click",this.slide.bind(this,+1));
        this.options.rightButton.fx = new Fx.Style(this.options.rightButton,'opacity',{
                duration:this.options.scrollSpeed*0.7,
                transition:this.options.scrollTransition.easeIn
        });
        this.options.leftButton.addEvent("click",this.slide.bind(this,-1));
        this.options.leftButton.fx = new Fx.Style(this.options.leftButton,'opacity',{
                duration:this.options.scrollSpeed*0.7,
                transition:this.options.scrollTransition.easeIn
        });
        
        //fade out on init
        for(var i=0;i<this.elements.length;i++) {
            $(this.elements[i]).fx = new Fx.Style($(this.elements[i]),'opacity',{
                duration:this.options.scrollSpeed*0.7,
                transition:this.options.scrollTransition.easeIn
            });
            $(this.elements[i]).fx.set(this.options.inactiveOpacity);
            
        }
        //scroller prepare
        this.scroller = new Fx.Scroll(this.element, {
            duration:this.options.scrollSpeed,
            transition: this.options.scrollTransition.easeOut
            }
        );
        //init
        this.options.leftButton.setStyle('display','none');
        this.slide(0);
        this.options.leftButton.setStyle.delay(this.options.scrollSpeed + 200,this.options.leftButton,['display','block']);
    },
    slide:function(count) {        
        if((this.activeElement+count) <= this.elements.length-1 && (this.activeElement+count) >= 0) {
            this.activeElement = this.activeElement + count;
            
            //fadein/out
            var inactiveElement;
            if(count < 0) 
                inactiveElement = this.elements[this.activeElement + 1];
            else
                inactiveElement = this.elements[this.activeElement - 1];
            
            if(inactiveElement)
                 inactiveElement.fx.start(1.0,this.options.inactiveOpacity);
                                                                  
            var currentElement = this.elements[this.activeElement];
            if(currentElement)
                currentElement.fx.start(this.options.inactiveOpacity,1.0);

                 
            
            //do scrolling
            var newWidth = this.activeElement * this.options.elementWidth;
            this.scroller.stop();
            this.scroller.scrollTo(newWidth,0);
        }

        this.buttonStates();
    },                              
    buttonStates:function() {
        this.options.leftButton.fx.stop();
        this.options.rightButton.fx.stop();
        if(this.activeElement == 0) {
                this.options.leftButton.fx.start(1.0,0.0);
        } else {
            if(this.options.leftButton.getStyle('opacity') < 1)
                this.options.leftButton.fx.start(0.0,1.0);
        }
        
        if(this.activeElement == this.elements.length-1) {
                this.options.rightButton.fx.start(1.0,0.0);
        } else {
            if(this.options.rightButton.getStyle('opacity') < 1)
                this.options.rightButton.fx.start(0.0,1.0);
        }
    }
});

mylo.projects.implement(new Events);
mylo.projects.implement(new Options);

var projectsCarousel;
window.addEvent("domready",function() {
    projectsCarousel = new mylo.projects(
        $("latest_projects_slider"),
        {
            leftButton:$E(".prev_icon"),
            rightButton:$E(".next_icon")
        }
    );
});