//CustomDragNDrop('window','window_header','new_place','droppable-active','droppable-hover','drop','drag');
/*
    Args^
    windowClass: window css class
    windowHeaderClass: window header css class
    newPlaceClass: new place css class
    dropActiveClass: css class for drop zones
    dropHoverClass: css class for drop zones where draggable is over
    dropClass: css class for drop targets
    dragType:   "vert" default or "hor"
    settingsClass: css class for control buttons
    
    Settings:
    colors: array of colors classes (color_1,color_2), after select to window css class add color class plus
            postfix '_full': color_1_full;
            
    
*/
function CustomDragNDrop(Args,Settings)
{
    var me=this;
    if(Args==undefined) return;
    
    var windowClass=Args.windowClass==undefined?'window':Args.windowClass;
    var windowHeaderClass=Args.windowClass==undefined?'window_header':Args.windowHeaderClass;
    var newPlaceClass=Args.newPlaceClass==undefined?'new_place':Args.newPlaceClass;
    var dropActiveClass=Args.dropActiveClass==undefined?'droppable-active':Args.dropActiveClass;
    var dropHoverClass=Args.dropHoverClass==undefined?'droppable-hover':Args.dropHoverClass;
    var dropClass=Args.dropClass==undefined?'drop':Args.dropClass;
    var dragType=Args.dragType==undefined?'vert':Args.dragType;
    var settingsClass=Args.settingsClass==undefined?'settings_elt':Args.settingsClass;
    
    var eventClose=Args.eventClose==undefined?function(){}:Args.eventClose;
    var eventDrop=Args.eventDrop==undefined?function(){}:Args.eventDrop;
    
    var setStyles=Settings.styles==undefined?null:Settings.styles;
    
    var WasDrop=false;
    var WasStart=false;
    var NewPlace=document.createElement("DIV");
    NewPlace.className=newPlaceClass;

    var settingsElt=document.createElement("DIV");
    settingsElt.style.postion="absolute";
    settingsElt.style.display="none";
    settingsElt.className=settingsClass;
    
    var settingsMenu=null;
    
    //init 
    if(setStyles!=null)
    {
        var styles=document.createElement("div");
        styles.className="colors";
        for(var i=0; i<setStyles.length;i++)
        {
            var style=document.createElement("div");
            style.className='color '+setStyles[i];
            styles.appendChild(style);
        }
        if(styles.childNodes.length>0)
        {
            settingsElt.appendChild(styles);
            
        }
    }
    document.body.appendChild(settingsElt);
    settingsElt=$(settingsElt);
    
    var CurWindow=null;
    var CurDrop=null;
    var Debug;
    var CurHelper;
    var CurIntervalId=0;
  
    var CustomMenu;
    var DontHideButtons=false;
    var DontHideButtonsInterval=0;
    var CurWindowHeader=null;  
    
  CustomDragNDrop.prototype.WindowStyleChange=function(e)
  {
    //e.stopPropagation();
    var classN=this.className.replace('color ','');
    $(CurWindowHeader).parents("."+windowClass).attr("className",windowClass +' '+classN+'_full');
    //alert(this.className);
  }  
  CustomDragNDrop.prototype.SetPosition=function(newElt)
  {
        var pos=$(newElt).position();
        newElt.css("top",pos.top);
	    newElt.css("left",pos.left);
	    newElt.get(0).oldWidth=newElt.css('width');
	    newElt.css("width",newElt.width());
	    
  }
  CustomDragNDrop.prototype.CheckDrop=function (helper)
  {
    if (CurIntervalId!=0) return;
    CurHelper=helper;
    CurIntervalId=setTimeout(me.CheckDrop_Process,100);
  }
  CustomDragNDrop.prototype.CheckDrop_Process=function ()
  {
    clearTimeout(CurIntervalId);
    CurIntervalId=0;
            if(CurDrop!=undefined)
            {
                var list=CurDrop.childNodes;
                var item;
                for(var i=0;i<list.length;i++)
                {
                    item=$(list[i]);
                    if(item.hasClass(windowClass))
                    {
                        if($(list[i]).attr('startDrag')!=true)
                        {
                            var res=me.IsOver(CurHelper,$(list[i]));
                            var start=CurHelper.attr('startDrag')+' '+$(list[i]).attr('startDrag');
                            //D.MSG('b Over:'+res+' '+i+' '+list.length+' ' +start+' '+CurHelper.html()+' '+$(list[i]).html());
                            
                            if(res!=0) 
                            {
                                if(res<0) 
                                {
                                    $(list[i]).after(NewPlace); 
                                }
                                else
                                {
                                    $(list[i]).before(NewPlace);
                                }
                            }
                            else
                            {
                            }
                        }
                    }
                }
                
             
            }
  }
  //Проверка пересечения эл-тов
  //возвращает '' => не пересекаются
  // l,r,rt,rb,lt,lb,t,b
  CustomDragNDrop.prototype.CheckOver=function (jTop,jBottom)
  {
    var t=jTop.position();
    var b=jBottom.position();
    t.x=t.left;
    t.y=t.top;
    t.w=jTop.outerWidth();
    t.h=jTop.outerHeight();
    
    b.x=b.left;
    b.y=b.top;
    b.w=jBottom.outerWidth();
    b.h=jBottom.outerHeight();
    
    //Не пересекаются
    if((t.x+t.w)<b.x || t.x>(b.x+b.w) || (t.y+t.h)<b.y || t.y>(b.y+b.h)) return '';
    
    var inner=t.y>b.y&&(t.y+t.h)<(b.y+b.h);
    var outer=t.y<=b.y&&(t.y+t.h)>=(b.y+b.h);
    var top=t.y<=b.y;
    //var bottom
    var left=t.x<=b.x&&(t.x+t.w)<=(b.x+b.w);
    var right=(t.x+t.w)>=(b.x+b.w)&&(t.x>=b.x);
    
    if(left)
    {
        if(inner || outer) return 'l';
        if(top) return 'lt'; else return 'lb';        
    }
    if(right)
    {
        if(inner || outer) return 'r';
        if(top) return 'rt'; else return 'rb';        
    }
    if(top) return 't'; else return 'b';        
    
    return '';
  }
   CustomDragNDrop.prototype.IsOver=function (eltTop,eltBottom)
  {
        var res=me.CheckOver($(eltTop),$(eltBottom));
        //D.MSG('Over:'+res+$(eltTop).html()+' '+$(eltBottom).html());
        if(res=='') return 0;
        
            
        if(dragType!="hor")
        {
            if(res=='r' || res=='lb' || res=='rb' || res=='b') return -1;
            if(res=='l' || res=='lt' || res=='rt' || res=='t') return 1;
        }
        else
        {
            if(res=='r' || res=='rb' || res=='b' || res=='rt') return -1;
            if(res=='l' || res=='lb' || res=='lt'  || res=='t') return 1;
        }
  }

  CustomDragNDrop.prototype.InitDroppable=function ()
  {
    $("."+dropClass).droppable(
    {
	accept: "."+windowHeaderClass,
	activeClass: dropActiveClass,
	hoverClass: dropHoverClass,
	drop: function(ev, ui)
	    {
	        ui.helper.find("script").remove();
	        var newElt=ui.helper.clone();
	        
	        
            newElt.css("opacity","1");   	    
            
	        newElt.css("width","");
	        newElt.get(0).startDrag=false;
	        if(NewPlace.parentNode != undefined)
	        {
	            if(NewPlace.parentNode.nodeType!=11)
	            {
	                $(NewPlace).after(newElt);
	            }
	            else
	            {
	                $(this).append(newElt);
	            }    
	        }
	        else 
	        {
	            $(this).append(newElt);
	        }
	        newElt.css("position","static");
	        me.InitDraggable();
	        WasDrop=true;
	        if(eventDrop!=undefined) eventDrop();
	        newElt.find('*').each(function(){if($(this).attr('onwindowDrop')!=undefined) eval($(this).attr('onwindowDrop'));});
	    },
	over: function(ev,ui)
	    {
	        CurDrop=this;
	        $(NewPlace).remove();
	        $(CurDrop).append(NewPlace);
	    }
    }
    );

  }
  CustomDragNDrop.prototype.ShowControlButtonsFlag=function()
  {
    DontHideButtons=true;
  }
  CustomDragNDrop.prototype.ShowControlButtons=function ()
  {
    DontHideButtons=true;
    CurWindowHeader=this;
    
    this.className+=' '+windowHeaderClass+'_over';
  }
  CustomDragNDrop.prototype.HideControlButtons=function ()
  {
    DontHideButtons=false;
    DontHideButtonsInterval=setTimeout(me.HideControlButtonsAction,50);
  }
  CustomDragNDrop.prototype.HideControlButtonsAction=function()
  {
    clearTimeout(DontHideButtonsInterval);
    if(DontHideButtons) return;
    DontHideButtonsInterval=0;
    if(CurWindowHeader!=undefined)
        CurWindowHeader.className=windowHeaderClass;    
  }
  CustomDragNDrop.prototype.HideControlButtonsFlag=function ()
  {
    DontHideButtons=false;
  }
  CustomDragNDrop.prototype.ControlButtonClose=function ()
  {
    $(this).parents("."+windowClass).remove();
    if(eventClose!=undefined) eventClose();
  }
  CustomDragNDrop.prototype.ControlButtonMinus=function ()
  {
    var elt=$(this).parent().parent().parent().parent().parent().parent().parent().find("div.content");
    if(this.IsOpen==undefined) this.IsOpen=true;
    
    if(this.className=='plus') this.className='minus'; else this.className='plus';
    this.IsOpen=!this.IsOpen;
    if(this.className=='minus') 
    {
        //elt.css("display","block");    
        //elt.show('normal');
        elt.slideDown('normal');
    }
    else 
    {
        //elt.hide('normal');
        elt.slideUp('normal');
        //elt.css("display","none");
    }
  }
  CustomDragNDrop.prototype.ControlButtonRefresh=function ()
  {
    alert("ControlButtonRefresh");
  }
  CustomDragNDrop.prototype.ControlButtonMenu=function (e)
  {
    //alert("ControlButtonRefresh");
    var pos=$(this).position();
    var menu_child=$(this).parents('.'+windowHeaderClass).find('.custom_menu');
    
    var menu=$(CustomMenu);
    menu.css("top",pos.top-2);
    menu.css("left",pos.left-2);
    
    //menu.show('normal');
    //this.oldPrev=$(this).prev();
    //this.oldParent=this.parentNode;
    //menu.remove();
    //$(document.body).append(menu);
    menu.html(menu_child.html());
    menu.css("position","absolute");
    menu.show('normal');
    //menu.css("display","block");
    
    //alert(menu.html());
  }
  CustomDragNDrop.prototype.ControlButtonMenuHide=function (e)
  {
  
    var elt=$(CustomMenu);
    if(elt.css("display")=='block')
    {
    var pos=elt.position();
    var eltW=elt.outerWidth();
    var eltH=elt.outerHeight();
    if(e.pageX>=pos.left && e.pageX<=pos.left+eltW+20)
    if(e.pageY>=pos.top && e.pageY<=pos.top+eltH+20) return;
    
        //alert('hide');
        elt.hide('normal');
        //elt.css("display","none");
    }
    
    //$(this).hide('normal');
  }
  CustomDragNDrop.prototype.Init=function()
  {
        CustomMenu =document.createElement("div");
        CustomMenu.style.display='none';
        CustomMenu.style.position='absolute';
        CustomMenu.className='window_menu';
        document.body.appendChild(CustomMenu);
        
        $(document.body).mousemove(me.ControlButtonMenuHide);     
        settingsElt.find('.color').click(me.WindowStyleChange)
        
        settingsMenu=new FlyoutMenu({menuContainer:settingsElt,menuBoxClass:'settings_elt_root',showEvent:'click'})
        
        me.InitDraggable();
        me.InitDroppable();           
  }
  CustomDragNDrop.prototype.ControlButtonMenuSettings=function ()
  {
    settingsMenu.Item($(this));
    settingsMenu.ShowMenu();
  }
  CustomDragNDrop.prototype.InitDraggable=function (draggableElt)
  {
    var curDraggable=(draggableElt==undefined)? $("."+windowHeaderClass) :$(draggableElt);
    curDraggable.mouseover(me.ShowControlButtons);
    curDraggable.mouseout(me.HideControlButtons);
    curDraggable.find(".close").click(me.ControlButtonClose);
    curDraggable.find(".minus").click(me.ControlButtonMinus);
    curDraggable.find(".plus").click(me.ControlButtonMinus);
    curDraggable.find(".refresh").click(me.ControlButtonRefresh);
    curDraggable.find(".menu").click(me.ControlButtonMenu);
    curDraggable.find(".settings").click(me.ControlButtonMenuSettings);
    
    curDraggable.find("img").mouseover(me.ShowControlButtonsFlag);
    curDraggable.find("img").mouseout(me.HideControlButtons);
    //$(document.body).mousemove(me.ControlButtonMenuHide);
    //alert(curDraggable.map(function(){if($(this).parents('.'+windowClass).attr('noDrag')=='true') return null; else return this;}).size()+' '+curDraggable.size());
    //curDraggable.each(function(){alert($(this).attr('noDrag'));});
    curDraggable.map(function(){if($(this).parents('.'+windowClass).attr('noDrag')=='true') return null; else return this;}).draggable({
        
        helper: function()
        {
            var curParent=$(this).parents('.'+windowClass);
            if(curParent.attr("noDrag")=='true') return null;
            curParent.get(0).startDrag=true;
            curParent.css("opacity","0.7");
            me.SetPosition(curParent);
            return curParent;
        }
        
        //handle:'.title'
        ,
        stop: function(ev,ui)
        {
            $(NewPlace).remove();
            if(!WasDrop)
            {
                var newElt=ui.helper.clone();
                ui.helper.replaceWith(newElt);
                newElt.get(0).startDrag=false;
                me.InitDraggable(newElt.find('.'+windowHeaderClass));
                newElt.css("position","static");
                newElt.css("opacity","1");   	    
            } 
            else
            {
                WasDrop=false;
            }
            
        },
        drag: function(ev,ui)
        {
            if(CurIntervalId!=0) return;
            me.CheckDrop(ui.helper);
        },
        revert:'invalid',
        distance:2
        
        });
  }
  me.Init();
  
}