//FORMS VALIDATION AND EVENTS

if ($.browser.msie && parseInt($.browser.version, 10) === 7) {
    var ie7 = 1;
}

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

$(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');
            }
        });

        // Causes validation to fire in IE.
        //$(':text').blur();

        $(active).focus();


        if ($(this).attr('placeholder')) {
            $('form').submit(function () {
                $(this).find('.hasPlaceholder').each(function () { $(this).val(''); });
            });
        }
    }

    $('form input[type=submit]:not(.nav-searchBox-ct fieldset input[type=submit])').each(
       function () {
           var buttonLabel = $(this).attr('value');
           if ($(this).attr('class') == 'cp-submit') {
               $(this).after('<button class="btn cp-submit">' + buttonLabel + '</button>');
           } else {
               $(this).after('<button class="btn">' + buttonLabel + '</button>');
           }
           $(this).remove();
       }
    );

    $('button.cp-submit').click(
       function () {
           $(this).closest('fieldset').find('.cp-loader').show();
           $(this).closest('form').submit();
       }
    );

    customSelect();
    selectValue = $('#CourseType').val();

});  

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

customSelect = function () {
    $('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);
                    $(title).truncateText({ maxLength: 14 });
                }

                if (isSelected && i) {
                    title.text($(this).text());
                    $(title).truncateText({ maxLength: 14 });
                }

                $('<li><a href="/">' + $(this).text() + '</a></li>').appendTo(selectList);

            });

            selectBox.insertAfter($(this));

        });

    });

    customSelectClick();

    $('.form-select b').each(function () {
        $(this).wrapAll("<a class='selectBox' href=''></a>");
    });

};

customSelectClick = function (call) {

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

        if (ie7) {
            $('#tabs-3 .btn').hide();
        }

        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;

            $(this).closest('.form-select').find('option').removeAttr('selected');
            var selectElement = $(this).closest('form').find('select');
            $('option', this).eq(index).attr('selected', 'selected');
            $('b', this).text(currentTarget.text()).truncateText({ maxLength: 14 });

            if ($(selectElement).attr('id') == 'SearchMethod' && $('option[selected=selected]', selectElement).val() == 'Club Name') {
                $('.cp-labelDistance, .cp-dropdownDistance, .mod-gTable-searchResults .cThree span').hide();
            } else {
                $('.cp-labelDistance, .cp-dropdownDistance, .mod-gTable-searchResults .cThree span').show();
            };

            $('#refineSearchForm, #SeasonSubmit, .mod-FaCup-results form').submit();

            if ($('#CourseType').val() != selectValue) {
                selectValue = $('#CourseType').val();
                searchCoursesCallback();
            }

            //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')) {
                    if (!ie7) {
                        setTimeout("deSelect()", 300);
                    }
                } else {
                    $('#tabs-3 .btn').show();
                }

            });

}

   /* SELECT ELEMENT */

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

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

  /* CUSTOM TEXT INPUTS */
  $('.text-box.single-line').attr('class', 'input-text');

  /* 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 ($.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 ($.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 ($.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'>2000</a></span> <span class='cp-buttonHolder-two'><a href='#item-1900' class='cp-button'>1900</a></span> <span class='cp-buttonHolder-three'><a href='#item-1800' class='cp-button'>1800</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(1900-1901)');

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

      $(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");
          });


      });

      /* On Tab keypress add class to element with focus */
      $(document).live('keyup', function (e) {
          var currentElement = document.activeElement;
          $('.hasFocus').removeClass('hasFocus');
          if (e.keyCode == 27) {
              $('.show').removeClass('show');
          }
          if (e.keyCode == 9) {
              if ($(currentElement).is(':focus')) {
                  $(currentElement).addClass('hasFocus');
              }
              if ($(currentElement).parent().children('ol').length > 0) {
                  $(currentElement).parent().addClass('show');

                  var getLength = $(currentElement).parent().children().children('li').length;
                  var sum = 0;

                  if (getLength > 5) {
                      $(currentElement).parent().addClass('oScroll show');
                  }
              }
          }
          $(document).live('keydown', function (e) {
              if (e.keyCode == 9) {
                  if ($('.show li:last a').is(':focus')) {
                      $('.show').removeClass('show');
                      $('.oScroll').removeClass('oScroll');
                  }
              }
          });
          $('body').click('live', function () {

              if ($('.select-box').hasClass('show')) {
                  $('.select-box').removeClass('show');
              }

          })
      });

      $('.selectBox').live("click", function () {
          $(this).parent().toggleClass('show');

          var getLength = $(this).parent().children().children('li').length;
          var sum = 0;

          if (getLength > 5) {
              $(this).parent().addClass('oScroll');
          }

          else {
              $('.select-box').removeClass('oScroll');
          }

      });

      /* Set widths of dropdowns*/
      $('.select-box a').click(function () {
          var widthofParent = $(this).innerWidth();
          $(this).parent().children('ol').innerWidth(widthofParent - 2);
          $(this).parent().children().children('li').innerWidth(widthofParent - 2);

          var length, max = 0;
          $(this).parent().children().children('li').each(function () {
              length = $(this).text().length;
              max = length > max ? length : max;
          });

          if (max > 25) {
              $(this).parent().children('ol').css('width','auto')
              $(this).parent().children().children('li').css('width', 'auto')
          }
      });

  });