Bend = 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 = 1;
    
    // tool bar item constants
    this.ToolBarItemVerticalPosition = -5;
    
    this.DataItemRequiresRefresh = true;
}

Bend.prototype =
{
    GetPosCenterTop: function ()
    {
        if (IsExternalDragItem)
        {
            Log('Bend->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);
            Log('Bend->GetPosCenterTop->' + this.PosCenterTop);
            return this.PosCenterTop;
        }
        else
        {
            Log('Bend->GetPosCenterTop->NotExternalDragItem');
            this.PosCenterTop = ParseNumber(this.DropElement.style.top) + (this.Height);
            Log('Bend->GetPosCenterTop->' + this.PosCenterTop);
            return this.PosCenterTop;
        }
    },


    GetPosCenterLeft: function ()
    {
        if (IsExternalDragItem)
        {
            Log('Bend->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;
            Log('Bend->GetPosCenterLeft->' + this.PosCenterLeft);
            return this.PosCenterLeft;
        }
        else
        {
            Log('Bend->GetPosCenterLeft');
            this.PosCenterLeft = ParseNumber(this.DropElement.style.left);
            Log('Bend->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)
    {
        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)
    {
        return (horizontalPosition * fretHeight) + 9; // adding an aesthetic adjustment
    },


    GetImage: function (droppedImageData, horizontalPosition, verticalPosition, newImageId, imageSourceName)
    {
        var imgData = imageSourceName + '_' + verticalPosition;
        var newItemHTML = "<span id='" + newImageId + "'"
                        + "  name='" + newImageId + "'"
                        + "  alt='Bend'"
                        + "  Class='bb " + imgData + "'"
                        + "  OwnerPrefix='" + this.OwnerPrefix + "'"
                        + "  ImgNumber='" + imageSourceName + "'"
                        + "  ImageSrcName='" + imageSourceName + "'"
                        + "  ImgData='" + imgData + "'"
                        + "  HorizontalPosition='" + horizontalPosition + "'"
                        + "  VerticalPosition='" + verticalPosition + "'"
                        + "  SpecialPosition='true' "
                        + "  SpecialPositionType='Bend' "
                        + "  ItemType='Tab'"
                        + "  drag='true'"
                        + "  style='position:absolute;top:0px;left:0px;visibility:hidden;z-index:100;cursor:default'></span>";

        this._DataItem = imgData;

        // this is required so the new image (which has a varying source) is positioned wrt its correct height
        this.ReCalculateHeightAndWidth(verticalPosition);
        return newItemHTML;
    },




    // this is required so the new image (which has a varying source) is positioned wrt its correct height
    ReCalculateHeightAndWidth: function (verticalPosition)
    {
        switch (ParseNumber(verticalPosition))
        {
            case 0:
                this.Height = 30;
                break;
            case 1:
                this.Height = 40;
                break;
            case 2:
                this.Height = 50;
                break;
            case 3:
                this.Height = 60;
                break;
            case 4:
                this.Height = 70;
                break;
            case 5:
                this.Height = 80;
                break;
        }
    },



    CurrentDataCanRemain: function (currentDataItem)
    {
        Log('CurrentDataCanRemain->CurrentDataItem->' + currentDataItem);

        if (currentDataItem.indexOf('b_') != -1)
        {
            // its a bend
            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('Bend->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;
        }

        var originalTop = this.DropElement.getAttribute('OriginalTop');
        var originalLeft = this.DropElement.getAttribute('OriginalLeft');

        if (originalLeft && originalTop)
        {
            this.DropElement.style.top = originalTop + 'px';
            this.DropElement.style.left = originalLeft + 'px';
        }
        else
        {
            this.DropElement.style.visibility = 'hidden';
        }
    }
}