jQuery.easing.def = "easeOutQuad";

function fixOnMouseOut(element, event, JavaScript_code) {
    var current_mouse_target = null;
    if( event.toElement ) {
        current_mouse_target 			 = event.toElement;
    } else if( event.relatedTarget ) {
        current_mouse_target 			 = event.relatedTarget;
    }
    if( !is_child_of(element, current_mouse_target) && element != current_mouse_target ) {
        eval(JavaScript_code);
    }
}

function is_child_of(parent, child) {
    if( child != null ) {
        while( child.parentNode ) {
            if( (child = child.parentNode) == parent ) {
                return true;
            }
        }
    }
    return false;
}


function appSlider(_root){

    _this = this;
    this.root = $(_root);

     this.root.css({
        "position":"relative",
        "overflow":"hidden",
        "z-index":"2"
    });
  
}
appSlider.prototype.init = function(e){


    var _w = $(".thumbHolder").width();
    var _h = $(".thumbHolder").height()
    this.apps = $(".thumbHolder");
    this.winW = $(window).width();
    this.winH = $(window).height();
    this.winWpad =this.winW - 60;
    this.winHpad =this.winH - 100;

    this.gridX = Math.floor(this.winWpad/_w);
    this.gridY = Math.floor(this.winHpad/_h);
    this.padX = (this.winW - (this.gridX*_w))/2;
    this.padY = (this.winH - (this.gridY*_h))/2;
    this.appsPerPane = this.gridX*this.gridY;
    this.counter=0;
    if(this.appsPerPane>0){
        this.render();
    }
}

appSlider.prototype.render = function(){

    
   
     this.root.css({
        "width":this.winW+"px",
        "height":this.winH+"px"
    })
   
    this.root.html("");
    
    
    this.mainSlider = $("<div id='mainSlider' />");
    this.mainSlider.appendTo(this.root);

    this.panesN  = Math.ceil(this.apps.size()/this.appsPerPane);

    this.mainSlider.css({
        "width":(this.panesN*this.winW)+"px"
    });
    this. mainSlider.css({
        "position":"relative"
    });
    
    for(i=0;i<this.panesN;i++){

        offset = i*this.appsPerPane;
        var bunch = this.apps.slice(offset,offset+this.appsPerPane);

        var pane = $("<div class='sliderpane' />");
        var inPane = $("<div class='sliderpaneInner' />");
        
        pane.css({
            "width":this.winW+"px",
            "height":this.winH+"px",
            "border":"0px solid red",
            "float":"left"
        });

        inPane.css({
            "position":"relative",
            
            "padding-left":this.padX+"px",
            "padding-right":this.padX+"px",
            "padding-bottom":this.padY*0.5+"px",
            "padding-top":this.padY*1.5+"px"


        });

        bunch.appendTo(inPane);
        $("<div style='clear:both'/>").appendTo(inPane);
        inPane.appendTo(pane);
        pane.appendTo(this.mainSlider);
    }


    if(this.panesN>1){
        this.createControl()
    }

}

appSlider.prototype.createControl = function(){
    
    this.control = this.root;

    this.control.append("<div class ='controlArrow' id='sliderControlRight' onclick='m_appSlider.move(1)'>left</right>");
    this.control.append("<div class ='controlArrow' id='sliderControlLeft' style='right:0px' onclick='m_appSlider.move(-1)'>right</right>");
   
    //this.control.appendTo(this.root);
      $(".controlArrow").bind({
            mouseenter:function(){$(this).stop().fadeTo(400,1);},
            mouseleave:function(){$(this).stop().fadeTo(400,0.5);}
      })
    $(".controlArrow").css({
        opacity:0.50,
        "cursor":"pointer",
        "position":"absolute",
        "top":(this.winH/2)+"px"

    })
    

}
appSlider.prototype.move = function(dir){
    
    this.counter = Math.max(Math.min(this.counter+=dir,0),-this.panesN+1);

    var dest = (this.counter*this.winW) + "px";
    //alert(dir+ " : "+this.counter+" : "+dest)
    this.mainSlider.animate({
        left:dest
    },400)
}