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 modifierOwningGrid = document.getElementById(ModifierOwningGridId);

            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 modifierOwningGrid = document.getElementById(ModifierOwningGridId);

            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('sd_') != -1 || droppedImageData == 'SlideDown')
        {
            direction = 'Down';
        }

        var cssClass;
        if (direction == 'Down')
        {
            cssClass = 'sd ' + imageSourceName;
        }
        else
        {
            cssClass = 'su ' + imageSourceName;
        }

        var newItemHTML = "<span id='" + newImageId + "'"
                            + "  name='" + newImageId + "'"
                            + "  alt='Slide " + direction + "'"
                            + "  OwnerPrefix='" + this.OwnerPrefix + "'"
                            + "  ImgNumber='" + imageSourceName + "'"
                            + "  ImageSrcName='" + imageSourceName + "'"
                            + "  ImgData='" + imageSourceName + "'"
                            + "  HorizontalPosition='" + horizontalPosition + "'"
                            + "  VerticalPosition='" + verticalPosition + "'"
                            + "  SpecialPosition='true' "
                            + "  SpecialPositionType='Slide" + direction + "' "
                            + "  ItemType='Tab'"
                            + "  drag='true'"
                            + "  Class='" + cssClass + "'"
                            + "  style='top:0px;left:0px;visibility:hidden;z-index:100;cursor:default'></span>";

        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;
        }
    }
}