<script>
   var coordinates = {
     "actors" : 0,
     "director" : 230,
     "writer" : 308,
     "photography" : 375,
     "drama" : 411,
     "effects" : 486,
     "music" : 579,
     "producer" : 696
   };
   function findDimensions(){
        var width = 0, height = 0;
        if(window.innerWidth){
        width = window.innerWidth;
        height = window.innerHeight;
        }
        else if(document.body && document.body.clientWidth){
        width = document.body.clientWidth;
        height = document.body.clientHeight;
        }
        if(document.documentElement && document.documentElement.clientWidth){
        width = document.documentElement.clientWidth;
        height = document.documentElement.clientHeight;
        }
        var ret=new Array();
        ret['width']=width;
        ret['height']=height;
        return ret;
    }

    function SlideTo(role){
        $(".handler").animate({'left' : coordinates[role]});
        var new_left = - (4880 - 839) * (coordinates[role] / 696);
        $(".people_and_names").animate({'left' : new_left});
        $(".switcher li").removeClass("active");
        $("#li_" + role).addClass("active");
    }

    var prev_active = 'actors';
    function ListenSlider(cleft){
        var diff = 999999;
        var act = '';
        for(var i in coordinates){
            var cccoord=coordinates[i] ? coordinates[i] : 200;
            if( Math.abs(cccoord - cleft) < diff){
                act = i;
                diff = Math.abs(cccoord - cleft);
            }
        }
        if(prev_active != act)
            {
                $(".switcher li").removeClass("active");
                $("#li_" + act).addClass("active");
                prev_active = act;
            }
    }

    var CurrentBG='bgOct';
    var monitor = {};
    var offsets = {
       "background": 100,
       "person": 50
    }

    var GlobalOffset = 0;
    var MousePos = monitor.width/2;

   function InitParallax(){
      $("body").mousemove(function(e){
        for(var type in offsets){
            offset = -1* (e.clientX/monitor.width) * offsets[type] + GlobalOffset ;
            $("." + type).css({'left': offset});
        }

        MousePos = e.clientX;
        ShowTitles();
      });
      ShowTitles();
      setTimeout(Switch,5000);
   }

    function ShowTitles(){
        if(!monitor || !monitor.width) {
            monitor = {'width':1400};
        }

        if(GlobalOffset == 0 || GlobalOffset == 5600){
            $(".background .bgOct .title, .background .bgOct2 .title")
                .fadeIn('slow')
                .css({'marginLeft':  (MousePos/monitor.width) * 20 + 850});
        }

        if(GlobalOffset == -1400 ){
            $(".background .bgDorin .title")
                .fadeIn('slow')
                .css({'marginLeft':  (MousePos/monitor.width) * 30 + 170});
        }

        if(GlobalOffset == -2800 ){
            $(".background .bgNadya .title")
                .fadeIn('slow')
                .css({'marginLeft':  (MousePos/monitor.width) * 30 + 840});
        }

        if(GlobalOffset == -4200 ){
            $(".background .bgPetrakovich .title")
                .fadeIn('slow')
                .css({'marginLeft':  (MousePos/monitor.width) * 30 + 920});
        }

    }
    function Switch(){

        $("body").unbind("mousemove");
        if(GlobalOffset == -5600){
             $(".background").css({'left' : '0'});
             $(".person").css({'left' : '0'});
             GlobalOffset = 0;
        }

         $(".person").animate({'left' : '-=1400'}, 1500,function(){
                GlobalOffset-=1400;
                InitParallax();
            });

         setTimeout(function(){
            $(".background").animate({'left' : '-=1400'}, 800,function(){});
         },200);




    }




    $(function(){
      $(".bgDorin").addClass("bgDorinIMG");
      setTimeout(function(){ $(".bgNadya").addClass("bgNadyaIMG"); }, 2000);
      setTimeout(function(){ $(".bgPetrakovich").addClass("bgPetrakovichIMG"); }, 5000);
      monitor = findDimensions();
      InitParallax();
        $(".handler").draggable({
            axis: "x",
            containment: "parent",
            drag: function() {

                var new_left = - (4880 - 839) * ($(this).position().left / 696)
                $(".people_and_names").css({'left' : new_left});
                ListenSlider($(this).position().left);
			}
        });

    })

   </script>