Slide = function(dropElement)
{
    this.DropElement = dropElement;
    this.Width = ParseNumber(GetElementWidth(this.DropElement));
    this.Height = ParseNumber(GetElementHeight(this.DropElement));
    this.OwnerPrefix = dropElement.getAttribute('OwnerPrefix');
    
    // sets the 'snap to grid' separation
    this.HorizontalSeparationIncrement = 0.5;
    
    // tool bar item constants
    this.ToolBarItemVerticalPosition = -5;
    
    this.DataItemRequiresRefresh = true;
}

Slide.prototype =
{
    GetPosCenterTop : function()
    {
        if (IsExternalDragItem)
        {
            Log('Slide->GetPosCenterTop->IsExternalDragItem');
            
            var itemTopInModifierWindow = ParseNumber(this.DropElement.offsetParent.offsetTop) + ParseNumber(ModifierWindow.style.top);
            var owningGridTop = ParseNumber(ModifierOwningGrid.offsetParent.offsetTop);
            var offsetTop = owningGridTop - itemTopInModifierWindow;         
            var actualDropElementTop = ParseNumber(this.DropElement.style.top) - offsetTop;
                       
            this.PosCenterTop = actualDropElementTop + (this.Height / 2);
            Log('Slide->GetPosCenterTop->' + this.PosCenterTop);
            return this.PosCenterTop;
        }
        else
        {
            Log('Slide->GetPosCenterTop->NotExternalDragItem');            
            this.PosCenterTop = ParseNumber(this.DropElement.style.top) + (this.Height / 2);
            Log('Slide->GetPosCenterTop->' + this.PosCenterTop);   
            return this.PosCenterTop;
        }
    },
    
    
    GetPosCenterLeft : function()
    {
        if (IsExternalDragItem)
        {    
            Log('Slide->GetPosCenterLeft->IsExternalDragItem');
            
            var itemLeftInModifierWindow = ParseNumber(this.DropElement.offsetParent.offsetLeft) + ParseNumber(ModifierWindow.style.left);
            var owningGridLeft = ParseNumber(ModifierOwningGrid.offsetParent.offsetLeft);
            var offsetLeft = owningGridLeft - itemLeftInModifierWindow;   
            var actualDropElementLeft = ParseNumber(this.DropElement.style.left) - offsetLeft;
            
            this.PosCenterLeft = actualDropElementLeft + (this.Width / 2);
            Log('Slide->GetPosCenterLeft->' + this.PosCenterLeft);
            return this.PosCenterLeft;
        }
        else
        {
            Log('Slide->GetPosCenterLeft');            
            this.PosCenterLeft = ParseNumber(this.DropElement.style.left) + (this.Width / 2);
            Log('Slide->GetPosCenterLeft->' + this.PosCenterLeft);
            return this.PosCenterLeft;
        }
    },   
    
    
    // adjusts the positioning (not always height/2 but in this case height as we position from the bottom of the image)
    GetActualTop : function(verticalPosition, stringSeparation)
    {
        Log('Slide->GetActualTop');
        return (verticalPosition * stringSeparation) - (this.Height / 2); // adding an aesthetic adjustment
    },
    
    
    // adjusts the positioning (not always width/2 but in this case width as we position from the edge of the image)
    GetActualLeft : function(horizontalPosition, fretHeight)
    {
        Log('Slide->GetActualLeft')
        return (horizontalPosition * fretHeight) - (this.Width / 2);
    },
    
    
    GetImage : function(droppedImageData, horizontalPosition, verticalPosition, newImageId, imageSourceName)
    {       
        // we're using the same function for both slide up and slide down as they are very similar
        var direction = 'Up'; 
        if (droppedImageData.indexOf('su_') == -1)
        {
            direction = 'Down';
        }
           
        var newItemHTML = "<img id='" + newImageId + "'"
                            + "  name='" + newImageId + "'"
                            + "  alt='Slide " + direction + "'"
                            + "  src='" + strImageThemeRootPath + "/" + imageSourceName + ".gif'"
                            + "  OwnerPrefix='" + this.OwnerPrefix + "'"
                            + "  ImgNumber='" + imageSourceName + "'"
                            + "  ImageSrcName='" + imageSourceName + "'"
                            + "  ImgData='" + imageSourceName + "'"
                            + "  HorizontalPosition='" + horizontalPosition + "'"
                            + "  VerticalPosition='" + verticalPosition + "'"
                            + "  SpecialPosition='true' "
                            + "  SpecialPositionType='Slide" + direction + "' "
                            + "  ItemType='Tab'"
                            + "  drag='true'"
                            + "  style='position:absolute;top:0px;left:0px;visibility:hidden;z-index:100;cursor:default'/>";
                        
        this._DataItem = imageSourceName;  
        
        return newItemHTML;
    },
    
    
    
    CurrentDataCanRemain : function(currentDataItem)
    {
        Log('CurrentDataCanRemain->CurrentDataItem->' + currentDataItem);
        
        // we're using the same function for both slide up and slide down as they are very similar
        var direction = 'Up'; 
        if (currentDataItem.indexOf('su_') == -1)
        {
            direction = 'Down';
        }
        
        if (direction == 'Up' && currentDataItem.indexOf('su_') != -1)
        {
            // its another slide up
            Log('CurrentDataCanRemain->False');
            return false;
        }
        else if (direction == 'Down' && currentDataItem.indexOf('sd_') != -1)
        {
            // its another slide down
            Log('CurrentDataCanRemain->False');
            return false;
        }
        
        Log('CurrentDataCanRemain->True');
        return true;
    },
    
    
    
    ResetItem : function()
    {
        // the element might be a tool box image dropped or it might be one of the images re-positioned
        if (this.DropElement.id.indexOf('newImg') != -1)
        {
            Log('Slide->ResetItem->Reset new image');
            
            // nothing to do as we dont want to reset anything as this was a re-positioned item
            this.DropElement.style.visibility = 'hidden';
            return; 
        }
        
        if (this.DropElement.getAttribute('OriginalTop'))
        {
            // put back a tool box item
            this.DropElement.style.top = this.DropElement.getAttribute('OriginalTop') + 'px';
            this.DropElement.style.left = this.DropElement.getAttribute('OriginalLeft') + 'px';
        }
        else
        {
            // hide whatever it is
            this.DropElement.style.visibility = 'hidden';
            return; 
        }
    }
}