var NewItemCounterTabGrid = 0;
var newElementName = '';
var DEFAULT_SCALE = 32;
var SCALE_WIDTH = 660;
var HIDDEN_DATA_TRIPLET_SEPARATOR = '|';
var HIDDEN_DATA_ITEM_SEPARATOR = ':';
var HIDDEN_DATA_CHORD_LIST_GROUP_SEPARATOR = '|';
var HIDDEN_DATA_CHORD_LIST_ITEM_SEPARATOR = '-';


function GetGridScale(ownerPrefix)
{
    var gridScaleList = document.getElementById(ownerPrefix + "ddlGridScale");
    var selectedValue = gridScaleList.options[gridScaleList.selectedIndex].value;
    
    if (selectedValue == 'none')
        return 660;
    else
        return selectedValue;
}


function RenderContentsTabGrid(divContainer)
{
    for (i=0; i<document.images.length; i++)
    { 
        if (document.images[i].style.visibility == 'hidden')
            continue;
            
        // if the image has a HorizontalPosition defined we can assume it is to be positioned on a tab grid
        if (document.images[i].getAttribute('HorizontalPosition'))
        {
            if (document.images[i].getAttribute('OwnerPrefix') == document.getElementById(divContainer).getAttribute('OwnerPrefix'))
            {
                // we are positioning an image for this grid
                
                var toolBarImageId = document.images[i].getAttribute('OwnerPrefix') + "tbi";
                
                if (document.images[i].getAttribute('id').indexOf(toolBarImageId) != -1)
                {
                    // its a tool bar image:
                    new TabGridContainer(document.images[i], DEFAULT_SCALE).SetPosition(document.images[i]);
                }
                else
                {
                    // its an item on the grid itself
                    var gridScale = GetGridScale(document.images[i].getAttribute('OwnerPrefix'));
                    new TabGridContainer(document.images[i], gridScale).SetPosition(document.images[i]);
                }
            }
        }            
    }
}




function PadLyricsTextBox(txtBoxId, numSpaces) 
{
    // if the value of the text box is shorter than 95 chars then pad with spaces up to this
    var txtBox = document.getElementById(txtBoxId);
    if (txtBox.value.length < numSpaces)
    {
        for (i=txtBox.value.length; i<numSpaces; i++)
        {
            txtBox.value += ' ';
        }
    }
}




function CleanUpData(str)
{
    str = str.replace(HIDDEN_DATA_TRIPLET_SEPARATOR + HIDDEN_DATA_TRIPLET_SEPARATOR, HIDDEN_DATA_TRIPLET_SEPARATOR);

    if (str.charAt(0) == HIDDEN_DATA_TRIPLET_SEPARATOR)
        str = str.substr(1);

    if (str.charAt(str.length - 1) == HIDDEN_DATA_TRIPLET_SEPARATOR)
        str = str.substr(0, str.length-1);

    return str;
}





function tabGridChordListChanged(ddlChordBox, dropChordId)
{
    Log('TabGridChordListChanged->');
    
    document.getElementById(dropChordId).setAttribute('ListOwnerId', ddlChordBox.getAttribute('id'));
    
    var chordText = ddlChordBox.options[ddlChordBox.selectedIndex].text;
    var chordData = ddlChordBox.options[ddlChordBox.selectedIndex].value;       
    var dropChord = document.getElementById(dropChordId);
    
    if (chordData == '')
    {
        alert('This chord cannot be dragged on to the grid as it doesn\'t contain any data');
        return;
    }

    var chordDataArray = chordData.split(HIDDEN_DATA_CHORD_LIST_GROUP_SEPARATOR);
    var chordHtml = '';
    for(i=0;i<chordDataArray.length;i++)
    {
        if (chordHtml != '')
        {
            chordHtml += '<br/>';
        }
        
        var itemData = chordDataArray[i].split(HIDDEN_DATA_CHORD_LIST_ITEM_SEPARATOR);
        chordHtml += itemData[1]
    }
    dropChord.innerHTML = chordHtml;
    dropChord.style.visibility = 'visible';

    return;        
}




function tabGridScaleListChanged(list, divId, tabGridContainer)
{
    // change the spacing of the background grid
    // and also re-position the items on the new spacing
    
    var container = document.getElementById(divId);
    var selectedValue = list.options[list.selectedIndex].value;
    
    var html = '<table style="width:660px;" cellpadding="0" cellspacing="0" border="0"><tr>';

    if (selectedValue != 'none')
    {
        var cols = parseInt(selectedValue) + 1;
        var width = SCALE_WIDTH / cols;
        for (i = 0; i < cols; i++)
        {
            if (i == 0)
                html += '<td style="width:' + width + 'px;"></td>';
            else
                html += '<td align="left" style="width:' + width + 'px;"><img src="' + strImageThemeRootPath + '/1x1.gif" style="width:1px;height:50px"></td>';
        }
    }

    html += '</tr></table>';
    container.innerHTML = html;
    
    // now re-position the images
    RenderContentsTabGrid(tabGridContainer);
}



function UploadIFrameReturn(mode, iframeResult, keepWindowOpen, message, playLinkId, websiteRoot, fileId, songId, barOrdinal, iFrameName, uploadWindowDivId)
{
    var playLink = document.getElementById(playLinkId);
    
    if (iframeResult == 'OK')
    {
        // set values on the forms action in the iframe for postback access
        SetFormAction(uploadWindowDivId, iFrameName, songId, barOrdinal, playLinkId, fileId)
        
        
        if (mode == 'UPLOAD')
        {   
            playLink.href = websiteRoot + "/Files/SoundFile.aspx?FileId=" + fileId;
            playLink.style.cursor = 'hand';  
        }
        else if (mode == 'DELETE')
        {
            playLink.href = "javascript:alert('No song file is currently associated with this bar')";
            playLink.style.cursor = 'hand';
        }
    }
    
    // tell the user what happened:
    alert(message);
    
    // close the upload window:
    if (!keepWindowOpen)
        document.getElementById(uploadWindowDivId).style.display = 'none';
}







function upload_click(iFrameWindowDivId, iFrameId, type, buttonId, divId, songId, barId, barOrdinal, playLinkId, fileId)
{
    var btn = document.getElementById(buttonId);
    var dv = document.getElementById(divId);

    var halfButtonWidth = btn.offsetWidth / 2;
    var aestheticVerticalAdjust = 3;         
    
    if (type == 'UPLOAD')
    {
        if (barId == 0)
        {
            alert('The bar you are currently working on has not yet been saved as part of the song.\nPlease save the song and then you can upload a sound file for this bar.');
            return;
        }
        
        //dv.style.visibility = 'visible';
        dv.style.display = 'block';
    
        var halfDivWidth = dv.offsetWidth / 2;
        dv.style.top = (getY(btn) - aestheticVerticalAdjust - dv.offsetHeight) + "px";
        dv.style.left = ((getX(btn) + halfButtonWidth) - (halfDivWidth)) + "px";
            
//        // create the new action for the form
//        SetFormAction(iFrameWindowDivId, iFrameId, songId, barOrdinal, playLinkId, fileId);
    }
}


function SetFormAction(iFrameWindowDivId, iFrameId, songId, barOrdinal, playLinkId, fileId)
{
    var iFrameDoc = document.getElementById(iFrameId).contentWindow;
    var action = iFrameDoc.document.forms[0].action;
    
    // strip out any previous query string items:
    if (action.indexOf('?') != -1)
        action = action.split('?')[0];
    
    // set the action on the form in the iframe for postback access
    iFrameDoc.document.forms[0].action = action 
                                        + '?SongId=' + songId 
                                        + '&BarOrdinal=' + barOrdinal 
                                        + '&PlayLinkId=' + playLinkId 
                                        + '&PageAction=UPLOAD'
                                        + '&IFrameId=' + iFrameId 
                                        + '&UploadWindowDivId=' + iFrameWindowDivId
                                        + '&FileId=' + fileId;
}








function close_upload_window(closeWindowId)
{
    var div = document.getElementById(closeWindowId);
    div.style.display = 'none';
}




function CopyTabGrid(action, ordinal)
{
    var hiddenCopyData = document.getElementById('hiddenCopyAction');    
    hiddenCopyData.value = action + "-" + ordinal;
}


// used to determine if an item is being dragged that needs to use 
// external position calculators (ie not inside the 0,0 positioning of the grid)
var IsExternalDragItem = false; 

var ModifierList;
var ModifierListOwnerPrefix;
var ModifierWindow;
var ModifierOwningGrid;

function ModifierListChanged(list, tabGridId)
{
    var windowId = list.options[list.selectedIndex].value;
    
    ModifierList = list;
    ModifierListOwnerPrefix = list.getAttribute('OwnerPrefix');
    ModifierWindow = document.getElementById(windowId);
    ModifierOwningGrid = document.getElementById(tabGridId);
    
    if (!ModifierWindow)
    {
        alert('Cant find modifier window');
        return;
    }
    
    // hide all modifier windows before making the chosen one visible
    document.getElementById('divBendUp').style.visibility = 'hidden';
//    document.getElementById('divBendDown').style.visibility = 'hidden';
//    document.getElementById('divPreBend').style.visibility = 'hidden';
    document.getElementById('divHammerPull').style.visibility = 'hidden';
    document.getElementById('divSlideUp').style.visibility = 'hidden';
    document.getElementById('divSlideDown').style.visibility = 'hidden';
//    document.getElementById('divTrill').style.visibility = 'hidden';
//    document.getElementById('divTremolo').style.visibility = 'hidden';
//    document.getElementById('divPalmMute').style.visibility = 'hidden';
//    document.getElementById('divTextModifier').style.visibility = 'hidden';
    
    switch (ModifierList.value)
    {
        case "none":
            ModifierWindow.style.visibility = 'hidden';
            break;
        case "divBendUp":
        case "divBendDown":
        case "divPreBend":
        case "divSlideUp":
        case "divSlideDown":
        case "divHammerPull":
        case "divTrill":
        case "divTremolo":
        case "divPalmMute":
        case "divTextModifier":
            ModifierWindow.style.visibility = 'visible';
            ModifierWindow.style.top = getY(list) + "px";
            ModifierWindow.style.left = getX(list) + 100 + "px";
            break;
    }
}

function ModifierWindowClose(windowId)
{
    document.getElementById(windowId).style.visibility = 'hidden';
}


function ModifierListSlideUpLengthChanged(listLength, listStringSpan)
{
    alert(listLength.options[listLength.selectedIndex].value);
    alert(listStringSpan.options[listStringSpan.selectedIndex].value);
}

function ModifierListSlideUpStringSpanChanged(listStringSpan, listLength)
{
    alert(listStringSpan.options[listStringSpan.selectedIndex].value);    
    alert(listLength.options[listLength.selectedIndex].value);
    
}