//FORMS VALIDATION AND EVENTS

$(function () {
    jQuery.support.placeholder = false;
    test = document.createElement('input');
    if ('placeholder' in test) jQuery.support.placeholder = true;
});

jQuery.fn.exists = function (func) {
    if ($(this).length) {
        func();
    }
    return $(this);
}

function deSelect() {
    $('.select-box').removeClass('show');
}

$(document).ready(function () {

    //Placeholders for IE
    if (!$.support.placeholder) {
        var active = document.activeElement;
        $(':text').focus(function () {
            if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('').removeClass('hasPlaceholder');
            }
        }).blur(function () {
            if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
            }
        });
        $(':text').blur();
        $(active).focus();
        $('form').submit(function () {
            $(this).find('.hasPlaceholder').each(function () { $(this).val(''); });
        });
    }

    $('.mod-find button').click(
       function () {
           var formName = $(this).parent().attr('id');
           if (formName != null && formName != '') {
               document.getElementById(formName).submit();
           }
       }
    );

    /** Styled Select
    ----------------------------------------------------------------------**/

    $('select').not(".noSelectBox select").exists(function () {


        $('select').each(function () {
            var selectBox = $('<div class="select-box"></div>');
            var selectList = $('<ol></ol>');
            var title = $('<b></b>');

            selectList.appendTo(selectBox);

            $('option', this).each(function (i) {

                var isSelected = $(this).is(':selected');
                if (!i) {

                    title.text($(this).text());
                    title.prependTo(selectBox);
                }
                if (isSelected && i) {
                    title.text($(this).text())
                }

                $('<li><a href="/" rel="' + $(this).val() + '">' + $(this).text() + '</a></li>').appendTo(selectList);
            });
            selectBox.insertAfter($(this));
        });




        $('.form-select,.form-select2').click(function (e) {

            var currentTarget = $(e.target);
            var getLength = $(this).children().children().children('li').length;
            var sum = 0;

            if (currentTarget.is('b')) {

                if (currentTarget.parent().hasClass('show')) {

                    deSelect();

                } else {

                    deSelect();
                    currentTarget.parent().addClass('show');

                    //Get length of list items and add scroll bar if more than 5
                    if (getLength > 5) {
                        $(this).addClass('oScroll');
                    }
                }

            } else if (currentTarget.is('ol li a')) {

                var index = currentTarget.parent().prevAll().length;

                $('option', this).removeAttr('selected');
                $('option', this).eq(index).attr('selected', 'selected');
                $('b', this).text(currentTarget.text());
                $('select:not(.rag-dropDown select)', this).change();
                $('#refineSearchForm').submit();

                //To remove dissapearing of the dropdown after click, we have commented it out
                deSelect();

            }

            e.preventDefault();

        }).hover(function () { },

      function () {

          if ($('.select-box', this).hasClass('show')) {

              setTimeout("deSelect()", 600);

          }

      });

    });





});


/* SELECT ELEMENT */



/* AUTOCOMPLETE for SEARCH INPUTS */

$(function () {
    var availableTeams = [
        "Arsenal London",
        "Birmingham Ladies",
        "Cheltenham United",
        "Chelsea London",
        "Davenport Club",
        "Erlang Club",
        "Ipswich Town",
        "Liverpool FC",
        "Manchester United",
        "Watford FC"
    ];

    $('#refineSearchForm #yourTeam').focus(function () {
        $('.ui-autocomplete').css('display');
    });

    if (typeof $.browser != 'undefined') {
        if ($.browser.msie && $.browser.version == 7) {
            var teamsOffset = "10px 0";
        } else {
            var teamsOffset = "0 0";
        }
    }
    

    ////Enter your team on FACup-History page
    //$("#refineSearchForm #yourTeam").autocomplete({
    //    source: availableTeams,
    //    minLength: 3,
    //    position: { my: "left top", at: "left bottom" }
    //});

    //IE7 autocomplete quirks - start
    if ($('#refineSearchForm #yourTeam')) {
        var inputOffset = $('#refineSearchForm #yourTeam').offset();
    }
    $("#refineSearchForm #yourTeam").bind("autocompleteopen", function (event, ui) {
        if (typeof $.browser != 'undefined') {
            if ($.browser.msie && $.browser.version == 7) {
                if (inputOffset.left != parseInt($('.ie7 .ui-autocomplete').css('left'))) {
                    $('.ie7 .ui-autocomplete').css('left', inputOffset.left + 'px');


                }
            }
        }

    });
    $("#refineSearchForm #yourTeam").bind("autocompletefocus", function (event, ui) {
        if (typeof $.browser != 'undefined') {
            if ($.browser.msie && $.browser.version == 7) {
                if (inputOffset.left == parseInt($('.ie7 .ui-autocomplete').css('left'))) {
                    $('.ie7 .ui-autocomplete').css('left', (parseInt(inputOffset.left) - 10) + 'px');
                }
            }
        }
    });

    //IE autocomplete quirks - end      

    //FA Cup history - Season dropdown

    $(".mod-searchBarHistory .select-box ol").wrapAll("<div class='slider_wrapper'><div class='slider_container'><div class='scroll-outsideWrapper'><div class='scroll-content'> </div></div></div></div>");
    $(".mod-searchBarHistory .select-box .slider_wrapper").append("<div class='scrollerContainer'><a href='#' class='cp-scrollUp'>scroll up</a><div id='slider'></div><a href='#' class='cp-scrollDown'>scroll down</a></div>");


    //Wrapping ol with div - applying styling

    $(".mod-searchBarHistory .select-box .slider_wrapper").prepend("<span class='cp-buttonHolder-one'><a href='#item-2000' class='cp-button'>20XX</a></span> <span class='cp-buttonHolder-two'><a href='#item-1900' class='cp-button'>19XX</a></span> <span class='cp-buttonHolder-three'><a href='#item-1800' class='cp-button'>18XX</a></span>");
    // Creating buttons with years

    var containsDateOne = $('.mod-searchBarHistory .select-box ol li a:contains(2011-2012)');
    var containsDateTwo = $('.mod-searchBarHistory .select-box ol li a:contains(1998-1999)');
    var containsDateThree = $('.mod-searchBarHistory .select-box ol li a:contains(1888-1889)');

    $(containsDateOne).addClass("item-2000").attr('id', 'item-2000');
    $(containsDateTwo).addClass("item-1900").attr('id', 'item-1900');
    $(containsDateThree).addClass("item-1800").attr('id', 'item-1800');

    if ($('.mod-searchBarHistory .select-box ol li a').hasClass('item-1800')) {
        $('span.cp-buttonHolder-three').show();
    }
    else {
        $('span.cp-buttonHolder-three').hide();
    }

    $(function () {
        var scrollPane = $(".slider_container");
        var scrollContent = $(".scroll-content");

        // Slider

        $('#slider').slider({
            orientation: "vertical",
            value: 100,
            max: 100,
            animate: true,
            min: -660,
            slide: function (event, ui) {
                //console.log(ui.value);
                //console.log(scrollPane.height());

                if (scrollContent.height() > scrollPane.height()) {
                    scrollContent.css("margin-top", (-1 * (scrollPane.height() - ((scrollPane.height() * ui.value) / 100))) + "px");

                } else {
                    scrollContent.css("margin-top", 0);
                }
            }
        });

        //slider prototype

        function customSlider(sliderObject, content, container) {
            this.content = content;
            this.handle = $('.ui-slider-handle');

            //method for moving slider and content with date range clicks
            this.move = function (e, num, heightStep) {
                e.preventDefault();
                //moving slider content                  
                this.content.animate({
                    marginTop: heightStep
                }, 500);

                //moving slider itself - condition for IE7-8 or other modern browsers
                if (jQuery.support.leadingWhitespace) {
                    this.handle.animate({ bottom: num }, 500);
                } else {
                    this.handle.css('bottom', num);
                }

            }

            //method for moving slider with up/down arrows clicks
            this.slide = function (e, dir) {
                //SLIDER PROPERTIES
                //setting up maximum height of the slider content
                this.maxHeight = Math.round((scrollContent.height() - scrollPane.height()) / 100) * 100 - 100;
                //setting up actual position of the content
                this.actualContentPos = Math.round(parseInt(content.css('margin-top')) / 100) * 100;
                //checking what will be the next content margin - this number is a base to find out what will be new slider position, so it has to be done before this.newSliderPos definiton
                dir ? this.nextContentPos = Math.round((parseInt(content.css('margin-top')) - 100) / 100) * 100 : this.nextContentPos = Math.round((parseInt(content.css('margin-top')) + 100) / 100) * 100;
                //setting up the new slider position
                this.newSliderPos = Math.round(this.nextContentPos * 100 / this.maxHeight) + 100 + '%';
                //if the newSliderPos will be lower than 0, it should be 0; if the newSliderPos will be bigger than 100, it should be 100
                parseInt(this.newSliderPos) < 0 ? this.newSliderPos = '0%' : (parseInt(this.newSliderPos) > 100 ? this.newSliderPos = '100%' : void (0));
                //slider moving down (dir = true)
                if (dir) {
                    if (this.actualContentPos > -(this.maxHeight)) {
                        //moving content                      
                        this.move(e, this.newSliderPos, (this.actualContentPos - 100));
                    } else {
                        //moving content to its maximum height and it stops at fixed position
                        this.move(e, this.newSliderPos, -(this.maxHeight));
                    }
                    //slider moving up (dir = false)
                } else {
                    //slider back at the top, position 0
                    if (this.actualContentPos >= 0) {
                        this.move(e, '100%', 0);
                    } else {
                        this.move(e, this.newSliderPos, (this.actualContentPos + 100));
                    }
                }
            }
        }

        //new slider object
        var dropdownSlider = new customSlider($('#slider'), $(".scroll-content"), $('.slider_container'));

        //clicking arrows down and up
        $('.cp-scrollDown').click(function (e) {
            dropdownSlider.slide(e, 1);
        });
        $('.cp-scrollUp').click(function (e) {
            dropdownSlider.slide(e, 0);
        });

        //custom location links
        $('.cp-buttonHolder-one .cp-button').click(function (e) {
            dropdownSlider.move(e, '100%', '0');
            //location of the date 2012
        });
        $('.cp-buttonHolder-two .cp-button').click(function (e) {
            dropdownSlider.move(e, '94%', '-180px');
            //location of the date 1999
        });
        $('.cp-buttonHolder-three .cp-button').click(function (e) {
            dropdownSlider.move(e, '12%', '-1530px');
            //location of the date 1899
        });

        // $("#dateSelect").live("change", function () { 
        //    $('#refineSearchForm').submit(); 
        // });
        $(".select-box .cp-button").click(function () {
            $(".cp-button-active").removeClass("cp-button-active");
            $(this).addClass("cp-button-active");
        });

    });

});

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            oldonload();
            func();
        };
    }
}


function loadSelect() {
    //added not selector - please keep it there, if not there fa cup history drop down won't be functioning correctly
    $('select').not(".mod-searchBarHistory select").not(".noSelectBox select").exists(function () {
        
        $('.select-box').remove();

        $('select').each(function () {
            var selectBox = $('<div class="select-box"></div>');
            var selectList = $('<ol></ol>');
            var title = $('<b></b>');

            selectList.appendTo(selectBox);

            $('option', this).each(function (i) {
                var isSelected = $(this).is(':selected');
                if (!i) {
                    title.text($(this).text());
                    title.prependTo(selectBox);
                }
                if (isSelected && i) {
                    title.text($(this).text());
                }
                //re-adding href value to dropdown
                if ($('.dropdown .select-box', this)) {
                    $('<li><a href="' + $(this).val() + '" rel="">' + $(this).text() + '</a></li>').appendTo(selectList);
                }

                else {
                    $('<li><a href="/" rel="' + $(this).val() + '">' + $(this).text() + '</a></li>').appendTo(selectList);
                }
            });
            selectBox.insertAfter($(this));
        });

        $('.rag-dropDown .form-select, .form-select2').click(function (e) {
            var currentTarget = $(e.target);
            if (currentTarget.is('b')) {
                if (currentTarget.parent().hasClass('show')) {
                    //deSelect();
                } else {
                    //deSelect();
                    currentTarget.parent().addClass('show');
                }
            } else if (currentTarget.is('ol li a')) {
                var index = currentTarget.parent().prevAll().length;
                
                selectedOption = $('option', this)[index];
                newValue =selectedOption.getAttribute('value');
                $('select', this).val(newValue);

                $('b', this).text(currentTarget.text());
                $('select', this).change();
                //To remove dissapearing of the dropdown after click, we have commented it out
                deSelect();
                $('#refineSearchForm').submit();
            }
            e.preventDefault();
        }).hover(function () {
        },
            function () {
                if ($('.select-box', this).hasClass('show')) {
                    setTimeout("deSelect()", 300);
                }
            });
    });
}

$(document).ready(function () {
    $(".dropdown .select-box ol").on({
        mouseenter:
                function () {
                    $(this).addClass("show-ol");
                    $(this).parent().parent().addClass("show");
                },
        mouseleave:
               function () {
                   $(this).removeClass("show-ol");
                   $(this).parent().parent().removeClass("show");
               }
    });

    //if (typeof $.browser != 'undefined') {
    //$.browser = '{}';

        $.browser = { msie: (navigator.appName == 'Microsoft Internet Explorer') ? true : false };
        $.browser = { safari: (navigator.appName == 'Safari') ? true : false };
        console.info("What Browser is this"+$.browser);

    //}

});
addLoadEvent(loadSelect);