$(document).ready(function () {
	"use strict";

	var selectBoxes = {};

	function SelectBox(id, config) {
		// private variables and methods
		var _optionsContainer = $('#' + id).find('div.select-options-inner-container'),
			_upBtn = _optionsContainer.parent().prev('a'),
			_downBtn = _optionsContainer.parent().next('a'),
			_optionHeight = config.optionHeight,
			_optionsPerScreen = config.optionsPerScreen,
			_pos = 0,
			_options = _optionsContainer.find('a');

		function toggleBtn(btn) {
			if (btn.hasClass('active')) {
				btn.removeClass('active');
			} else {
				btn.addClass('active');
			}
		}

		// intialize

		_upBtn.removeClass('active');
		if (_options.length <= _optionsPerScreen) {
			_downBtn.removeClass('active');
		}

		// public methods and variables

		this.interval = null;
		this.value = null;
		this.moveUp = function () {
			var that = this;
			if (_pos && _upBtn.hasClass('hover') && _upBtn.hasClass('active')) {
				_optionsContainer.animate({
					'marginTop': '+=' + _optionHeight + 'px'
				}, {
					duration: 60,
					complete: function () {
						_pos -=1;
						if (!_pos) {
							toggleBtn(_upBtn);
						}
						if (!_downBtn.hasClass('active') && (_pos + (_optionsPerScreen - 1)) < _options.length) {
							toggleBtn(_downBtn);
						}
						that.moveUp();
					}
				})
			}
		},
		this.moveDown = function () {
			var that = this;
			if (_pos < (_options.length - _optionsPerScreen) && _downBtn.hasClass('hover') && _downBtn.hasClass('active')) {
				_optionsContainer.animate({
					'marginTop': '-=' + _optionHeight + 'px'
				}, {
					duration: 60,
					complete: function () {
						_pos += 1;
						if (_pos === (_options.length -  _optionsPerScreen)) {
							toggleBtn(_downBtn);
						}
						if (_pos && !_upBtn.hasClass('active')) {
							toggleBtn(_upBtn);
						}
						that.moveDown();
					}
				});
			}
		};
	}

	$('.select-box').hoverIntent({
		over: function () {
			$(this).addClass('over');
		},
		out: function () {
			$(this).removeClass('over');
		},
		timeout: 300
	});

	$('.select-options-inner-container a').click(function (e) {
		e.preventDefault();
		var face = $(this).closest('.select-options').prev('.select-face'),
			value = $(this).index(),
			sb = selectBoxes[$(this).closest('.select-box').prop('id')];
		sb.value = value;
		face.html($(this).html());
	});

	$('div.select-box').each(function (i, el) {
		var id = $(el).prop('id');
		selectBoxes[id] = new SelectBox(id, {
			optionHeight: 25,
			optionsPerScreen: 12
		});
	});

	function btnHoverOut(context) {
		var sbId = $(context).closest('div.select-box').prop('id'),
			sb = selectBoxes[sbId];
		$(context).removeClass('hover');
	}

	function btnHoverOver(context, func) {
		var sbId = $(context).closest('div.select-box').prop('id'),
			sb = selectBoxes[sbId];
		$(context).addClass('hover');
		sb[func]();
	}

	$('a.up').hoverIntent({
		over: function () {
			btnHoverOver(this, 'moveUp');
		},
		out: function () {
			btnHoverOut(this);
		}
	});

	$('a.down').hoverIntent({
		over: function () {
			btnHoverOver(this, 'moveDown');
		},
		out: function () {
			btnHoverOut(this);
		}
	});

	$('#submit').click(function () {
		var form = $('#form form');
		$.each(selectBoxes, function (i, sb) {
			if (sb.value !== null) {
				$('#form-' + i).val(sb.value);
			}
		});
		form.submit();
	});

	$.fn.supersized.options = {
		startwidth: 900,
		startheight: 840,
		slideshow: 0,
		vertical_center: 1
	};

	$('#supersize').supersized();
});