//-------------------------------------------//
//  Global object                            //
//-------------------------------------------//
var wtedit_page={
    dblClickElement: undefined,
    gEditor:'',
    gHost:''
};

//------------------------------------------//
//  jQuery Document Ready                   //
//------------------------------------------//
$(document).ready(function(){
     
    //wt_manager/index.htm
    var pathname=location.pathname;
    
    //http:
    var protocol=location.protocol;
 
    //localhost:1149
    var host=location.host;
    
    //set the global variable
    wtedit_page.gHost=host;

    
    var ajaxURL, managerURL;   
    
    //put editor html at the bottom of the page   
    setEditor();
    
    $(wtedit_page.gEditor).appendTo('body');
    
    //clear feedback
    $('#lblFeedback').text('');
    
    wtedit_constant.viewMode = 1; // default WYSIWYG
    
    //--------------------------------------//
    //  Set the ajax destination url        //
    //--------------------------------------//  
    if(host==='localhost:1149')
    {
        //local host
        ajaxURL=protocol + '//' + host + '/wt_manager/wtedit/net/NoPage.ashx';
        managerURL=protocol + '//' + host + '/wt_manager/wtedit/net/WtManager.aspx';
    }
    else
    {
        //everyone else
         ajaxURL=protocol + '//' + host + '/wtedit/net/NoPage.ashx';
         managerURL=protocol + '//' + host + '/wtedit/net/WtManager.aspx';
    }
         
    //--------------------------------------//
    //  Ajax:  get and set content areas    //
    //  for this page.                      //
    //--------------------------------------//  
     $.ajax({
        url: ajaxURL,
        data: {'ajax_call':'contentarea_get', 'pathname': pathname, 'protocol':protocol, 'host':host},
        type: 'POST',
        dataType: 'text',
        success: function(data){
              
            //JSON array
            var myObjectArray = eval('(' + data + ')');
                        
            //set the content areas
            var i;
            for(i=0; i<myObjectArray.length;i+=1){
                $('#' + myObjectArray[i].css_id).html(myObjectArray[i].html_content)
            }
                    
        },
        error: function(data){
            alert(data);
        }
      });
      
    
    //--------------------------------------//
    //  Display editor.                     //
    //--------------------------------------//   
    $('.wtedit').dblclick(function (e) {
     
        //fade the page
        $('#innerBody').fadeTo('slow', 0.8)

        //sets editor top at mouse click
        $('#wtedit').css('top', (e.pageY - 200) + 'px');

        //clear any error
        $('#lblFeedback').text('');
         
        //clear pass phrase
        $('#txtPassPhrase').val('');

        //save the element reference
        wtedit_page.dblClickElement=this;
                   
        //add content
        var html = $(this).html();
                
        //show the edit control
        $('#wtedit').slideDown('slow');
        
        //reset selects
        $('.listClass').val('');
        
        //design mode
        if($.browser.msie)
        {
            //internet explorer
            var doc = document.getElementById('iView').contentWindow.document;
            doc.open();
            doc.write(html);
            doc.close(); 

            //turn on design mode
            iView.document.designMode = 'On'; 

            //set focus
            iView.focus();
        }
        else if ($.browser.mozilla)
        {
            //mozilla
            //set content
            document.getElementById('iView').contentWindow.document.body.innerHTML = html;
            //turn on design mode
            document.getElementById('iView').contentDocument.designMode="on";
            //set focus
            document.getElementById('iView').contentWindow.focus();
        }
        else
        {
            alert('Only Internet Explorer and FireFox currently supported.');
        }
                                  
    });
     
    //--------------------------------------//
    //  Cancel-hide editor.                 //
    //--------------------------------------//     
    $('#btnCancel').click(function () {   
        //restore the page
        $('#innerBody').fadeTo('slow', 1)
   
        $('#wtedit').slideUp();

    });
    
    //--------------------------------------//
    //  Save content to db.                 //
    //--------------------------------------//  
    $('#btnSave').click(function(){
    
        //clear any error
        $('#lblFeedback').text('');
        
        //css_id
        var css_Id=$(wtedit_page.dblClickElement).attr('id');

        //pass phrase
        var passphrase=$('#txtPassPhrase').val();
         
        if(passphrase==='')
        {
            $('#lblFeedback').text('Passphrase?');
            $('#txtPassPhrase').focus();

            return;
        }
         
        var contentArea;
        if(wtedit_constant.viewMode === 1)
        { 
            //html
            if($.browser.msie)
            {
                //internet explorer
                contentArea = document.getElementById('iView').contentWindow.document.body.innerHTML;
            }
            else if ($.browser.mozilla)
            {
                //mozilla
                contentArea = document.getElementById('iView').contentWindow.document.body.innerHTML;
            } 
            else
            {
                alert('Only Internet Explorer and FireFox currently supported.');
            }
        }
        else
        {
            //text
            if($.browser.msie)
            {
                //internet explorer
                contentArea = document.getElementById('iView').contentWindow.document.body.innerText;
            }
            else if ($.browser.mozilla)
            {
                //mozilla    
                var html = document.getElementById('iView').contentWindow.document.createRange();
                html.selectNodeContents(document.getElementById('iView').contentWindow.document.body);
                contentArea = html.toString();
            } 
            else
            {
                alert('Only Internet Explorer and FireFox currently supported.');
            }
        }
    
        //--------------------------------------//
        //  Ajax:  save content area changes.   //
        //--------------------------------------//                   
        $.ajax({
            url: ajaxURL,
            type: 'POST',
            data: {'ajax_call':'contentarea_edit', 'css_id':css_Id, 'html_content':contentArea, 'passphrase':passphrase},
            dataType: 'text',
            success: function(data){
                if(data==='Content Edited.')
                {
                    //success so set page content
                    $('#' + css_Id).html(contentArea);
                            
                    //show feedback
                    $('#lblFeedback').text(data);
                }
                else if(data==='No Access.')
                {
                    //show feedback
                    $('#lblFeedback').text('Bad Passphrase.');
                    $('#txtPassPhrase').val('');
                    $('#txtPassPhrase').focus();
                };
            },
            error: function(data){
                $('#lblFeedback').text(data);
            }
        });

    });
    
    //--------------------------------------//
    //  Navigate to image manager page.     //
    //--------------------------------------//          
    $('#btnImageMgr').click(function(){ 
        window.open( managerURL + '?nav=images')
    });
    
    //------------------------------------------//
    //  Navigate to content area details page.  //
    //------------------------------------------// 
    $('#btnDetails').click(function(){ 
        var contentId=$(wtedit_page.dblClickElement).attr('id');
        window.open(managerURL + '?path=' + pathname + '&cssid=' + contentId)
    });
    
    //--------------------------------------//
    //  Ajax:  get image paths for editor   //
    //    drop down list                    //
    //--------------------------------------//
    $.ajax({
        url: ajaxURL,
        data: {'ajax_call':'image_getPaths'},
        type: 'POST',
        dataType: 'text',
        success: function(data){             
            $('#selImage').html(data);                  
        },
        error: function(data){
            alert(data);
        }
    });

    //--------------------------------------//
    //  Button event handling - styling.    //
    //--------------------------------------// 
    $('.butClass').mouseover(function(e){ 
        $(this).css('border-color','#000000');
        $(this).css('background-color','#B5BED6');
        $(this).css('cursor','hand');
    });

    $('.butClass').mouseout(function(e){ 
        $(this).css('border-color','#D6D3CE');
        $(this).css('background-color','#D6D3CE');
    });

    $('.butClass').mouseup(function(e){ 
        $(this).css('border-color','#B5BED6');
    });

    $('.butClass').mousedown(function(e){ 
        $(this).css('border-color','#8492B5');
    });

    //----------------------------------------//
    //  Button event handling - branch to     //
    //  action method depending on control id.//
    //----------------------------------------// 
    $('.butClass').click(function(e){ 
        var btnId=$(this).attr('id');
        switch(btnId)
        {
            case 'btnBold':
                wtedit_fn.doBold();
                break;
            case 'btnItalic':
                wtedit_fn.doItalic();
                break;
            case 'btnUnderline':
                wtedit_fn.doUnderline();
                break;
            case 'btnLeft':
                wtedit_fn.doLeft();
                break;
            case 'btnCenter':
                wtedit_fn.doCenter();
                break;
            case 'btnRight':
                wtedit_fn.doRight();
                break;
            case 'btnOrderedList':
                wtedit_fn.doOrdList();
                break;
            case 'btnBulletedList':
                wtedit_fn.doBulList();
                break;
            case 'btnTextColor':
                wtedit_fn.doForeCol();
                break;
            case 'btnBackgroundColor':
                wtedit_fn.doBackCol();
                break;
            case 'btnLink':
                wtedit_fn.doLink();
                break;
            case 'btnToggleMode':
                wtedit_fn.doToggleView();
                break;
            default:
                alert('Button Error');
        }
    });

    //--------------------------------------------//
    //  Drop down list event handling - branch to //
    //  action method depending on control id.    //
    //--------------------------------------------//
    $('.listClass').change(function(e){ 
        var listId=$(this).attr('id');
        var selectOption=$(this).val();
        switch(listId)
        {
            case 'selFont':
                wtedit_fn.doFont(selectOption);
                break;
            case 'selSize':
                wtedit_fn.doSize(selectOption);
                break;
            case 'selHeading':
                wtedit_fn.doHead(selectOption);
                break;
            case 'selImage':
                wtedit_fn.doImage(selectOption);
                break;
            default:
                alert('Select List Error');
        }
        
        //reset selects
        $('.listClass').val('');
    });
   
});

//--------------------------------------//
//  Sets the editor html.               //
//--------------------------------------// 
function setEditor(){
    wtedit_page.gEditor='<div id="wtedit" class="wtEditBox"> \
        <div id="logo" align="center"> \
            <table cellpadding="10"> \
                <tr valign="top"><td><img src="http://' + wtedit_page.gHost + '/wtedit/images/bmf_logo.gif" border="0" /></td> \
                <td><input id="txtPassPhrase" type="text" size="15" /><br /><br /><span class="wtedit_text"> <label id="lblFeedback" class="wtedit_feedback"></label></span></td></tr> \
            </table> \
        </div> \
        <div id="navigation" align="center"> \
                <span id="btnSave" value="Save">Save</span>&nbsp;&nbsp;|&nbsp;&nbsp; \
                <span id="btnCancel" value="Close">Close</span>&nbsp;&nbsp;|&nbsp;&nbsp; \
                <span id="btnDetails" value="Details">Details</span>&nbsp;|&nbsp;&nbsp;&nbsp; \
                <span id="btnImageMgr" value="Image Mg">File Mgr</span> \
        </div> \
        <table id="edit_frame" cellpadding="0" width="100%"> \
            <tr> \
                <td colspan="2"> \
                    <table id="tblCtrls" width="517px" height="30px" border="0" cellspacing="0" cellpadding="0" \
                        bgcolor="#D6D3CE"> \
                        <tr> \
                            <td class="tdClass" width="80%"> \
                                <img id="btnBold" alt="Bold" class="butClass topRow" src="http://' + wtedit_page.gHost + '/wtedit/images/editor/bold.gif" \
                                    title="Bold"> \
                                <img id="btnItalic" alt="Italic" class="butClass topRow" src="http://' + wtedit_page.gHost + '/wtedit/images/editor/italic.gif" \
                                    title="Italic"> \
                                <img id="btnUnderline" alt="Underline" class="butClass topRow" src="http://' + wtedit_page.gHost + '/wtedit/images/editor/underline.gif" \
                                    title="Underline"> \
                                <img id="btnLeft" alt="Left" class="butClass topRow" src="http://' + wtedit_page.gHost + '/wtedit/images/editor/left.gif" \
                                    title="Align Left"> \
                                <img id="btnCenter" alt="Center" class="butClass topRow" src="http://' + wtedit_page.gHost + '/wtedit/images/editor/center.gif" \
                                    title="Align Center"> \
                                <img id="btnRight" alt="Right" class="butClass topRow" src="http://' + wtedit_page.gHost + '/wtedit/images/editor/right.gif" \
                                    title="Align Right"> \
                                <img id="btnOrderedList" alt="Ordered List" class="butClass topRow" src="http://' + wtedit_page.gHost + '/wtedit/images/editor/ordlist.gif" \
                                    title="Ordered List"> \
                                <img id="btnBulletedList" alt="Bulleted List" class="butClass topRow" src="http://' + wtedit_page.gHost + '/wtedit/images/editor/bullist.gif" \
                                    title="Bulleted List"> \
                                <img id="btnTextColor" alt="Text Color" class="butClass topRow" src="http://' + wtedit_page.gHost + '/wtedit/images/editor/forecol.gif" \
                                    title="Text Color"> \
                                <img id="btnBackgroundColor" alt="Background Color" class="butClass topRow" src="http://' + wtedit_page.gHost + '/wtedit/images/editor/bgcol.gif" \
                                    title="Background Color"> \
                                <img id="btnLink" alt="Hyperlink" class="butClass topRow" src="http://' + wtedit_page.gHost + '/wtedit/images/editor/link.gif" \
                                    title="Link"> \
                            </td> \
                            <td class="tdClass" colspan="1" width="20%" align="right"> \
                                <img id="btnToggleMode" alt="Toggle Mode" class="butClass" src="http://' + wtedit_page.gHost + '/wtedit/images/editor/mode.gif"> \
                                &nbsp;&nbsp;&nbsp; \
                            </td> \
                        </tr> \
                    </table> \
                    <iframe id="iView" style="width: 515px; height: 205px; "></iframe> \
                    <table width="517px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE"> \
                        <tr> \
                            <td class="tdClass" colspan="1" width="100%" align="center"> \
                                <select id="selFont" class="listClass"> \
                                    <option value="">-- Font --</option> \
                                    <option value="Arial">Arial</option> \
                                    <option value="Courier">Courier</option> \
                                    <option value="Sans Serif">Sans Serif</option> \
                                    <option value="Tahoma">Tahoma</option> \
                                    <option value="Verdana">Verdana</option> \
                                    <option value="Wingdings">Wingdings</option> \
                                </select> \
                                &nbsp;&nbsp;&nbsp; \
                                <select id="selSize" class="listClass"> \
                                    <option value="">-- Size --</option> \
                                    <option value="1">Very Small</option> \
                                    <option value="2">Small</option> \
                                    <option value="3">Medium</option> \
                                    <option value="4">Large</option> \
                                    <option value="5">Larger</option> \
                                    <option value="6">Very Large</option> \
                                </select> \
                                &nbsp;&nbsp;&nbsp; \
                                <select id="selHeading" class="listClass"> \
                                    <option value="">-- Heading --</option> \
                                    <option value="Heading 1">H1</option> \
                                    <option value="Heading 2">H2</option> \
                                    <option value="Heading 3">H3</option> \
                                    <option value="Heading 4">H4</option> \
                                    <option value="Heading 5">H5</option> \
                                    <option value="Heading 6">H6</option> \
                                </select> \
                                &nbsp;&nbsp;&nbsp; \
                                <select id="selImage" class="listClass"> \
                                </select> \
                            </td> \
                        </tr> \
                    </table> \
                </td> \
            </tr> \
        </table> \
    </div>';
};