(function( $ ) {
heroStoriesInit = function()
{
    function parseSubmitStoriesResponse(response)
    {
        var object = response;

        if(object.message != 'success') {
            $("#submit_story_informational_messages").removeClass('hidden');
            $("#hero_stories_submit").removeAttr("disabled");
            myApp.hidePleaseWait();
            Recaptcha.reload();
        }
        else
        {
            /*
            if(!$("#submit_story_informational_messages").hasClass('hidden'))
                $("#submit_story_informational_messages").addClass('hidden');
            $("#hero_stories_submit").removeAttr("disabled");
            resetSubmitHeroesForm();
            myApp.hidePleaseWait();
            $('#submit_hero_stories_close').trigger('click');
            Recaptcha.reload();
            */
            nodeId = $('#thankyou_page_id').val();
            var urlString = ($('#canada').val() == 'fr') ? '/'+nodeId : '/'+nodeId;
            var urlHost = Drupal.settings.lls_home_components.base_url+urlString;
            window.location = urlHost;
        }
    }

    function validateSpecialFields(field)
    {
        var valid = true;
        if(field == 'email'){
            valid = emailValidation(field);
        }
        else if(field == 'phone'){
            valid = phoneValidation(field);
        }
        else if(field == 'zipCode'){
            valid = zipCodeValidation(field);
        }
        else if(field == 'categories'){
            valid = chkValidation(field);
            if(valid) {
                $('#label_categories').removeClass('warning-label');
                $('#submit_story_categories').removeClass('has-warning');
                $('#submit_story_categories').addClass('has-success');
            }
            else {
                $('#label_categories').addClass('warning-label');
                $('#submit_story_categories').addClass('has-warning');
                $('#submit_story_categories').removeClass('has-success');
            }


        }
        else if(field == 'accept_terms')
        {
            valid = chkValidation('accept_terms');
            if(!valid)
                $('#hero_stories_accept_terms_label').addClass('warning-label');
            else if($('#hero_stories_accept_terms_label').hasClass('warning-label'))
                $('#hero_stories_accept_terms_label').removeClass('warning-label');
        }
        else{
            valid = true;
        }
        return valid;
    }

    function censor(censor) {
        var i = 0;

        return function(key, value) {
            if(i !== 0 && typeof(censor) === 'object' && typeof(value) == 'object' && censor == value)
                return '[Circular]';

            if(i >= 29) // seems to be a harded maximum of 30 serialized objects?
                return '[Unknown]';

            ++i; // so we know we aren't using the original object anymore

            return value;
        }
    }

    function verifyCaptchaSelected()
    {
        var g= document.getElementsByClassName('g-recaptcha');
        var v =grecaptcha.getResponse(g-recaptcha);
        if(v.length == 0)
            return false;
        else
            return true;
    }

    function validateVideoUrl()
    {
        var htmlField = $('#video');
        if(htmlField.val().length > 2000)
        {
            htmlField.addClass('has-warning');
            return false;
        }
        else
        {
            htmlField.removeClass('has-warning');
            return true;
        }
    }

    function validateRequiredHtmlField(field, fieldLength)
    {
        var htmlField = $('#' + field);
        var  valid;
        if((field != 'categories' && field != 'campaigns' && field != 'accept_terms' && field != 'hidden-field') && htmlField.val().trim() == "")
        {

            htmlField.removeClass('has-success');
            htmlField.addClass('has-warning');
            //name_feedback_text
            $('#'+field+'_feedback_text').each(function() {
                $(this).removeClass('hidden');
            });

            return false;
        }
        else
        {
            if(fieldLength != 0)
            {
                var value = htmlField.val();
                if( value.length > fieldLength)
                {
                    htmlField.removeClass('has-success');
                    htmlField.addClass('has-warning');

                    return false;
                }
                $('#'+field+'_feedback_text').each(function() {
                    if(!($(this).hasClass('hidden')))
                        $(this).addClass('hidden');
                });
            }

            if(field == 'submit-story-body' || field == 'state')
            {
                if(!($('#'+field+'_feedback_text').hasClass('hidden')))
                    $('#'+field+'_feedback_text').addClass('hidden');
            }

            valid = validateSpecialFields(field);
            if(field == 'accept_terms')
                return valid;

            if(field == 'hidden-field')
            {
                return ($("#"+field).val().trim() != '')? false:true;
            }

            if(valid && htmlField.length > 0){
                htmlField.removeClass('has-warning');
                htmlField.addClass('has-success');
                return true;
            }
            else if(!valid && htmlField.length > 0){
                htmlField.removeClass('has-success');
                htmlField.addClass('has-warning');
                return false;
            }
            return valid;
        }
    }

    function chkValidation(txtId){
        var isValid = false;
        $(".submit_hero_"+txtId).each(function()
        {
            if($(this).is(":checked"))
                isValid = true;
        });
        return isValid;
    }

    function phoneValidation(txtPhone){
        var phone = $('#'+txtPhone).val();
        var filter = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;
        if (filter.test(phone)) {
            return true;
        }
        else {
            return false;
        }
    }
    function emailValidation(txtEmail){
        var email = $('#'+txtEmail).val();
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        if(expr.test(email))
            return true;
        else
            return false;
    }
    function zipCodeValidation(txtZip){
        var zip = $('#'+txtZip).val();
        var expr = /^([0-9]{5})(?:[-\s]*([0-9]{4}))?$/;
        var exprCA = /^([abceghjklmnprstvxyABCEGHJKLMNPRSTVXY]{1}\d{1}[a-zA-Z]{1} *\d{1}[a-zA-Z]{1}\d{1})$/;
        if(expr.test(zip)|| exprCA.test(zip))
            return true;
        else
            return false;
        /*
        var zip = $('#'+txtZip).val();
        var expr = (($('#canada').val() == 'canada') || ($('#canada').val() == 'fr')) ? /^([abceghjklmnprstvxyABCEGHJKLMNPRSTVXY]{1}\d{1}[a-zA-Z]{1} *\d{1}[a-zA-Z]{1}\d{1})$/ : /^([0-9]{5})(?:[-\s]*([0-9]{4}))?$/;
        if(expr.test(zip))
            return true;
        else
            return false;
        */
    }

    function validateRequiredFields()
    {
        var fields = ['name', 'last-name', 'phone', 'email', 'location', 'shs_uploaded_image', 'state', 'zipCode', 'submit-story-body', 'campaigns', 'categories', 'accept_terms', 'hidden-field'];
        var fieldLengths = [50, 50, 20, 254, 100, 0, 0, 10, 0, 0, 0, 0, 0];
        var validationSucceded = true;
        if(!validateVideoUrl())
            validationSucceded = false;
        for(var i = 0; i < fields.length; i++)
        {
            var validationResult = validateRequiredHtmlField(fields[i], fieldLengths[i]);
            if(fields[i] == 'shs_uploaded_image')
            {
                if(!validationResult)
                    $('#hero_stories_submit_image').addClass('warning-label');
                else
                    $('#hero_stories_submit_image').removeClass('warning-label');

            }

            if(!validationResult) {
                validationSucceded = false;
            }
        }
        /* if(!verifyCaptchaSelected())
        {
            var alertText = $('#lls_invalid_captcha_alert').val();
            alert(alertText);
            validationSucceded = false;
        } */


        return validationSucceded;
    }

    function submitStoriesErrorCallBack(jqXHR, textStatus, errorThrown)
    {
        Recaptcha.reload();
        if(jqXHR.responseText.indexOf('Invalid Captcha') > -1)
        {
            alert('Invalid Captcha');
        }
        else
        {
            $("#submit_story_informational_messages").removeClass('hidden');
        }
        $("#hero_stories_submit").removeAttr("disabled");
        myApp.hidePleaseWait();
    }

    try {
        // Get the form.
        var form = $('#form_submit_hero_stories');

        var urlHost = Drupal.settings.lls_home_components.base_url;

        // Get the messages div.
        //var formMessages = $('#form-messages');


        // Set up an event listener for the contact form.
        $(form).submit(function(event) {
            $("#hero_stories_submit").attr("disabled", true);
            myApp.showPleaseWait();
            // Stop the browser from submitting the form.
            event.preventDefault();
            var arForm = $(this).serializeArray();


            callAjaxWithData(urlHost + '/lls-services/save_hero_story', arForm
                , parseSubmitStoriesResponse, submitStoriesErrorCallBack);
        });

        var holder = document.getElementById('holder'),
            tests = {
                filereader: typeof FileReader != 'undefined',
                dnd: 'draggable' in document.createElement('span'),
                formdata: !!window.FormData,
                progress: "upload" in new XMLHttpRequest
            };
            var progress = $('#hero_stories_progress_bar');

        var myApp;
        myApp = myApp || (function () {
            var pleaseWaitDiv = $('<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false"><div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div></div>');
            return {
                showPleaseWait: function() {
                    pleaseWaitDiv.modal();
                },
                hidePleaseWait: function () {
                    pleaseWaitDiv.modal('hide');
                }
            };
        })();

        if (tests.dnd) {
            holder.ondragover = function () { this.className = 'hover'; return false; };
            holder.ondragend = function () { this.className = ''; return false; };
            holder.ondrop = function (e) {
                this.className = '';
                e.preventDefault();
                submitHeroStoryReadImages(e.dataTransfer.files);
            }
        }
        $('#shs_btn_select_image').on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            $('#submit_hero_image').trigger('click');
        });

        $('#hero_stories_submit').on('click', function(e) {
            var validationResult = validateRequiredFields();
            if(!validationResult) {
                $('#submit_story_validation_errors').removeClass('hidden');
                return false;
            }
            else
                $('#submit_story_validation_errors').addClass('hidden');

            $(form).submit();
            return true;
        });
        //grecaptcha.reset();
    }
    catch(err)
    { }
};

submitHeroStoryReadImages = function(files)
{
    var uploadFieldBlock, isChangeButtonNotPresent, tests, acceptedTypes, progress, formData, fileSize, fileName, fileExists;
    function init()
    {
        $('#shs_uploaded_image').val("");
        uploadFieldBlock = $('#hero_story_image_container');
        isChangeButtonNotPresent = (document.getElementById('change-image') == null);
        tests = {
            filereader: typeof FileReader != 'undefined',
            dnd: 'draggable' in document.createElement('span'),
            formdata: !!window.FormData,
            progress: "upload" in new XMLHttpRequest
        };
        acceptedTypes = {
            'image/png': true,
            'image/jpeg': true,
            'image/gif': true
        };
        progress = $('#hero_stories_progress_bar');

        formData = tests.formdata ? new FormData() : null;

    }

    function updateUploadedBlockWithProgressWindow()
    {
        uploadFieldBlock.removeClass('complete');
        uploadFieldBlock.find('.upload-progress').show();
        uploadFieldBlock.find('.progress').show();
        uploadFieldBlock.find('.upload-status').show();
    }

    function resetHolderBlock()
    {
        uploadFieldBlock.find('.upload-progress').hide();
        uploadFieldBlock.removeClass('complete');
        uploadFieldBlock.find('.progress').hide();
        uploadFieldBlock.find('.upload-status').hide();
    }

    function validateImage(img)
    {
        var width = img.width;
        var height = img.height;

        if(width < 470 || height < 470) {
            var errorMessage = $('#hero_stories_image_val_error').val();
            alert(errorMessage);
            $('#holder').addClass('drag-and-drop');

            uploadFieldBlock.addClass('upload-field');
            uploadFieldBlock.addClass('empty');
            var element = document.getElementById('holder');
            element.offsetHeight; // no need to store this anywhere, the reference is enough
            element.style.webkitTransform = 'scale(1)';

            return false;
        }
        return true;

    }

    function updateImageName(file, img, result)
    {
        var image = document.getElementById('hero-uploaded-image');
        image.src = result;
        fileName = '' + file.name;
        var htmlElementFileName = document.getElementById('hero-story-image-file-name');
        htmlElementFileName.innerHTML = '' + file.name;
        $('#holder').hide();
    }

    function previewFile(file)
    {
        if (tests.filereader === true && acceptedTypes[file.type] === true) {
            var reader = new FileReader();
            reader.onload = function (event) {
                var img = new Image();
                img.src = event.target.result;
                img.onload = function() {
                    if(!validateImage(img))
                        return false;
                    uploadFileToServer(file, img, event.target.result);
                };
            };

            reader.readAsDataURL(file);
            return true;
        }

        uploadFieldBlock.find('.upload-progress').hide();
        uploadFieldBlock.find('.progress').hide();
        uploadFieldBlock.find('.upload-status').hide();
        return false;
    }

    function uploadFileComplete(uploadFieldBlock, file, img, result)
    {
        updateImageName(file, img, result);
        uploadFieldBlock.addClass('complete');
        uploadFieldBlock.find('.upload-progress').hide();
        uploadFieldBlock.find('.progress').hide();
        isChangeButtonNotPresent = (document.getElementById('change-image') == null);
        if(isChangeButtonNotPresent) {
            uploadFieldBlock.find('.file-info').append('<button id="change-image" class="btn btn-primary x2-top">Change Image</button>');
            $('button#change-image').on('click', function (e) {
                e.preventDefault();
                $('#submit_hero_image').trigger('click');
            });

        }
        $('#shs_uploaded_image').val(fileName);
    }

    function uploadFileToServer(file, img, result)
    {
        updateUploadedBlockWithProgressWindow();
        var xhr = new XMLHttpRequest();
        var urlHost = Drupal.settings.lls_home_components.base_url;
        xhr.open('POST', urlHost + '/lls-services/upload_image');

        uploadFieldBlock.toggleClass('empty uploading');

        xhr.onload = function() {
            processResponseFromUpload(this, file, img, result);
        };

        xhr.upload.onprogress = function (event) {
            showUploadProgress(event);
        }
        xhr.send(formData);
    }

    function processResponseFromUpload(xhr, file, img, result)
    {
        if (xhr.status == 200) {
            progress.attr('aria-valuenow', 100);
            uploadFileComplete(uploadFieldBlock, file, img, result);
        }
        else {
            alert('Upload Failed');
            uploadFieldBlock.toggleClass('empty uploading');
        }
    }

    function showUploadProgress(event)
    {
        if (event.lengthComputable) {
            var complete = (event.loaded / event.total * 100 | 0);
            $('#shs_image_status').html(complete + "% Complete");
            progress.attr('aria-valuenow', complete);
        }
    }

    function readFiles()
    {
        var retVal = false;
        for (var i = 0; i < files.length; i++) {
            retVal = false;
            if (tests.formdata) formData.append('uploaded_file', files[i]);
            fileSize = files[i].size;
            //file
            var uploadSize = document.getElementById('shs_file_size');
            var fileSizeInKb = parseInt(fileSize/1024);
            if(fileSizeInKb > 5120) {
                $('#holder').addClass('drag-and-drop');
                alert('Image size should be less than 5Mb');
                return;
            }
            uploadSize.innerHTML = fileSizeInKb + 'kb';
            retVal = previewFile(files[i]);
        }

        // now post a new XHR request
        if (retVal && tests.formdata) {
            //uploadFileToServer();
        }
    }

    init();
    readFiles();


};

resetSubmitHeroesForm = function()
{
    function resetImageDiv()
    {
        setClass('hero_story_image_container', 'upload-field');
        setClass('hero_story_image_container', 'empty');
        $('#hero_story_image_container').removeClass('complete');
        $('#hero_story_image_container').removeClass('uploading');
        setClass('holder', 'drag-and-drop');
        $('.upload-status').hide();
        $('#holder').show();

        $('#hero-uploaded-image').attr("src","");
    }

    function setClass(id, c)
    {
        if(!($('#'+id).hasClass(c)))
            $('#' + id).addClass(c);
    }

    function removeClass(id, c)
    {
        if(($('#'+id).hasClass(c)))
            $('#' + id).removeClass(c);
    }


    function resetCheckboxGroup(txtId){
        $(".submit_hero_"+txtId).each(function()
        {
            if($(this).is(":checked")) {
                $(this).click(); // Checks it
            }
        });
    }

    var textFieldIds = ['name', 'last-name', 'state', 'phone', 'email', 'location', 'zipCode', 'shs_uploaded_image', 'submit-story-body', 'video'];
    var checkboxGroups = ['categories', 'campaigns']
    for(var i = 0; i < textFieldIds.length; i++)
    {
        $('#' + textFieldIds[i]).val('');
    }

    for(var i = 0; i < checkboxGroups.length; i++)
    {
        resetCheckboxGroup(checkboxGroups[i]);
    }
    resetImageDiv();
    //grecaptcha.reset();
}
})(jQuery);