// JScript File
function changeTab(name) {
    document.getElementById("TabPictures").style.visibility = "hidden";
    document.getElementById("TabSongs").style.visibility = "hidden";
    document.getElementById("TabPreferences").style.visibility = "hidden";
    document.getElementById("TabPictures").style.display = "none";
    document.getElementById("TabSongs").style.display = "none";
    document.getElementById("TabPreferences").style.display = "none";
    document.getElementById("TabPictures-bar").style.visibility = "hidden";
    document.getElementById("TabSongs-bar").style.visibility = "hidden";
    document.getElementById("TabPreferences-bar").style.visibility = "hidden";
    document.getElementById(name).style.visibility = "visible";
    document.getElementById(name).style.display = "inline";
    document.getElementById(name + "-bar").style.visibility = "visible";
}

function load() {
    tabsLoaded();
}

function ShowPictures()
{
    var cont = document.getElementById("ctl00_ContentPlaceHolder1_SpanPictures");
    var htmltext = "";    
    if (cont != null)
    {
        var text = cont.innerHTML;

        var arrayimages = text.split("|");

        var firstline = arrayimages[0].split("$");
        var userid = firstline[0];
        var userguid = firstline[1];
        for (var i = 1; i < arrayimages.length - 1; i++)
        {
            var imagedetails = arrayimages[i].split("$");
            var command = "Edit";
            if ((imagedetails[1] == "") && (imagedetails[2] == ""))
            {
                command = "Add";
            }
            htmltext +=
                "<span id='UserInfoBlock" + imagedetails[0] + "' class='userInfo' >" +
                    //"<div class='lb'><div class='rb'><div class='bb'><div class='blc'><div class='brc'><div class='tb'><div class='tlc'><div class='trc'>" +
                    "<table class='infoTable'>" +
                        "<tr>" +
                            "<td class='infoImageCell'><img class='infoImage' alt='User image' " + 
                            "src='http://rc0.nobexinc.com/UserInfoImage.ashx?UserInfoID=" + imagedetails[0] + "&UserID=" + userid + "&UserGUID=" + userguid + "' /></td>" +
                        "</tr>" +
                    "</table>" +
                    "<div id='ViewPanel" + imagedetails[0] + "' style='display:block;'>" +
                        "<div class='viewPanel'>" +
                            "<span id='LabelTitle" + imagedetails[0] + "'>" + imagedetails[1] + "&nbsp;</span><br />" +
                            "<span id='LabelSubtitle" + imagedetails[0] + "'>" + imagedetails[2] + "&nbsp;</span><br />" +
                        "</div>" + 
                        "<table class='infoTable'>" + 
                            "<tr>" +
                            "<td class='cellTextL'><a id='CommandEditCaption" + imagedetails[0] + "' href='javascript:editCaption(" + + imagedetails[0] + ");'>" + command + " Caption</a></td>" +
                            "<td class='cellTextR'><a href='javascript:removeImage(" + imagedetails[0] + ");'>Remove Picture</a></td>" + 
                            "</tr>" + 
                        "</table>" +
                    "</div>" + 
                    "<div id='EditPanel" + imagedetails[0] + "' style='display:none;'>" +
                        "<div class='editPanel'>" +
                            "<input id='TextBoxTitle" + imagedetails[0] + "' value='" + imagedetails[1] + "' /><br />" +
                            "<input id='TextBoxSubtitle" + imagedetails[0] + "' value='" + imagedetails[2] + "' /><br />" +
                        "</div>" +
                        "<table class='infoTable'>" +
                            "<tr>" +
                            "<td class='cellTextL'><a class='linkCommand' href='javascript:editOK(" + imagedetails[0] + ");'>OK</a></td>" +
                            "<td class='cellTextR'><a class='linkCommand' href='javascript:editCancel(" + imagedetails[0] + ");'>Cancel</a></td>" +
                            "</tr>" +
                        "</table>" +
                    "</div>" +
                    //"</div></div></div></div></div></div></div></div>" + 
                "</span>";

        }
        cont.innerHTML = "";
    }
    if (document.getElementById("HtmlPictures") != null)
    {
        if (htmltext == "") {
            if (document.getElementById("HtmlPictures").innerHTML == "") {
                document.getElementById("HtmlPictures").innerHTML =
                    "<div class='infoImageSample'>" +
                //"<div class='lb'><div class='rb'><div class='bb'><div class='blc'><div class='brc'><div class='tb'><div class='tlc'><div class='trc'>" +
                    "You currently have no pictures in your account. <br /><br />To upload a picture, enter the file name of the picture in the box below and press the 'Add Picture' button.<br /><br />" +
                    "Once uploaded, your pictures will appear within Nobex Radio Companion, replacing the advertisements:<br /><br />" +
                    "<table class='infoTable'>" +
                        "<tr>" +
                            "<td class='infoImageCell'><img style='border-width:0px;' alt='User image' " +
                            "src='images/MyAccount1.png' /></td>" +
                        "</tr>" +
                    "</table>" +
                //"</div></div></div></div></div></div></div></div>" + 
                    "</div>" +
                    "";
            }
        } 
        else
        {
            document.getElementById("HtmlPictures").innerHTML = htmltext;
        }
    }
}

function tabsLoaded() {
    changeTab("TabPictures");
    
    ShowPictures();

    PageMethods.PMGetSongs(onCompletedGetSongs, onFailed);
}

function ShowSongs(text)
{
    var arrayimages = text.split("|");

    var htmltext = "";
    for (var i = 0; i < arrayimages.length - 1; i++)
    {
        var imagedetails = arrayimages[i].split("$");
        if (imagedetails.length == 7) {
            htmltext += "<span class='songSpan'>" +
            //"<div class='lb'><div class='rb'><div class='bb'><div class='blc'><div class='brc'><div class='tb'><div class='tlc'><div class='trc'>" +
                        "<table><tr><td><img class='songImage' src='ItemImage.ashx?t=Song&i=" + imagedetails[1] + "&tilt=0&factor=1' />" +
                        "</td><td><b>" + imagedetails[2] + "</b><br>" +
                        imagedetails[3] + "<br>" +
                        imagedetails[5].substr(0, 10).replace(/-/g, '/') + "<br>" +
                        "Get it from <a href=\"" + imagedetails[4] + "\">iTunes</a>" +
                        " or <a href=\"" + imagedetails[6] + "\">Amazon</a>" +
                        "</td></tr></table>" +
            //"</div></div></div></div></div></div></div></div>" + 
                        "</span>";
        }
    }
    if (document.getElementById("HtmlSongs") != null)
    {
        if (htmltext == "")
        {
            document.getElementById("HtmlSongs").innerHTML = "You currently have no song requests in your account. <br />";
        } 
        else
        {
            document.getElementById("HtmlSongs").innerHTML = htmltext;
        }
    }    
}

function onCompletedGetSongs(result, context, methodName) {
    ShowSongs(result);
    ShowPictures();
    document.getElementById("waiting").style.visibility = "hidden";
    document.getElementById("waiting").style.display = "none";        
}


function ChangePassword()
{
    var ctrlold = document.getElementById("ctl00_ContentPlaceHolder1_TextBoxOldPassword");
    var ctrlnew1 = document.getElementById("ctl00_ContentPlaceHolder1_TextBoxNewPassword");
    var ctrlnew2 = document.getElementById("ctl00_ContentPlaceHolder1_TextBoxNewPassword2");
    var passold = "";
    var passnew = "";
    var passnew2 = "";
    if (ctrlold != null)
    {
        passold = ctrlold.value;
    }
    if (ctrlnew1 != null)
    {
        passnew = ctrlnew1.value;
    }
    if (ctrlnew2 != null)
    {
        passnew2 = ctrlnew2.value;
    }
    
    if ((passold == "") || (passnew == "") || (passnew2 == ""))
    {
        window.alert("Please enter your existing and new passwords and try again.");
        return;
    }
    if (passnew != passnew2)
    {
        window.alert("Your new password does not match the Confirm Password field. Please try again.");
        return;
    }
    PageMethods.PMChangePassword(passold, passnew, onCompletedMessage, onFailed);
}
    
function EmailPassword()
{
    var email = "";
    var ctrl = document.getElementById("ctl00_ContentPlaceHolder1_EmailAddress");
    if (ctrl != null)
    {      
        email = ctrl.value;
        if (email == "")
        {
            window.alert("Please enter your email address above and click this again.");
            return;
        }
    }
    PageMethods.PMEmailPassword(email, onCompletedMessage, onFailed);
}    

function editCaption(userInfoID)
{
    //Hide the view panel and show the Edit panel
    var viewPanel = document.getElementById("ViewPanel" + userInfoID);
    viewPanel.style.display = "none";

    var editPanel = document.getElementById("EditPanel" + userInfoID);
    editPanel.style.display = "inline";
}

function editOK(userInfoID)
{
    //Update labels with new text (from textboxes)
    var labelTitle = document.getElementById("LabelTitle" + userInfoID);
    var textBoxTitle = document.getElementById("TextBoxTitle" + userInfoID);
    
    setText(labelTitle, textBoxTitle.value);

    var labelSubtitle = document.getElementById("LabelSubtitle" + userInfoID);
    var textBoxSubtitle = document.getElementById("TextBoxSubtitle" + userInfoID);
    setText(labelSubtitle, textBoxSubtitle.value);
    
    //Update the edit command label itself (Add or Edit)
    var commandEditCaption = document.getElementById("CommandEditCaption" + userInfoID);
    var textValue = (getText(labelTitle).length == 0 && getText(labelSubtitle).length == 0 ? "Add" : "Edit") + " Caption";
    setText(commandEditCaption, textValue);

    //Send new values to server            
    PageMethods.OnEditCaptionOK(userInfoID, textBoxTitle.value, textBoxSubtitle.value, onCompleted, onFailed);
    
    //Show the View panel and hide the Edit panel
    var viewPanel = document.getElementById("ViewPanel" + userInfoID);
    viewPanel.style.display = "block";

    var editPanel = document.getElementById("EditPanel" + userInfoID);
    editPanel.style.display = "none";
}

function editCancel(userInfoID)
{
    //Revert textbox values to original text (from labels)
    var labelTitle = document.getElementById("LabelTitle" + userInfoID);
    var textBoxTitle = document.getElementById("TextBoxTitle" + userInfoID);
    textBoxTitle.value = getText(labelTitle);
    
    var labelSubtitle = document.getElementById("LabelSubtitle" + userInfoID);
    var textBoxSubtitle = document.getElementById("TextBoxSubtitle" + userInfoID);
    textBoxSubtitle.value = getText(labelSubtitle);

    //Show the View panel and hide the Edit panel
    var viewPanel = document.getElementById("ViewPanel" + userInfoID);
    viewPanel.style.display = "block";

    var editPanel = document.getElementById("EditPanel" + userInfoID);
    editPanel.style.display = "none";
}

function removeImage(userInfoID)
{
	var answer = confirm("Are you sure you want to remove this picture?")
	if (answer)
	{
        //Send command to server            
        PageMethods.OnRemoveImage(userInfoID, onCompleted, onFailed);
        
        //Hide entire user info block
        var userInfoBlock = document.getElementById("UserInfoBlock" + userInfoID);
        userInfoBlock.style.display = "none";
    }
}

function getText(element)
{
    //See Javascript - The Definitive Guide, page 262
    
    /*@cc_on
        @if (@_jscript)
            return element.innerText;   //IE
        @else*/
            return element.textContent; //Other browsers
        /*@end
    @*/
}

function setText(element, value)
{
    //See Javascript - The Definitive Guide, page 262
    
    /*@cc_on
        @if (@_jscript)
            element.innerText = value;   //IE
        @else*/
            element.textContent = value; //Other browsers
        /*@end
    @*/
}

function onCompleted(result, context, methodName)
{
}

function onCompletedMessage(result, context, methodName)
{
    window.alert(result);
}

function onFailed(err, context, methodName) {
    document.getElementById("waiting").style.visibility = "hidden";
    document.getElementById("waiting").style.display = "none";        
    //window.alert(err.get_message());
}