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 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 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 = "<img id='" + newImageId + "'"
                        + "  name='" + newImageId + "'"
                        + "  alt='Bend'"
                        + "  src='" + strImageThemeRootPath + "/" + imgData + ".gif'"
                        + "  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'/>";
                        
        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';
        }
    }
}