@section('page_title')
    OSAAtoday - Editor
@stop

@section('page_sub_title')    
    Edit News Article - ID# {{ $info['article']->id }}
@stop

@section('scripts')
    @parent

    <style type="text/css">
        h3 {
            color: #000000 !important;
        }

        .success_bar {
            position: fixed;
            top: 600px;
            left: 0;
            width: 100%;
            padding: 0.25em 0;
            line-height: 1.5em;
            background-color: rgba(176, 255, 190, 0.0);
            border-bottom: 2px solid rgba(13, 88, 27, 0.50);
            border-top: 2px solid rgba(13, 88, 27, 0.50);
            z-index: 500;
        }

        .success_bar .message {
            width: 1200px;
            margin: 0 auto;
            font-size: 14pt;
            color: #151515;
        }       

        .page_functions {
            width: auto !important;
        } 

        label, .label {            
            font-weight: bold;            
            float: left;
            width: 115px;
        }

        .required {
            color: #990000;
            font-weight: bold;
            font-size: 14pt;
            position: relative;
            top: 4px;
            margin-left: 5px;
        }

        #publisher_section {
            border-top: 2px solid #ffefb0;
            border-right: 2px solid #ffefb0;
            border-left: 2px solid #ffefb0;
            border-bottom: 2px solid #ffefb0;
            padding: 0em 0.25em 1em 0.25em;
            background-color: #fff7cc;
            position: relative;
        }

        #publisher_section .more_info {
            float: right;
            margin: 15px 0.5em 0 0;
            font-size: 9pt;
        }

        #body_editor {
            height: 500px;
        }

        #photo_preview_container {
            width: 300px;
            height: 188px;
            float: right;
            border: 1px solid #d9e1e0;
            text-align: center;
            vertical-align: middle;            
            line-height: 1.5em;
            position: relative;
        }

    </style>

    <!-- Main Quill library -->
    <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>

    <!-- Quill theme stylesheet -->
    <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">    

@stop

@section('jquery_init')

    if(!window.console)
    {
        window.console = { log: $.noop, group: $.noop, groupEnd: $.noop };            
    }

    // Success bar
    $('.success_bar').animate({ 'top' : 32, 'background-color' : 'rgba(176, 255, 190, 1.0)'}, 1600, 'easeOutQuad', function ()
    {       
        $(this).delay(6000).fadeOut(4000);  

        $(this).hover(function ()
        {
            $(this).stop(true).css('opacity', '1.0');
        },
        function ()
        {
            $(this).fadeOut(4000);
        })
    });


    /* Setup the Quill editor
     *
     * Reference:
     *     https://quilljs.com/
     */
    var quill_toolbar = [
        [{ 'header': [1, 2, 3, false] }, 'blockquote'],                
        ['bold', 'italic', 'underline'],        
        [{ 'color': [] }, 'strike', { 'script': 'sub'}, { 'script': 'super' }],,
        [{ 'list': 'bullet'}, { 'list': 'ordered' }, { 'align': [] }, { 'indent': '-1'}, { 'indent': '+1' }],
        ['link'],
        ['clean']
    ];
    var quill_options = {
        formats : ['bold', 'color', 'italic', 'link', 'strike', 'script', 'underline', 'blockquote', 'header', 'indent', 'list', 'align'],
        placeholder : 'Type or paste the content of your article\'s body below ...',
        @if (!$info['author']->is_publisher and (!is_null($info['article']->submitted_at) or $info['article']->is_retired))
            readOnly : true,
        @endif
        theme : 'snow',
        modules : {
            toolbar : quill_toolbar
        }
    };
    
    // Create the Quill editor
    var quill_editor = new Quill('#body_editor', quill_options);    

    // Add tooltips to toolbar buttons
    $('.ql-formats button[type="button"]').each(function(index, element)
    {
        var item = $(element);
        var help = "";
        var button_class = item.attr('class');

        switch (button_class)
        {
            case "ql-blockquote":
                help = "Block Quote";
                break;

            case "ql-bold":
                help = "Bold";
                break;

            case "ql-italic":
                help = "Italic";
                break;

            case "ql-underline":
                help = "Underline";
                break;

            case "ql-strike":
                help = "Strikethrough";
                break;            

            case "ql-script":
                if (item.attr('value') == "super")
                {
                    help = "Superscript";
                }
                else
                {
                    help = "Subscript";
                }
                break;

            case "ql-list":
                if (item.attr('value') == "bullet")
                {
                    help = "Bullet List";
                }
                else
                {
                    help = "Numbered List";
                }
                break;

            case "ql-indent":
                if (item.attr('value') == "-1")
                {
                    help = "Indent Left";
                }
                else
                {
                    help = "Indent Right";
                }
                break;

            case "ql-link":
                help = "Hyperlink";
                break;

            case "ql-clean":
                help = "Clear Formatting";
                break;

            default:
                help = null;
        }
        

        item.attr('data-tooltip', help);           
        item.tooltip({'content' : help, 'items' : item});        
    });
    
    /*
     * Preview toolbar button
     */
    $('<span></span>')
        .addClass('ql-formats')
        .html('<button type="button" data-action="preview" style="width: auto;">Preview</button>')
        .attr('title', 'Preview Article')        
        .tooltip()         
        .appendTo('.ql-toolbar');
    $('[data-action="preview"]').on('click', function(event)
    {
        $('<div><div>')
            .addClass('ui-widget-overlay ui-front preview-loading')            
            .appendTo('body');
        $('*').css({'cursor':'wait !important'});
        
        saveBodyContent(false);        
        $('*').css({'cursor':'wait !important'});

        setTimeout(openPreviewWindow, 500);                
        
        $(this).blur();
        return true;
    });
    function openPreviewWindow()
    {
        window.open('{{ url('/today/articles/' . $info['article']->id . '/preview') }}', 'ArticlePreview', 'toolbar=0, location=0, status=0, menubar=0, scrollbars=1, resizable=0, titlebar=0, width=1065, height=850, top=25, left=100', false);
        console.log('Resetting cursor');
        $('*').css({'cursor':''});
        $('.preview-loading').remove();            
    }

    /*
     * Save toolbar button
     */
    $('<span></span>')
        .addClass('ql-formats')
        .html('<button type="button" data-action="save" style="width: auto;">Save</button>')
        .attr('title', 'Save Body Content')        
        .tooltip()         
        .appendTo('.ql-toolbar');
    $('[data-action="save"]').on('click', function(event)
    {
        event.preventDefault();

        saveBodyContent();        
    });
    function saveBodyContent(alert_success = true)
    {
        //console.log('Attempting to save body content.');

        var container = $('#body_editor');
        var last_updated = container.attr('data-last-updated');
        var is_changed = container.attr('data-changed');        

        // Do not save if there are no changes to save
        if (is_changed != 1)
        {            
            if (alert_success)
            {
                // Show success message
                $('<div class="success_bar"><div class="message">This article was successfully saved.</div></div>').prependTo('.main_content');
                $('.success_bar').animate({ 'top' : 32, 'background-color' : 'rgba(176, 255, 190, 1.0)'}, 1600, 'easeOutQuad', function ()
                {       
                    $(this).delay(6000).fadeOut(4000, function() { $(this).remove(); });  

                    $(this).hover(function ()
                    {
                        $(this).stop(true).css('opacity', '1.0');
                    },
                    function ()
                    {
                        $(this).fadeOut(4000, function() { $(this).remove(); });
                    })
                });
            }

            //console.log('Not saving, because there are no changes.');
            $('img[name="unsaved_indicator_icon"]').fadeOut(400);
            return false;
        }

        var editing_area = $('.ql-editor', container);
        var value = editing_area.html();
        console.log(value);        
        var field = container.attr('data-field');
        var type = container.attr('data-type');                        
        
        var readonly_attr = container.attr('readonly');            
        if (typeof readonly_attr !== typeof undefined && readonly_attr !== false)
        {
            return false;
        }

        var reload = false;
        var reload_attr = container.attr('data-reload');            
        if (typeof reload_attr !== typeof undefined && reload_attr !== false)
        {
            reload = true;
        }

        saveFormData(field, value, type, reload);
        
        container.attr('data-changed', 0);
        $('img[name="unsaved_indicator_icon"]').fadeOut(400);
        var last_updated = container.attr('data-last-updated');    

        if (alert_success)
        {
            // Show success message
            $('<div class="success_bar"><div class="message">This article was successfully saved.</div></div>').prependTo('.main_content');
            $('.success_bar').animate({ 'top' : 32, 'background-color' : 'rgba(176, 255, 190, 1.0)'}, 1600, 'easeOutQuad', function ()
            {       
                $(this).delay(6000).fadeOut(4000);  

                $(this).hover(function ()
                {
                    $(this).stop(true).css('opacity', '1.0');
                },
                function ()
                {
                    $(this).fadeOut(4000);
                })
            });
        }

        return true;
    }

    /*
     * Unsaved indicator
     */
    $('<div></div>')
        .addClass('ql-formats')
        .html('<img src="{{ asset('/images/icons/bullet_yellow_32px.png') }}" title="Unsaved Changes Exist" alt="" name="unsaved_indicator_icon" style="display: none; width: 24px; height: 24px;" />')
        .css({'float' : 'right', 'height' : '24px'})
        .attr('name', 'unsaved_indicator')
        .appendTo('.ql-toolbar');
    $('img[name="unsaved_indicator_icon"]').tooltip();
    
    /*
     * Quill text has changed
     */ 
    quill_editor.on('text-change', function(delta, oldDelta, source)
    {        
        var container = $('#body_editor');
        var last_updated = container.attr('data-last-updated');
        var is_changed = container.attr('data-changed');        

        if (is_changed != 1)
        {
            is_changed = 1;            
            container.attr('data-changed', 1);
            $('img[name="unsaved_indicator_icon"]').fadeIn(400);
        }

        //console.log('Source = ' + source);
    });

    /*
     * Close button     
     */
    $('.close_button')
        .button({'icons':{'primary':'ui-icon-circle-close'}})
        .tooltip()
        .css({'font-size':'9pt'})
        .on('click', function(event)
        {
            // Check if there are any unsaved changes to the content body
            var container = $('#body_editor');
            var last_updated = container.attr('data-last-updated');
            var is_changed = container.attr('data-changed');        

            if (is_changed == 0)
            {
                // No unsaved changes, OK to close
                return true;
            }
            else
            {
                // There are unsaved changes, ask
                event.preventDefault();
         
                var button = $(this);
                var href = button.attr('href');

                $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    modal : true,
                    draggable : true,
                    resizable : false,                    
                    height : 300,
                    width : 500,                    
                    title : 'Close Without Saving?',
                    buttons: [
                        {
                            text : "Save & Close",
                            'class' : "float_left",
                            icons : { primary : 'ui-icon-disk'},
                            click : function()
                                    {   
                                        // Close the dialog box
                                        $(this).dialog("close"); 

                                        $('<div><div>')
                                            .addClass('ui-widget-overlay ui-front')
                                            .appendTo('body');
                                          
                                        $('<div><div>').appendTo('body')
                                            .css('width', '225px')
                                            .css('height', '170px')
                                            .css('text-align', 'center')
                                            .css('padding', '0.5em')
                                            .position({my : "center center", at : "center center", of : window})
                                            .addClass('ui-dialog ui-widget ui-widget-content ui-corner-all ui-front')
                                            .html('<br />Saving...<br /><br /><img src="http://www.osaa.org/images/icons/ajax_loader3.gif" /><div style="font-size: 8pt; line-height: 105%; margin-top: 2em;">Please wait, this may take a while to process...</div>');

                                        saveBodyContent(false);

                                        document.location.href = href;                                        
                                    }
                        },
                        {
                            text : "Discard & Close",
                            'class' : "float_left",                            
                            icons : { primary : 'ui-icon-cancel'},
                            'style' : 'margin-left: 40px;',
                            click : function()
                                    {
                                        // Close the dialog box
                                        $(this).dialog("close");  

                                        document.location.href = href;                         
                                    }
                        },
                        {
                            text : "Return to Article",
                            'class' : "float_right",
                            'data-autofocus' : "true",
                            icons : { primary : ' ui-icon-arrowreturnthick-1-w'},
                            click : function()
                                    {
                                        // Close the dialog box
                                        $(this).dialog("close");                           
                                    }
                        }
                    ],
                    open : function ()
                        {  
                            var dialog_object = $(this);

                            dialog_object.html('<br />There are unsaved changes to the article\'s body content.  Are you sure you want to close this editor?<br /><br /><div class="small gray">You can save changes then close, close this editor discarding unsaved changes, or cancel this action and return to the article.</div>');
                            
                            $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
                            $('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');   

                            $('[data-autofocus="true"]').focus();
                        },
                    close : function ()
                        {
                            var dialog_object = $(this);
                            $(dialog_object).remove();
                        }                
                });
            }


        });

    /*
     * Preview button
     */    
    $('.preview_button')
        .button({'icons':{'primary':'ui-icon-document-b'}})
        .css({'font-size':'9pt'})
        .tooltip()
        .on('click', function(event)
        {
            event.preventDefault();

            $('<div><div>')
                .addClass('ui-widget-overlay ui-front preview-loading')            
                .appendTo('body');
            $('*').css({'cursor':'wait !important'});
            
            saveBodyContent(false);        
            $('*').css({'cursor':'wait !important'});

            setTimeout(openPreviewWindow, 500);                
            
            $(this).blur();
            return true;
        });

    /*
     * Save button
     */    
    $('.save_button')
        .button({'icons':{'primary':'ui-icon-disk'}})
        .css({'font-size':'9pt'})
        .tooltip()
        .on('click', function(event)
        {
            event.preventDefault();

            saveBodyContent();               
            
            $(this).blur();
            return true;
        });

    // Required field marker
    $('[data-required]:not([data-required-indicator])').after('<span class="required">*</span>');

    /* alertRequiredField
     *
     * Shows an alert box when attempting to save a blank value to a required field.
     */
    function alertRequiredField()
    {
        $('<div></div>')
            .appendTo('body')
            .dialog(
            {                       
                modal : true,
                draggable : false,
                resizable : false,                    
                height : 275,                    
                width : 415,                    
                title : 'Required Field',                    
                buttons: [
                    {
                        text : "OK",
                        'class' : "float_right",
                        icons : { primary : 'ui-icon-check'},
                        click : function()
                                {                                                       
                                    // Close the dialog box
                                    $(this).dialog("close"); 
                                }
                    }
                ],
                open : function ()
                    {  
                        var dialog_object = $(this);

                        dialog_object.html('<br />You\'ve entered in a blank value for a required field.  Required fields cannot be empty.<div style="font-size: 9pt; margin-top: 1em;" class="small gray note">The original value has been restored.</div>');
                        
                        $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
                        $('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');
                        $('.ui-dialog-buttonpane .ui-dialog-buttonset').append('<div style="font-size: 8pt; line-height: 1.25em; margin-top: 0.5em;">Still having trouble?<br />(503) 682-6722 x228</div>');
                    },                    
                close : function ()
                    {
                        var dialog_object = $(this);
                        $(dialog_object).remove();
                    }                
            });
    }


    /* saveFormData
     *
     * Given a form field and a value, this function will do a
     * JSON POST request to save the form's information.  The optional
     * third parameter will determine if the page will be reloaded or not.
     */
    function saveFormData(field, value, type, reload)
    {
        // Ensure the field and value parameters are provided
        if (typeof field == 'undefined' || typeof value == 'undefined' || typeof type == 'undefined')
        {
            alert('Scripting error.  Unable to save form data.');
        }

        // Get the optional reload parameter
        reload = typeof reload !== 'undefined' ? reload : false;

        // Get the form ID (same across all pages for this form)
        var form_id = {{ $info['article']->id }};

        //console.log("Attempting to save {'" + form_id + "|" + field + "' : '" + value + "'}");

        $('*').css({'cursor':'wait'});

        var jqxhr = $.ajax(
        {
            type : 'POST',                      
            url : '{{ url('/today/articles/') }}/' + form_id + '/update',
            data : { 'field' : field,
                     'value' : value,
                     'type'  : type },
            dataType : 'html'
        })
        .done(function(returned_data)
        {                               
            // Success
            //console.log("Successfully saved {'" + form_id + "|" + field + "' : '" + value + "'}");
            
            var info = $.parseJSON(returned_data);            

            if (info.force_reload)
            {
                reload = true;
            }

        })
        .fail(function(jqXHR, status, error)
        {                                                   
            // Error
            var response = jqXHR.responseText;
            var errorData = $.parseJSON(response);
            //console.log(errorData);
            alert("There was an error saving this form's data.\n\n" + errorData.error.message + "\n\nPlease try again.  Please note, that if you try to reload this page, your unsaved data will be lost.");
        })
        .complete(function ()
        {
            // Reload if necessary
            if (reload)
            {
                location.reload();
            }
            else
            {
                $('*').css({'cursor':''});
            }
        });
    }   

    // Autosave text fields
    function autoSaveTextField(input_field)
    {
        clearTimeout(autoSaveTextField.timeout);
        autoSaveTextField.timeout = setTimeout(function (){
            
            var value = input_field.val();
            var original_value = input_field.attr('data-original');
            var field = input_field.attr('data-field');
            var type = input_field.attr('data-type');                        
            
            var readonly_attr = input_field.attr('readonly');            
            if (typeof readonly_attr !== typeof undefined && readonly_attr !== false)
            {
                return false;
            }

            var reload = false;
            var reload_attr = input_field.attr('data-reload');            
            if (typeof reload_attr !== typeof undefined && reload_attr !== false)
            {
                reload = true;
            }

            var required = false;
            var required_attr = input_field.attr('data-required');            
            if (typeof required_attr !== typeof undefined && required_attr !== false)
            {
                required = true;
            }

            if (required && value == '' && !(original_value == '' || typeof original_value === typeof undefined || original_value === false))
            {
                input_field.val(original_value);

                input_field.focus();

                alertRequiredField();          

                return;
            }

            if (value != original_value && ((required && value != '') || !required))
            {
                saveFormData(field, value, type, reload);
                input_field.attr('data-original', value);
            }
        }, 50);
    }

    // Autosave text fields and textareas
    $('input[type="text"][data-autosave]').on('change blur autocompletechange autocompleteselect', function (event)
    {            
        autoSaveTextField ($(this));
    });
    $('textarea[data-autosave]').on('change blur autocompletechange autocompleteselect', function (event)
    {            
        autoSaveTextField ($(this));
    });   

    // Autosave select fields    
    $('select[data-autosave]').on('change', function(event)
    {
        var select_field = $(this);
        var selected = $(':selected', select_field);
        var value = selected.val();
        var original_value = select_field.attr('data-original'); 
        var field = select_field.attr('data-field');
        var type = select_field.attr('data-type');                        
     
        var readonly_attr = select_field.attr('readonly');            
        if (typeof readonly_attr !== typeof undefined && readonly_attr !== false)
        {
            return false;
        }

        var reload = false;
        var reload_attr = select_field.attr('data-reload');            
        if (typeof reload_attr !== typeof undefined && reload_attr !== false)
        {
            reload = true;
        }

        if (value != original_value)
        {
            saveFormData(field, value, type, reload);
            select_field.attr('data-original', value);
        }                
    });

    // Autosave check-box fields    
    $('input[type="checkbox"][data-autosave]').on('change', function(event)
    {
        var checkbox_field = $(this);        
        var value = checkbox_field.is(':checked');
        var original_value = checkbox_field.attr('data-original'); 
        var field = checkbox_field.attr('data-field');
        var type = checkbox_field.attr('data-type');                        
        
        var readonly_attr = checkbox_field.attr('readonly');            
        if (typeof readonly_attr !== typeof undefined && readonly_attr !== false)
        {
            return false;
        }

        var reload = false;
        var reload_attr = checkbox_field.attr('data-reload');            
        if (typeof reload_attr !== typeof undefined && reload_attr !== false)
        {
            reload = true;
        }

        if (value != original_value)
        {
            saveFormData(field, value, type, reload);
            checkbox_field.attr('data-original', value);
        }         
    });

    // Limited length fields
    $('input[type="text"][data-format="limited-length"]')
        .each(function(index, element)
        {
            var field = $(element);            
            var value = field.val();
            var length = value.length;            

            $('<span>' + length + '</span>')
                .attr('data-length', '') 
                .attr('data-limited-field', $(element).attr('name'))               
                .addClass('small gray note float_right')                
                .insertAfter($(element))
                .position({my : "right-10 center+1", at : "right center", of : $(element)});
        })
        .on('change blur keyup keydown', function()
        {
            var field = $(this);
            var name = field.attr('name');
            var value = field.val();
            var length = value.length;
            var max = parseInt(field.attr('maxlength'));
            

            $('span[data-limited-field="' + name + '"]')
                .text(length)
                .position({my : "right-10 center+1", at : "right center", of : $(field)});
        });

    /*
     * Upload photo preview
     */
    function readURL(input) {
        if (input.files && input.files[0])
        {
            var reader = new FileReader();

            reader.onload = function(e)
            {   
                $('#photo_preview')
                    .attr('src', e.target.result)
                    .load(function()
                    {                        
                        var height = this.clientHeight;
                        var full_height = $('#photo_preview_container').height();                        

                        if (height < full_height)
                        {
                            var top_margin = (full_height - height) / 2;
                            $('#photo_preview').css({'margin-top' : top_margin + 'px'});
                        }
                    });
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#photo").change(function()
    {
        $('[name="photo_preview_text"]').remove();
        
        readURL(this);        
        
        $('<span>Preview</span>')
            .addClass('note')
            .attr('name', 'photo_preview_text')
            .css({'background-color' : 'rgba(1.0, 1.0, 1.0, 0.60)',
                  'color' : '#dedede',
                  'padding' : '0 10px',
                  'position' : 'absolute'})
            .appendTo('#photo_preview_container')
            .position({my : "center center", at : "center center", of : $('#photo_preview_container')});

        $('[data-action="upload_photo"]').button('enable');        
    });

    /*
     * Upload photo button
     */
    $('[data-action="upload_photo"]')
        .css({'font-size' : '8pt'})
        .button()
        .on('click', function(event)
        {
            event.preventDefault();
            $('[data-action="delete_photo"]').button('enable');

            $('<div><div>')
                .addClass('ui-widget-overlay ui-front')
                .appendTo('body');
              
            $('<div><div>').appendTo('body')
                .css('width', '225px')
                .css('height', '170px')
                .css('text-align', 'center')
                .css('padding', '0.5em')
                .position({my : "center center", at : "center center", of : window})
                .addClass('ui-dialog ui-widget ui-widget-content ui-corner-all ui-front')
                .html('<br />Uploading...<br /><br /><img src="http://www.osaa.org/images/icons/ajax_loader3.gif" /><div style="font-size: 8pt; line-height: 105%; margin-top: 2em;">Please wait, this may take a while to process...</div>');

            var form = $(this).parents('form');

            form.submit();

        });
    $('[data-action="upload_photo"]').button('disable');

    /*
     * Delete photo button     
     */
    $('[data-action="delete_photo"]')
        .css({'font-size' : '8pt', 'margin-left' : '25px'})
        .button()
        .on('click', function(event)
        {
            event.preventDefault();

            var button = $(this);            
            button.blur();            
                                    
            $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    modal : true,
                    draggable : true,
                    resizable : false,                    
                    height : 225,
                    width : 400,                    
                    title : 'Confirm Photo Deletion',
                    buttons: [
                        {
                            text : "Delete",
                            'class' : "float_left",
                            icons : { primary : 'ui-icon-check'},
                            click : function()
                                    {   
                                        $('<div><div>')
                                            .addClass('ui-widget-overlay ui-front')
                                            .appendTo('body');
                                          
                                        $('<div><div>').appendTo('body')
                                            .css('width', '225px')
                                            .css('height', '170px')
                                            .css('text-align', 'center')
                                            .css('padding', '0.5em')
                                            .position({my : "center center", at : "center center", of : window})
                                            .addClass('ui-dialog ui-widget ui-widget-content ui-corner-all ui-front')
                                            .html('<br />Deleting...<br /><br /><img src="http://www.osaa.org/images/icons/ajax_loader3.gif" /><div style="font-size: 8pt; line-height: 105%; margin-top: 2em;">Please wait, this may take a while to process...</div>');

                                        // Submit the change
                                        var jqxhr = $.ajax(
                                            {
                                                type : 'POST',
                                                url : '{{ url('/today/articles/' . $info['article']->id . '/delete-photo') }}',
                                                dataType : 'html'
                                            })
                                            .done(function (data)
                                            {                               
                                                //console.log('Deletion was successful.');
                                                
                                                // Reload of refresh is specified                                                
                                                location.reload();                                                
                                            })
                                            .fail(function (jqXHR, status, error)
                                            {                                                   
                                                var response = jqXHR.responseText;
                                                var errorData = $.parseJSON(response);
                                                //console.log(errorData);
                                                alert ("There was an error deleting the file.\n\nThis page will be reloaded.");
                                                location.reload();
                                            });
                                    }
                        },
                        {
                            text : "Cancel",
                            'class' : "float_right",
                            'data-autofocus' : "true",
                            icons : { primary : 'ui-icon-cancel'},
                            click : function()
                                    {
                                        // Close the dialog box
                                        $(this).dialog("close");                           
                                    }
                        }
                    ],
                    open : function ()
                        {  
                            var dialog_object = $(this);

                            dialog_object.html('<br />Are you sure you want to delete this article\'s photo?<br /><br /><div class="small gray">This cannot be undone.</div>');
                            
                            $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
                            $('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');   

                            $('[data-autofocus="true"]').focus();
                        },
                    close : function ()
                        {
                            var dialog_object = $(this);

                            row.removeClass('ui-state-highlight');

                            $(dialog_object).remove();
                        }                
                });
        });

    @if (Helpers::strIsEmpty($info['article']->photo_path))
        $('[data-action="delete_photo"]').button('disable');
    @else
        $('#photo_preview')            
            .load(function()
            {                        
                var height = this.clientHeight;
                var full_height = $('#photo_preview_container').height();                        

                if (height < full_height)
                {
                    var top_margin = (full_height - height) / 2;
                    $('#photo_preview').css({'margin-top' : top_margin + 'px'});
                }
            });
    @endif


    /*
     * Submit button
     */
    $('.submit_button')
        .css({'font-size' : '9pt'})
        .button({'icons' : {'primary' : 'ui-icon-circle-check'}})
        .on('click', function(event)
        {
            event.preventDefault();
            
            saveBodyContent(false);

            var button = $(this);            
            button.blur();            
                                    
            $('<div></div>')
                .appendTo('body')
                .dialog(
                {                       
                    modal : true,
                    draggable : true,
                    resizable : false,                    
                    height : 260,
                    width : 400,                    
                    title : 'Confirm Submission',
                    buttons: [
                        {
                            text : "Submit",
                            'class' : "float_left",
                            icons : { primary : 'ui-icon-check'},
                            click : function()
                                    {   
                                        $('<div><div>')
                                            .addClass('ui-widget-overlay ui-front')
                                            .appendTo('body');
                                          
                                        $('<div><div>').appendTo('body')
                                            .css('width', '225px')
                                            .css('height', '170px')
                                            .css('text-align', 'center')
                                            .css('padding', '0.5em')
                                            .position({my : "center center", at : "center center", of : window})
                                            .addClass('ui-dialog ui-widget ui-widget-content ui-corner-all ui-front')
                                            .html('<br />Submitting...<br /><br /><img src="http://www.osaa.org/images/icons/ajax_loader3.gif" /><div style="font-size: 8pt; line-height: 105%; margin-top: 2em;">Please wait, this may take a while to process...</div>');

                                        // Submit the change
                                        var jqxhr = $.ajax(
                                            {
                                                type : 'POST',
                                                url : '{{ url('/today/articles/' . $info['article']->id . '/submit') }}',
                                                dataType : 'html'
                                            })
                                            .done(function (data)
                                            {                               
                                                //console.log('Submit was successful.');
                                                
                                                // Reload of refresh is specified                                                
                                                location.reload();                                                
                                            })
                                            .fail(function (jqXHR, status, error)
                                            {                                                   
                                                var response = jqXHR.responseText;
                                                var errorData = $.parseJSON(response);
                                                //console.log(errorData);
                                                alert ("There was an error submitting the article.\n\nThis page will be reloaded.");
                                                location.reload();
                                            });
                                    }
                        },
                        {
                            text : "Cancel",
                            'class' : "float_right",
                            'data-autofocus' : "true",
                            icons : { primary : 'ui-icon-cancel'},
                            click : function()
                                    {
                                        // Close the dialog box
                                        $(this).dialog("close");                           
                                    }
                        }
                    ],
                    open : function ()
                        {  
                            var dialog_object = $(this);                            

                            var html = '<br />Are you sure you want to submit this article?<br /><br /><div class="small gray">Publisher review is required before the article is included in the listing.';
                            if ($('option:selected', '#publisher').val() !== '')
                            {
                                
                                html += ' An email will automatically be sent to the selected publisher.';
                            }
                            else
                            {
                                html += ' You did not select a publisher to be notified about this submission.';
                            }
                            html += '</div>';

                            dialog_object.html(html);
                            
                            $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
                            $('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');   

                            $('[data-autofocus="true"]').focus();
                        },
                    close : function ()
                        {
                            var dialog_object = $(this);
                            $(dialog_object).remove();
                        }                
                });
        });
    @if (!is_null($info['article']->submitted_at))
        $('.submit_button').button('disable');
    @endif


    {{-- Publish feature --}}
    @if ($info['author']->is_publisher and !$info['article']->is_retired and is_null($info['article']->published_at))

        $('[data-action="publish"]')
            .css({'font-size' : '9pt', 'margin-right' : '50px'})
            .button()
            .on('click', function(event)
            {
                event.preventDefault();

                saveBodyContent(false);

                var button = $(this);            
                button.blur();            
                                        
                $('<div></div>')
                    .appendTo('body')
                    .dialog(
                    {                       
                        modal : true,
                        draggable : true,
                        resizable : false,                    
                        height : 390,
                        width : 500,                    
                        title : 'Confirm Publication',
                        buttons: [
                            {
                                text : "Publish",
                                'class' : "float_left",
                                icons : { primary : 'ui-icon-check'},
                                click : function()
                                        {   
                                            $('<div><div>')
                                                .addClass('ui-widget-overlay ui-front')
                                                .appendTo('body');
                                              
                                            $('<div><div>').appendTo('body')
                                                .css('width', '225px')
                                                .css('height', '170px')
                                                .css('text-align', 'center')
                                                .css('padding', '0.5em')
                                                .position({my : "center center", at : "center center", of : window})
                                                .addClass('ui-dialog ui-widget ui-widget-content ui-corner-all ui-front')
                                                .html('<br />Publishing...<br /><br /><img src="http://www.osaa.org/images/icons/ajax_loader3.gif" /><div style="font-size: 8pt; line-height: 105%; margin-top: 2em;">Please wait, this may take a while to process...</div>');

                                            var publish_date = $('input[type="text"][name="publish_date"]', $(this)).val();
                                            var publish_time = $('input[type="text"][name="publish_time"]', $(this)).val();

                                            var data = {
                                                publish_date : publish_date,
                                                publish_time : publish_time
                                            };

                                            // Submit the change
                                            var jqxhr = $.ajax(
                                                {
                                                    type : 'POST',
                                                    url : '{{ url('/today/articles/' . $info['article']->id . '/publish') }}',
                                                    data : data,
                                                    dataType : 'html'
                                                })
                                                .done(function (data)
                                                {                               
                                                    console.log('Publish was successful.');
                                                    
                                                    // Reload of refresh is specified                                                
                                                    location.reload();                                                
                                                })
                                                .fail(function (jqXHR, status, error)
                                                {                                                   
                                                    var response = jqXHR.responseText;
                                                    var errorData = $.parseJSON(response);
                                                    //console.log(errorData);
                                                    alert ("There was an error publishing the article.\n\nThis page will be reloaded.");
                                                    location.reload();
                                                });
                                        }
                            },
                            {
                                text : "Cancel",
                                'class' : "float_right",
                                'data-autofocus' : "true",
                                icons : { primary : 'ui-icon-cancel'},
                                click : function()
                                        {
                                            // Close the dialog box
                                            $(this).dialog("close");                           
                                        }
                            }
                        ],
                        open : function ()
                            {  
                                var dialog_object = $(this);

                                dialog_object.html('<br />Are you sure you want to publish this article?<br /><br /><div class="small gray">Publishing this article will trigger its listing in the news feed.  The author will automatically be notified of their article\'s publication.</div><br /><div class="small"><b>Deferred Publish</b><br /><span class="gray">To publish immediately, ignore these fields.  To defer publishing to a date/time in the future, select a date and time below.</span><br /><span style="font-weight: bold; margin-left: 30px;">Publish On:</span> <input type="text" name="publish_date" style="width: 115px;" /><span style="font-weight: bold; margin-left: 30px;">At:</span> <input type="text" name="publish_time" style="width: 80px;" value="12:00 AM" readonly="readonly" /><br /><br /><span style="font-weight: bold; margin-left: 30px;">Hour: </span><div name="hour_slider"><div name="hour_slider_handle" class="ui-slider-handle"></div></div><br /><br /><span style="font-weight: bold; margin-left: 30px;">Minute: </span><div name="minute_slider"><div name="minute_slider_handle" class="ui-slider-handle"></div></div></div>');
                                
                                $('.ui-dialog-buttonpane').css('padding', '0 0.5em').css('font-size', '9pt');
                                $('.ui-dialog-buttonpane .ui-dialog-buttonset').css('width', '100%');   

                                var hour_handle = $('[name="hour_slider_handle"]', dialog_object);
                                hour_handle.css({
                                    'width' : '3em',
                                    'height' : '1.6em',
                                    'top' : '50%',
                                    'margin-top' : '-.8em',
                                    'text-align' : 'center',
                                    'line-height' : '1.6em'
                                });

                                var minute_handle = $('[name="minute_slider_handle"]', dialog_object);
                                minute_handle.css({
                                    'width' : '3em',
                                    'height' : '1.6em',
                                    'top' : '50%',
                                    'margin-top' : '-.8em',
                                    'text-align' : 'center',
                                    'line-height' : '1.6em'
                                });

                                function refreshPublishTime()
                                {
                                    var hour = $('[name="hour_slider"]', dialog_object).slider("value");
                                    var minute = $('[name="minute_slider"]', dialog_object).slider("value");
                                    var terminus = "AM";
                                    if (hour >= 12)
                                    {
                                        terminus = "PM";                                        
                                    }
                                    if (hour == 0)
                                    {
                                        hour = 12;
                                    }
                                    if (hour > 12)
                                    {
                                        hour -= 12;
                                    }

                                    $('input[type="text"][name="publish_time"]', dialog_object).val(hour + ':' + (minute.toString()).padStart(2, '0') + ' ' + terminus);
                                }

                                $('input[type="text"][name="publish_date"]', dialog_object).datepicker({minDate: 0});
                                $('[name="hour_slider"]', dialog_object)
                                    .css({'width' : '350px', 'display' : 'inline-block', 'margin-left' : '10px', 'top' : '3px'})
                                    .slider({
                                        min : 0,
                                        max : 23,
                                        step : 1,
                                        range : "min",
                                        change : refreshPublishTime,
                                        create : function() {
                                            var value = parseInt($(this).slider("value"));
                                            if (value == 0)
                                            {
                                                value = 12;
                                            }
                                            if (value > 12)
                                            {
                                                value -= 12;
                                            }
                                            hour_handle.text(value);
                                        },
                                        slide : function(event, ui) {
                                            var value = parseInt(ui.value);
                                            if (value == 0)
                                            {
                                                value = 12;
                                            }
                                            if (value > 12)
                                            {
                                                value -= 12;
                                            }

                                            hour_handle.text(value);
                                        }
                                    });
                                $('[name="minute_slider"]', dialog_object)
                                    .css({'width' : '350px', 'display' : 'inline-block', 'margin-left' : '10px', 'top' : '3px'})
                                    .slider({
                                        min : 0,
                                        max : 59,
                                        step : 1,
                                        range : "min",
                                        change : refreshPublishTime,
                                        create : function() {
                                            var value = parseInt($(this).slider("value"));                                            
                                            minute_handle.text((value.toString()).padStart(2, '0'));
                                        },
                                        slide : function(event, ui) {
                                            var value = parseInt(ui.value);
                                            minute_handle.text((value.toString()).padStart(2, '0'));
                                        }
                                    });

                                $('[data-autofocus="true"]').focus();
                            },
                        close : function ()
                            {
                                var dialog_object = $(this);
                                $(dialog_object).remove();
                            }                
                    });
            });


    @endif

    {{-- Make the article read-only if the author is not a publisher and the article is submitted or retired --}}
    @if (!$info['author']->is_publisher and (!is_null($info['article']->submitted_at) or $info['article']->is_retired))

        // Restrict some fields if submitted or retired and the author is not a publisher    
        var restricted = [
            '#publisher',
            '#title',
            '#sub_title',
            '#tags',
            '#photo',
            '#photo_caption',
            '[data-action="preview"]',
            '[data-action="save"]',
            '[data-action="upload_photo"]',
            '[data-action="delete_photo"]',
            '.preview_button',
            '.save_button',
            '.submit_button',
            '[data-limited-field]'
        ];        

        $.each(restricted, function(index, value)
        {
            var item = $(value);            

            // Replace text inputs
            if (item.is('input[type="text"]'))
            {
                var text = item.val();
                var width = item.width();                

                var replace = $('<span></span>').text(text)
                                                .css({'width' : width + 'px',
                                                      'border-bottom' : '1px solid #666666',
                                                      'display' : 'inline-block'});

                item.unbind();
                item.replaceWith(replace);
            }

            // Replace select inputs
            if (item.is('select'))
            {
                var option = $('option:selected', item);
                var text = option.text();
                var width = item.width();                

                var replace = $('<span></span>').text(text)
                                                .css({'width' : width + 'px',
                                                      'border-bottom' : '1px solid #666666',
                                                      'display' : 'inline-block'});

                item.unbind();
                item.replaceWith(replace);
            }

            // Replace text-areas
            if (item.is('textarea'))
            {
                var text = item.val();
                var width = item.width(); 
                var height = item.height();               

                var replace = $('<span></span>').text(text)
                                                .css({'width' : width + 'px',
                                                      'min-height' : height + 'px',                                                      
                                                      'display' : 'inline-block'});

                item.unbind();
                item.replaceWith(replace);
            } 

            // Disable button widgets
            if (item.is('.ui-button'))
            {                
                item.button("disable");
            } 

            // Remove toolbar buttons
            if (item.is(':button'))
            {
                if (item.parent().is('.ql-formats'))
                {
                    item.remove();
                }
            }

            // Disable file inputs
            if (item.is('input[type="file"]'))
            {
                item.attr('disabled', 'disabled');
            }

            // Remove spans with limited text field helpers
            if (item.is('span[data-length]'))
            {
                item.remove();
            }
        });

    @endif


    {{-- Check for jump_to session data --}}
    @if (Session::has('jump_to'))
        var jump_target_name = "{{ Session::get('jump_to') }}";

        var target = $('a[name="' + jump_target_name + '"]');
        var offset = target.offset().top;
        var change = 42;       
        
        offset = offset - change;        

        $('html, body').animate({
            scrollTop: offset
        }, 400);        

    @endif
@stop

@section('page_functions')
    
    <a href="#" class="submit_button" style="margin-left: 10px;" title="Submit Article">Submit</a>
    <a href="#" class="save_button" style="margin-left: 10px;" title="Save Article's Body Content">Save</a>
    <a href="#" class="preview_button" style="margin-left: 10px;" title="Preview Article">Preview</a>
    <a href="{{ url('/today') }}" class="close_button" style="margin-left: 10px;" title="Leave this page, any unsaved changes will be lost">Close</a>

@stop


@section('main_content')        

    {{-- Success Bar --}}
    @if (Session::has('success'))
        <div class="success_bar">
            <div class="message">               
                {{ Session::get('success') }}
            </div>          
        </div>
    @endif

    {{-- Errors --}}
    @if (Session::has('errors'))        
        <div class="error ui-state-error" style="padding: 0.5em; font-size: 12pt;">
            <span class="ui-icon ui-icon-alert box_icon"></span>
            @foreach ($errors->all() as $error)
                {{ $error }}
            @endforeach
        </div>
    @endif

    <div class="clear float_right small gray">
        Required fields are indicated with a red asterisk, <span style="color: #990000; font-weight: bold; font-size: 14pt !important; position: relative; top: 6px;">*</span>.
    </div>

    <br />

    {{ Form::open(array('url'    => url('/today/articles') . '/' . $info['article']->id . '/save',
                        'files'  => true,
                        'id'     => 'edit-article',
                        'name'   => 'edit-article',
                        'method' => 'post')) }}

        {{ Form::hidden('article_id', $info['article']->id) }}

        <h2>Instructions for Editing News Articles</h2>
        <div class="columns small">
            <div class="half text_justify">
                Use this form to edit the information for your news article.  Once you have reviewed your article, click the <b>Submit</b> button to submit your article to a publisher for review.  Once submitted, only publishers will be able to edit this article.
            </div>

            <div class="half">
                <b>Author:</b> {{ $info['author']->getName() }} - {{ $info['author']->getRole() }}<br />
                <b>Submitted:</b>
                @if (is_null($info['article']->submitted_at))
                    Not Submitted
                @else
                    {{ date('n/j/Y g:ia', strtotime($info['article']->submitted_at)) }}
                @endif
                <br />
                <b>Published:</b>
                @if ($info['article']->is_retired)
                    @if (is_null($info['article']->published_at))
                        Not Published - <span class="important">Retired Article</span>
                    @else
                        {{ date('n/j/Y g:ia', strtotime($info['article']->published_at)) }} - <span class="important">Retired Article</span>
                    @endif
                @else
                    @if (is_null($info['article']->published_at))
                        Not Published
                    @else
                        {{ date('n/j/Y g:ia', strtotime($info['article']->published_at)) }}
                    @endif
                @endif
            </div>
        </div>

        @if (!$info['author']->is_publisher and (!is_null($info['article']->submitted_at) or $info['article']->is_retired))

            <br class="clear" /><br />
            <div id="publisher_section">
                @if ($info['article']->is_retired)
                    <h2>This Article Has Been Retired</h2>
                    <br />
                    The article is not included on any listing and cannot be viewed by the public.
                @else

                    @if (is_null($info['article']->published_at))
                        <h2>This Article Has Been Submitted</h2>
                        <br />                
                        Awaiting {{ ((is_null($info['publisher'])) ? 'publisher' : $info['publisher']->getName()) }} review.  You cannot edit this article.
                    @else
                        <h2>This Article Has Been Published</h2>
                        <br />                
                        {{ $info['publisher']->getName() }} has published this article.  You cannot edit this article.
                    @endif
                    
                @endif
            </div>

        @endif

        
        @if ($info['author']->is_publisher)
            <br class="clear" /><br />
            <div id="publisher_section">

                <div class="more_info">You are logged in as a publisher.</div>

                <h2>Publisher Information</h2>
                <br />
                
                {{ Form::label('author', 'Author') }}
                {{ Form::select('author',
                                $info['authors'],
                                $info['article']->author,
                                array('data-autosave' => true,
                                      'data-field'    => 'author',
                                      'data-type'     => 'INT',
                                      'data-original' => $info['article']->author,                              
                                      'data-required' => true,                                  
                                      'style'         => '')) }}
                <span class="small gray note" style="margin-left: 40px;">This person will appear as the article's author with contact information</span>
                
                <br class="clear" /><br />

                @if (!$info['article']->is_retired and is_null($info['article']->published_at))
                    <div style="float: right;">
                        <a href="#" data-action="publish">Publish Article</a>
                    </div>
                @endif                

                @if (is_null($info['article']->submitted_at))
                    <img src="{{ asset('/images/icons/information_2_32px.png') }}" alt="" title="" style="float: left; margin-right: 8px;" />
                    This article is not yet submitted.  You can submit this article and publish it at the same time by<br />clicking the <b>Publish Article</b> button on the right.  You can also edit this article.<br />

                    <br class="clear" />
                
                @elseif (is_null($info['article']->published_at))
                    <img src="{{ asset('/images/icons/information_2_32px.png') }}" alt="" title="" style="float: left; margin-right: 8px;" />
                    This article was submitted, but it has not been published yet.  You can publish this article at any time by<br />clicking the <b>Publish Article</b> button on the right.  You can also edit this article.<br />

                    <br class="clear" />

                @else
                    <img src="{{ asset('/images/icons/information_2_32px.png') }}" alt="" title="" style="float: left; margin-right: 8px;" />
                    This article has been published.  As a publisher, you can edit this article's information and/or content.  Any changes will be viewable for this article once those changes are saved.<br />

                    <br class="clear" />

                    {{ Form::label('published_at', 'Published At') }}
                    {{ Form::text('published_at',
                                  $info['article']->published_at,
                                  array('data-autosave' => true,
                                        'data-field'    => 'published_at',
                                        'data-type'     => 'DATE-TIME',
                                        'data-original' => $info['article']->published_at,
                                        'data-required' => true,
                                        'data-reload'   => true,
                                        'style'         => '')) }}

                    <span class="small gray note" style="margin-left: 40px;">YYYY-MM-DD hh:mm:ss formatted date/time (24-hour) of article's publication, a change will reload this page</span>
                    <br />

                    <br class="clear" />

                @endif


                {{ Form::label('is_retired', 'Retire Article', array('style' => 'width: 160px;')) }}
                {{ Form::checkbox('is_retired',
                                  true,
                                  $info['article']->is_retired,
                                  array('data-autosave' => true,
                                        'data-field'    => 'is_retired',
                                        'data-type'     => 'BOOL',
                                        'data-reload'   => true,
                                        'style'         => 'vertical-align: middle; margin-right: 20px;')) }}
                <span class="small gray note">Check this box to mark the article as retired - retired articles are essentially deleted</span>


            </div>
        @endif

        <br class="clear" />
        <div class="horizontal_divider" style="width: 100%;"></div>    
        <br />

        <h2>Content</h2>
        <br />

        {{ Form::label('publisher', 'Publisher') }}
        {{ Form::select('publisher',
                        $info['publishers'],
                        $info['article']->publisher,
                        array('data-autosave' => true,
                              'data-field'    => 'publisher',
                              'data-type'     => 'INT',
                              'data-original' => $info['article']->publisher,                              
                              'style'         => '')) }}     
        <span class="small gray note" style="margin-left: 40px;">The publisher who will review this article prior to its listing on the website</span>       

        <br class="clear" /><br />       

        {{ Form::label('title', 'Article Title') }}
        <span class="small gray note">The article's headline, max length of 64 characters</span>        
        <br />
        {{ Form::text('title',
                      $info['article']->title,
                      array('data-autosave'    => true,
                            'data-field'       => 'title',
                            'data-type'        => 'STRING',
                            'data-original'    => $info['article']->title,
                            'data-required'    => true,
                            'data-format'      => 'limited-length',
                            'maxlength'        => 64,
                            'style'            => 'width: 650px;')) }}

        <br class="clear" /><br />

        {{ Form::label('sub_title', 'Sub-Title') }}
        <span class="small gray note">The article's optional byline/sub-heading, max length of 128 characters</span>        
        <br />
        {{ Form::text('sub_title',
                      $info['article']->sub_title,
                      array('data-autosave'    => true,
                            'data-field'       => 'sub_title',
                            'data-type'        => 'STRING',
                            'data-original'    => $info['article']->sub_title,
                            'data-format'      => 'limited-length',
                            'maxlength'        => 128,
                            'style'            => 'width: 1016px;')) }}

        <br class="clear" /><br />

        {{ Form::label('tags', 'Tags') }}
        <span class="small gray note">A comma separated list of topics or categories that describe the content</span>
        <br />
        {{ Form::text('tags',
                      $info['article']->tags,
                      array('data-autosave'    => true,
                            'data-field'       => 'tags',
                            'data-type'        => 'STRING',
                            'data-original'    => $info['article']->tags,                            
                            'maxlength'        => 255,
                            'style'            => 'width: 512px; margin-right: 40px;')) }}
        <span class="small gray note"><b>Ex:</b> Football, 6A, Bedrock High School, Rules</span>

        <br class="clear" /><br />
        
        <div class="label">Body Content</div>
        <span class="small gray note">The article's main content.  Type in text or paste content from a word processor.  Formatting options include justification, typographic emphasis (bold, italic, underscore, strike-through, color, sub-script, super-script), lists (bulleted or numbered), tabbing, HTML links, and block quotations.  Cannot contain images, videos, or other multi-media content.</span>
        <br />
        <div id="body_editor" data-last-updated="{{ date('Y-m-d H:i:s', time()) }}" data-field="body" data-type="RAW-STRING" data-changed="0">
            @if (!Helpers::strIsEmpty($info['article']->body))
                {{ $info['article']->body }}
            @endif
        </div>

        <br class="clear" />
        <a name="photo_upload_section"></a>

        <div id="photo_preview_container">
            @if (Helpers::strIsEmpty($info['article']->photo_path))
                <span name="photo_preview_text" class="small gray note" style="line-height: 188px;">No photo uploaded</span>
                <img id="photo_preview" src="" alt="" title="" style="max-width: 300px; max-height: 188px;" />         
            @else
                <img id="photo_preview" src="{{ asset($info['article']->photo_path) }}?t={{ time() }}" alt="" title="" style="max-width: 300px; max-height: 188px;" />
            @endif
            
        </div>
        {{ Form::label('photo', 'Article Photo') }}
        <span class="small gray note">
            @if (Helpers::strIsEmpty($info['article']->photo_path))
                Max 1 image
            @else
                A photo has been uploaded and attached to this article
            @endif
        </span>        
        <br />        
        <div class="columns" style="width: 69%;">
            <div class="half">
                {{ Form::file('photo', array('name' => 'photo', 'id'   => 'photo')) }}
            </div>

            <div class="half">
                <a href="#" data-action="upload_photo">Upload Photo</a>
                <a href="#" data-action="delete_photo">Delete Photo</a>
            </div>            
        </div>

        <br /><br /><br />

        {{ Form::label('photo_caption', 'Photo Caption') }}
        <span class="small gray note">If a photo is included with this article, this text captions the photo (photo credit), max length of 128 characters</span>        
        <br />
        {{ Form::text('photo_caption',
                      $info['article']->photo_caption,
                      array('data-autosave'    => true,
                            'data-field'       => 'photo_caption',
                            'data-type'        => 'STRING',
                            'data-original'    => $info['article']->photo_caption,
                            'data-format'      => 'limited-length',
                            'maxlength'        => 128,
                            'style'            => 'width: 700px;')) }}

        <br /><br />

        <div class="columns" style="width: 69%; font-size: 9pt;">
            <div class="half">
                <b>Image file specifications:</b>
                <ul>
                    <li><span style="width: 150px; display: inline-block;">Max file size:</span>less than 4 MB</li>
                    <li><span style="width: 150px; display: inline-block;">Image file extensions:</span>.jpg, .jpeg., .gif, or .png</li>
                    <li><span style="width: 150px; display: inline-block;">Preferred aspect radio:</span>1.6 : 1 (W:H)</li>
                    <li><span style="width: 150px; display: inline-block;">Maximum dimensions:</span>850px (W) x 533px (H)</li>
                    <li><span style="width: 150px; display: inline-block;">Minimum width:</span>adjusted to 500px (W)</li>
                </ul>
            </div>

            <div class="half">
                News articles can have one image attached that displays at the top of the article before the body content.  Choose your file to upload and a preview will be displayed.  Click the <b>Upload</b> button to save the image to this article.  To replace an existing photo, upload a new image.  To remove a photo, click the <b>Delete Photo</b> button.
            </div>
        </div>

        <br class="clear" />
        <div class="horizontal_divider" style="width: 100%;"></div>    
        <br />

        <a href="#" class="submit_button" title="Submit Article">Submit</a>
        <a href="#" class="save_button" style="margin-left: 10px;" title="Save Article's Body Content">Save</a>
        <a href="#" class="preview_button" style="margin-left: 10px;" title="Preview Article">Preview</a>
        <a href="{{ url('/today') }}" class="close_button" style="margin-left: 10px;" title="Leave this page, any unsaved changes will be lost">Close</a>

        <br class="clear" /><br />

    


    {{ Form::close() }}


    
    

@stop