// Author: R. Pepe Lopez B.
// Date: 2.10.2009
// Version: 1.00
// Contact: js_hacks [-a-t-] freshsite.de
// License: MIT License
/* 
 * Initialize:
 * var moover = new milkyMoove({
                                divname1: "inner",
                                divname2: "inner2",
                                divleftarr: "leftarr",  
                                divrightarr: "rightarr",
                                milkyMoove_move_step: 2
                            });
 * 
 * 
 */
var milkyMoove = new Class({
     Implements: [Options],
   
        //options
          options: {
            milkyMoove_move_step: 1, //how much px in one step?
           
            divname1: "inner",      // id of inital DIV which contains pix
            divname2: "inner2",     // id of cloned div, you need it for css!
           
            divleftarr: "leftarr",  // id of left arrow
            divrightarr: "rightarr" // id of right arrow
          },
         
      //variables - LEAVE AS IS!
        milkyMoove_move: 0,         //status - LEAVE AS IS HERE!
        milkyMoove_timer: '',
         
      //functions
       initialize: function(options){
        // apply options
        this.setOptions(options);   
        //set events
            //if you want to "inverse" movement, switch left & right to each other!!
            /*$(this.options.divleftarr).addEvent('mouseover', (function(){
                this.scroll_mouse_over('left');
            }).bind(this));
            $(this.options.divrightarr).addEvent('mouseover', (function(){
                this.scroll_mouse_over('right');
            }).bind(this));
            $(this.options.divleftarr).addEvent('mouseout', (function(){
                this.scroll_mouse_out();
            }).bind(this));
            $(this.options.divrightarr).addEvent('mouseout', (function(){
                this.scroll_mouse_out();
            }).bind(this));*/
            var div1Width = 0;
            $(this.options.divname1).getElements('li').each(function(item){size=item.getSize();div1Width+=parseInt(size.x)+parseInt(item.getStyle('margin-right'));})
            $(this.options.divname1).setStyle('width',div1Width+'px');
            $(this.options.divname1).setStyle('left','0');
            $(this.options.divname1).addEvent('mouseover', (function(){
                this.scroll_mouse_out();
            }).bind(this));
            $(this.options.divname1).addEvent('mouseout', (function(){this.scroll_mouse_over('right');}).bind(this));
            
            var el2 = $(this.options.divname1).cloneNode(true);       //clone 1st div
            el2.id = this.options.divname2; //give name
            $(this.options.divname1).parentNode.appendChild(el2); //append
            
            el2.setStyle('width',div1Width+'px');
            el2.setStyle('left',div1Width+'px');
 
            $(this.options.divname2).addEvent('mouseover', (function(){
                this.scroll_mouse_out();
            }).bind(this));
            $(this.options.divname2).addEvent('mouseout', (function(){this.scroll_mouse_over('right');}).bind(this));
            
            this.scroll_mouse_over('right');
 
        
        },
        //main move function
        scroll_move_it: function()
        {
                // getting element names...
                var el = $(this.options.divname1);
                var el2 = $(this.options.divname2);
                var elLeft = el.getStyle('left');
                var elWidth = el.getStyle('width');
                var el2Left = el2.getStyle('left');
                var el2Width = el2.getStyle('width');
                               
                //alert(el.getStyle('left'));
               
                switch(this.milkyMoove_move)
                {
                    case 1: //left arrow
                        el.setStyle('left',(parseInt(elLeft)+(this.options.milkyMoove_move_step))+"px");
                       
                        if(parseInt(elLeft)>-10)
                        {
                            //and move too
                            el.setStyle('left',(parseInt(elLeft) - parseInt(el2.getStyle('width')))+"px");
                           
                            //if out of sight switch place                         
                            if(parseInt(elLeft)>parseInt(elWidth))
                            {
                                el.setStyle('left',(parseInt(el2Left)-parseInt(elWidth))+"px");
                                el2.id=this.options.divname1;
                                el.id =this.options.divname2;
                            }
                        }
                        break;
                    case -1:    //right arrow
                        el.setStyle('left',(parseInt(elLeft)-(this.options.milkyMoove_move_step))+"px");
                       
                        if((parseInt(elLeft)+parseInt(elWidth))<(parseInt(elWidth)+10))
                        {
                            el2.setStyle('left',parseInt(elLeft) + parseInt(elWidth)+'px');
                            //alert(el2Left);
                            if(parseInt(el2Left)<0)
                            {
                                //if in sight switch place
                                el.setStyle('left',(parseInt(el2Left)+parseInt(elWidth))+'px');
                                el2.id=this.options.divname1;
                                el.id=this.options.divname2;
                            }
                        }
                        break;
                }
               
            },
                 
        scroll_mouse_over: function (name){
            $clear(this.milkyMoove_timer);
            var el = $(this.options.divname1);
            var el2 = $(this.options.divname2);
            switch(name)
            {
                case 'right':
                //you may change this line...
                    //$(this.options.divrightarr).setOpacity(0.8);
                   
                    if(el2 && el.offsetLeft>el2.offsetLeft)
                    {
                        el.id = this.options.divname2;
                        el2.id = this.options.divname1;
                    }
                    this.milkyMoove_move=-1;
                    break;
                case 'left':
                //you may change this line...
                    //$(this.options.divleftarr).setOpacity(0.8);
                   
                    if(el2 && el.offsetLeft<el2.offsetLeft)
                    {
                        el.id = this.options.divname2;
                        el2.id = this.options.divname1;
                    }
                    this.milkyMoove_move=1;
                    break;
            }
           
            if(this.milkyMoove_move!=0)
            {
                //as long as mouseover, execute function!
                this.milkyMoove_timer = this.scroll_move_it.periodical(30, this);
            }
        },
     
        scroll_mouse_out: function(){
                /*switch (this.milkyMoove_move) {
                    case -1:
                    //you may change this line...
                        //$(this.options.divrightarr).setOpacity(0.5);
                        break;
                    case 1:
                    //you may change this line...
                        //$(this.options.divleftarr).setOpacity(0.5);
                        break;
                }*/
                //stop movement
                this.milkyMoove_move = 0;
                $clear(this.milkyMoove_timer);
               
              }
 
});

window.addEvent('load', function() {
        var moover = new milkyMoove({
          divname1: "defil",
          divname2: "inner2",
          milkyMoove_move_step: 1
        });
      });