/*
    JavaScript functions used to demonstrate
    Building Web Pages using Scriptaculous and Prototype
    [Extending Scriptaculous and Switching Draggables with Sortables]

*/

var draggableClass;
var droppableClass = 'movieItems';
var sortableID;
var assetDataClass;
var containerDataClass;
var droppableElementsUseId;


/*
    initDraggableDroppable
    Purpose: To make the tree items draggable and the container items sortable (called after the BODY loads)

*/
function initDraggableDroppable(options) {
    draggableClass = options.draggableClass;
    droppableClass = options.droppableClass;
    assetDataClass = options.assetDataClass;
    sortableID = options.sortableID;
    containerDataClass = options.containerDataClass;
    droppableElementsUseId = options.droppableElementsUseId;
    createAllDraggables();
    createAllSortables();
  if( inity != 2 ) {
    setMovieList(sortableID); 
    inity = 2;
  }
}


/*
    dragStart
    
    Purpose: To make all container DIVs droppable.
    This is called after a drag event begins which allows the dragged
    element to be dropped into a container.
*/
function dragStart() {
    createAllDroppables();
}

/*
    createAllDroppables
    
    Purpose: To make all of the container DIV elements droppable.
*/
function createAllDroppables() {
    var containers = document.getElementsByClassName(droppableClass);
    for (var i = 0; i < containers.length; i++) {
        container = containers[i];
        Droppables.add(container,{hoverclass: 'dropHover',onDrop:function(objectElement, containerElement){dropObject(objectElement, containerElement)}});
    }
}
/*
    createAllDraggables
    
    Purpose: To make all of the tree items DIV elements draggable.
*/
function createAllDraggables() {
    var assets = document.getElementsByClassName(draggableClass);
    for (var i = 0; i < assets.length; i++) {
            asset = assets[i];
            new Draggable(asset,{ghosting: true,revert:true,dragStart:function(element){dragStart(element)}});
    }
}
/*
    dropObject
    
    Purpose: To add the dropped object data to the top of the list - then make the containers sortable.
*/
function dropObject(objectElement, containerElement) {
    addObjectToContainer(objectElement, containerElement);
    destroyAllDroppables();
    if( listtype != 'dvd' ) {
      createAllSortables();
      reenumerateList(sortableID); 
    }
}

/*
    addObjectToContainer
    
    Purpose: To extract the HTML fragment from the dragged element and insert it at the top of the container.
*/
function addObjectToContainer(objectElement, containerElement) {
    var searchID = 0;
    var allinElement;
    var assetDataElementArray = document.getElementsByClassName(assetDataClass,objectElement); // Locate the child div of this object that contains the actual data.
    var objectData = assetDataElementArray[0].innerHTML;
    for( var nodi = assetDataElementArray[0].firstChild; nodi!=null; nodi = nodi.nextSibling )
    {
      if ( nodi.nodeName.toLowerCase()=='#text' ) continue;
      try {
        switch ( nodi.className )
        {
          case 'data':
            for( var node = nodi.firstChild; node!=null; node = node.nextSibling )
            {
              if ( node.nodeName.toLowerCase()=='#text' ) continue;
              switch ( node.className )
              {
                case 'ip':
                  searchID = node.value;
                  break;
              }
            }  
        } 
      } catch(e) {}
    }
    if( moviesList[searchID] != true ) {
      moviesList[searchID] = true;
      assetHTML = "<li class=\"" + containerDataClass +"\">" + objectData + "</li>";
      new Insertion.Bottom(containerElement, assetHTML);
    } else {
      try {
        allinElement = document.getElementById("movie"+searchID); 
        // Klasse data -> data allin
        allinElement.className = "data allin";
        // Klasse allin -> data
        window.setTimeout(function()
          { allinElement.className = allinElement.className.replace( /\ballin\b/, "" ); }
        ,2000);
      } catch(e) {}
    }
}

function addActiveToContainer(element) {
    containerIsSet = 0;
    createAllDroppables();
    var assetDataElement = document.getElementById("movie"+element); // Locate the child div of this object that contains the actual data.
    var objectData = "<div class=\"data\" id=\"movie" + element + "\">" + assetDataElement.innerHTML + "</div>";
    if( moviesList[element] != true ) {
      moviesList[element] = true;
      if( listtype == 'dvd' )
        assetHTML = "<div class=\"" + containerDataClass +"\">" + objectData + "</div>";
      else
        assetHTML = "<li class=\"" + containerDataClass +"\">" + objectData + "</li>";
      new Insertion.Bottom(document.getElementById(sortableID), assetHTML);
      destroyAllDroppables();
      if( listtype != 'dvd' ) {
        createAllSortables();
        reenumerateList(sortableID); 
      }
    }
    try {
      // Klasse data -> data allin
      assetDataElement.className = "data allin";
      // Klasse allin -> data
      window.setTimeout(function()
        { assetDataElement.className = assetDataElement.className.replace( /\ballin\b/, "" ); }
      ,2000);
    } catch(e) {}
    
}

function changeContainer(url, tab) {
  if( tab == 'collection' || tab == 'wishlist' || tab == 'pricewatch' || tab == 'commentlist' ) {
    var remtab = document.getElementById( 'collection' );
    remtab.className = remtab.className.replace( /\btab_active\b/, "tab" );
    remtab = document.getElementById( 'pricewatch' );
    remtab.className = remtab.className.replace( /\btab_active\b/, "tab" );
    remtab = document.getElementById( 'wishlist' );
    remtab.className = remtab.className.replace( /\btab_active\b/, "tab" );
    remtab = document.getElementById( 'commentlist' );
    remtab.className = remtab.className.replace( /\btab_active\b/, "tab" );
    remtab = document.getElementById( tab );
    remtab.className = remtab.className.replace( /\btab\b/, "tab_active" );
    dvdlist = tab;
    $('typi').value = tab;
  }
  replaceContent(document.getElementById('moviesList'),url);
  return false;
}

function addDVDToContainer(url, tab, id) {
  posFlow = false;
  if( tab == 'collection' || tab == 'wishlist' || tab == 'pricewatch' || tab == 'commentlist' ) {
    var remtab = document.getElementById( 'collection' );
    remtab.className = remtab.className.replace( /\btab_active\b/, "tab" );
    remtab = document.getElementById( 'pricewatch' );
    remtab.className = remtab.className.replace( /\btab_active\b/, "tab" );
    remtab = document.getElementById( 'wishlist' );
    remtab.className = remtab.className.replace( /\btab_active\b/, "tab" );
    remtab = document.getElementById( 'commentlist' );
    remtab.className = remtab.className.replace( /\btab_active\b/, "tab" );
    remtab = document.getElementById( tab );
    remtab.className = remtab.className.replace( /\btab\b/, "tab_active" );
    dvdlist = tab;
    $('typi').value = tab;
  }
  if( $('typi').value == 'commentlist' && id > 0 ) {
    return showMy(id,'/filmwelt/profil/editdvd/?movie=' + id + '&update=com','Movie');
  } else {
    if( dvdlist != false ) {
      url = url.replace( /\btype=([^&]+)&\b/, "type="+dvdlist+"&" );
    }
    replaceContent(document.getElementById('moviesList'),url); 
    if( id > 0 ) {
      try {
        window.setTimeout(function()
          { document.getElementById('contentDVDs').scrollTop = document.getElementById('positionFlow').value }
        ,4000);
      } catch(e) {}
    }
  }
  return false;
}

/*
    destroyAllDroppables
    
    Purpose: To remove that ability to drop into the containers.
*/
function destroyAllDroppables() {
    var containers = document.getElementsByClassName(droppableClass);
    for (var i = 0; i < containers.length; i++) {
        sortedObjectList = containers[i].id
        Droppables.remove(sortedObjectList);
    }
}
/*
    createAllSortables
    
    Purpose: To make all of the containers sortable.
*/
var containerIsSet = 0; 
function createAllSortables() {
    var containers = document.getElementsByClassName(droppableClass);
    var containerNames = getContainerNames();
    for (var i = 0; i < containers.length; i++) {
        if( containerIsSet == 0 ) {
          containerIsSet = 1;
          containerId=containers[i].id;
          eval("Sortable.create(containerId, {tag:'li',dropOnEmpty:true,constraint:false,containment:[" + containerNames + "]});")
        }
    }
}
/*
    getContainerNames
    
    Purpose: To retrieve a list of all of the container IDs (used to create the sortables).
*/
function getContainerNames() {
    containers = document.getElementsByClassName(droppableClass);
    containerObjectListNames = ""; 
    for (var i = 0; i < containers.length; i++) {
        containerObjectListNames += "\"" + containers[i].id + "\","; 
    }
    containerObjectListNames = containerObjectListNames.substring(0,containerObjectListNames.length-1);
    return containerObjectListNames;
}
/*
    destroyAllSortableLists
    
    Purpose: To remove that ability to sort the containers.
*/
function destroyAllSortableLists() {
    containers = document.getElementsByClassName(droppableClass);
    for (var i = 0; i < containers.length; i++) {
        sortedObjectListId = containers[i].firstChild.id
        Sortable.destroy(sortedObjectListId);
    }
}

function initDragDropSort( type ) {
  listtype = type;
  if( type == 'dvd' )
    initDraggableDroppable({draggableClass:'searchItem',droppableClass:'dvdItems',sortableID:'moviesList',assetDataClass:'assetData',containerDataClass:'e'});
  else
    initDraggableDroppable({draggableClass:'searchItem',droppableClass:'movieItems',sortableID:'moviesList',assetDataClass:'assetData',containerDataClass:'e'});
}

function sortableOnChangeHack() {
    if(!$('sortHack')) new Insertion.Bottom('moviesList', '<li id="sortHack" style="display:none;"></li>');
}