// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
ZURB = {Verify: {globals: {}, methods: {}}};

ZURB.Verify.methods.prepCreateResponse = function (response) {
  if (google.loader.ClientLocation) {
		response.country = google.loader.ClientLocation.address.country;
		response.country_code = google.loader.ClientLocation.address.country_code;
		response.state = google.loader.ClientLocation.address.region;
		response.city = google.loader.ClientLocation.address.city;
	}
	
	response.view_id = ZURB.Verify.globals.viewId;
	
	return response;
};

(function($){
  
	$.genericTestBindings = function () {
		
		$('#instructionContainer').center();
		
		$('#startTest').click(function (event) {
			event.preventDefault();
			$('#instructionContainer').fadeOutAndSlide({offset: 500, complete: function () {
				$(document).trigger('dismissInstructions');
			}});
		});
		
		$(document).bind('showHud', function () {
			$('#instructionsHud').fadeInAndSlide({offset: -100});
		});
		
		$(document).bind('dismissHud', function () {
			$('#instructionsHud').fadeOutAndSlide({offset: 100});
		});
		
		function updateResponseId(id) {
		  $('#demographicsForm').attr('action', $('#demographicsForm').attr('action').replace('RESPONSE_ID', id));
		}
		
		$(document).bind('submitTest', function (event, responseId) {
		  if (ZURB.Verify.globals.linkedTest && ZURB.Verify.globals.nextTestPath === undefined) {
		    data = {response: {
		      test_id: ZURB.Verify.globals.linkedTestId,
		      preview: ZURB.Verify.globals.previewing
		    }};
		    ZURB.Verify.methods.prepCreateResponse(data.response);
		    $.ajax({
  				url: '/linked_test_responses',
  				type: 'POST',
  				data: data,
  				success: function (response) {
  				  updateResponseId(response);
  				}
  			});
		  }
		  
      if (ZURB.Verify.globals.nextTestPath) {
        window.location = ZURB.Verify.globals.nextTestPath;
      } else if ($('#demographicsContainer').length) {
        if (!ZURB.Verify.globals.linkedTest || ZURB.Verify.globals.nextTestPath !== undefined) {
          updateResponseId(responseId);
        }
				$('#demographicsContainer').center().fadeInAndSlide();
			} else {
				$(document).trigger('showThanks');
			}
		});
		
		$('#instructionsHud').click(function (event) {
			event.preventDefault();
			
			$(document).trigger('dismissHud');
			$('#testContainer').fadeOutAndSlide({offset: -80, complete: function () {
				$('#instructionContainer').fadeInAndSlide();
			}});
		});

		$('#demographicsForm').submit(function (event) {
			event.preventDefault();
			
			$('#demographicsContainer').fadeOutAndSlide({complete: function () {
				$(document).trigger('showThanks');
			}});
			
			$.ajax({
				url: $(this).attr('action'),
				type: 'PUT',
				data: $(this).serialize()
			});
			
      $.each($(this).serializeArray(), function () {
        if (this.name.match(/response\[.+\]/)) {
          $.cookie(this.name, this.value);
        }
      });
		});

		$(document).bind('showThanks', function () {
			$('#thanksContainer').center().fadeInAndSlide();
		});

	};
	
	$.testId = function () {
		return ZURB.Verify.globals.testId;
	}
	
	$.fn.center = function (options) {
		options = $.extend({ topOffset: -40, leftOffset:0 }, options);
		var element = this.first();
		
		if ($(window).width() > 0) {
			center();
		} else {
			setTimeout(center, 20);
			// $(window).load(center);
		}
		
		function center() {
			var left = ($(window).width() / 2) - (element.outerWidth() / 2) + options.leftOffset + 'px';
			var top = ($(window).height() / 2) - (element.outerHeight() / 2) + options.topOffset + 'px';
			element.css({left: left, top: top});
		}
		
		return this;
	};
	
	$.fn.gridViewFlip = function () {
	  var timeout,
	      leaveTimeout,
	      infoLink = this.find('.test-info-toggle');
	      
    infoLink.hover(function () {
      var element = $(this).closest('li');
      timeout = setTimeout(function () {
        element.addClass('hover');
      }, 1500);
    }, function () {
      clearTimeout(timeout);
    });
    
    this.mouseleave(function () {
      var element = $(this);
      leaveTimeout = setTimeout(function () {
        element.removeClass('hover');
      }, 500);
    });
    
    infoLink.click(function (event) {
      event.preventDefault();
      var element = $(this).closest('li');
      element.toggleClass('hover');
    });
	};
	
	$.fn.centerImage = function() {
		this.each(function () {
		  var container = $(this).parent();
		  var img = $(this);
		  
		  function center() {  
    		container.css('width', img.width());
  		}
  		
		  if (container.width() > 0) {
  			center();
  		} else {
  			setTimeout(center, 20);
  		}
		});
	};
	
	$.fn.imageLoaded = function(callback) {
		var image = this.first();
		if (image.attr('complete') === true) {
			callback();
		} else {
			image.load(callback);
		}
	}
	
	$.fn.toggleSwitch = function (options) {
	  options = $.extend({ onactivate: function(){}, ondeactivate: function(){} }, options);
	  var toggleLocked = false,
	      offset = 52,
	      toggle = $(this);
	  
	  function toggleState(event) {
  		if (!toggleLocked) {
  			toggleLocked = true;
  			if (toggle.hasClass('running')) {
  				$.post($('#paused').attr('href'), {'_method': 'put'}, function(){
  					options.ondeactivate();
  				});
  				$(".slider", toggle).animate({"right": "+="+offset+"px"}, "fast", function(){
  					toggle.addClass('paused').removeClass('running');
  					toggleLocked = false;
  				});
  			} else {
  				$.post($('#running').attr('href'), {'_method': 'put'}, function(){
  					options.onactivate();
  				});
  				$(".slider", toggle).animate({"right": "-="+offset+"px"}, "fast", function(){
  					toggle.addClass('running').removeClass('paused');
  					toggleLocked = false;
  				});
  			}
  		}
  	}
  	
  	toggle.mouseup(toggleState);
	};
	
	$.fn.testCountdown = function (options) {
	  options = $.extend({ paused: false }, options);
	  
	  var timeRemaining = $(this);
	  if (options.timeLeft != Infinity) {
  	  if (options.timeLeft < 86400) {
  	    timeRemaining.countdown({
    			until: options.timeLeft,
    			layout: '<span>{h10}<div></div></span><span>{h1}<div></div></span>:<span>{m10}<div></div></span><span>{m1}<div></div></span>:<span>{s10}<div></div></span><span>{s1}<div></div></span>'
    		});
  	  } else {
  	    timeRemaining.countdown({
    			until: options.timeLeft,
    			layout: '<span>{d1}<div></div></span><span>D<div></div></span>:<span>{h10}<div></div></span><span>{h1}<div></div></span>:<span>{m10}<div></div></span><span>{m1}<div></div></span>'
    		});
  	  }
  	  if (options.paused) {
  			timeRemaining.countdown('pause');
  		}
  	}
	};
	
	$.fn.permissionsButtons = function () {
	  var permissionRadioButtons = $(this);
	  permissionRadioButtons.change(function () {
  		var data = {
  			_method: 'PUT', 
  			test: {report_permission: $(this).val()}
  		};
  		permissionRadioButtons.disable()
  		$.post($('#setPermissions').attr('action'), data, function () {
  			permissionRadioButtons.enable();
  		});
  	});
	};
	
	ZURB.Verify.methods.configurationActions = function () {
	  $('.test-instrutions').focus(function(){
  		this.select();
  	});
  	
  	function updateCharacterCount() {
  	  var input = $('.test-instrutions');
  	      charactersLeft = 140 - parseInt(input.val().length),
  	      characterCounter = input.prevAll('.char-counter');
  	  
      characterCounter.html(charactersLeft);
      if (charactersLeft < 0) {
        characterCounter.addClass('too-long');
        $('button:submit').disable();
      } else {
        characterCounter.removeClass('too-long');
        $('button:submit').enable();
      }
  	}
  	updateCharacterCount();
  	$('.test-instrutions').bind('textchange', updateCharacterCount);
  	
  	var container = $('.example-questions'),
  	    exampleQuestions = container.find('dd');
  	container.find('dt a').click(function (event) {
  	  event.preventDefault();
  	  
  	  $(this).hide();
  	  exampleQuestions.show();
  	});
  	
  	exampleQuestions.click(function (event) {
  	  event.preventDefault();
  	  
  	  container.prevAll('textarea').val($(this).find('a').html()).trigger('textchange');
  	});
	};
	
	ZURB.Verify.methods.imageUploadAction = function (options) {
	  $('.upload-screenshot').testConfigurationUpload(options);
  	$('.url-capture').captureByUrl(options);
  	$('.notable-upload').uploadFromNotable(options);
  	
  	$('div.tab-container li').click(function (event) {
  	  event.preventDefault();
  	  var container = $(this).closest('.tab-container');

  	  $('li', container).removeClass('active');
  	  $('.tab', container).hide();
  	  $(this).addClass('active');
  	  $('.' + $(this).attr('data-tab-class'), container).show();
  	});
	};
	
	$.fn.thumbStartLoading = function () {
	  this.addClass('loading');
		$('button:submit').disable({text: 'Uploading...'});
		$('div.tab-container').addClass('loading');
	};
	$.fn.thumbStopLoading = function (thumbSrc) {
	  var previewDiv = this;
	  var thumb = previewDiv.children('img');
	  thumb.load(function(){
			previewDiv.removeClass('loading');
			$('div.tab-container').removeClass('loading');
			thumb.unbind();
		});
		thumb.attr('src', thumbSrc);
		$('button:submit').enable();
	};
	
	// AJAX upload Plugin
	$.fn.testConfigurationUpload = function(options) {
		var defaults = {
	    name: 'screenshot',
			onComplete: function(){},
			data: {}
	  };
		var options = $.extend(defaults, options);
		
		this.each(function(){
			var input = $(this);
			var container = input.closest('div.tab-container');
			var previewDiv = container.siblings('div.preview');
			var thumb = previewDiv.children('img');

			new AjaxUpload(input, {
				action: input.attr('href'),
				name: options.name,
				data: options.data,
				onSubmit: function(file, extension) {
				  previewDiv.thumbStartLoading();
				},
				onComplete: function(file, response) {
          if (response == '') {
            $('div.tab-container').removeClass('loading');
            previewDiv.removeClass('loading');
            alert('Invalid image type');
          } else {
            var data = $.parseJSON(response);
  					previewDiv.thumbStopLoading(data.thumb);
  					options.onComplete(data);
          }
				}
			});
		});
		
		return this;
	}
	
	$.fn.uploadFromNotable = function (options) {
	  var defaults = { onComplete: function(){} };
	  options = $.extend(defaults, options);
	  
	  this.each(function () {
	    var postIdInput = $(this);
  	  var previewDiv = postIdInput.parents('div.tab-container').siblings('div.preview');
  	  var captureButton = postIdInput.siblings('a').first();

  	  function capture() {
  	    var match = postIdInput.val().match(/.*?([0-9]+).*?/);
    	  var postId = match ? match[1] : null;
  	    previewDiv.thumbStartLoading();
        $.post(captureButton.attr('href'), {post_id: postId}, function (response) {
          previewDiv.thumbStopLoading(response.thumb);
          options.onComplete(response);
    	  });
  	  }

  	  captureButton.click(function (event) {
  	    event.preventDefault();
  	    capture();
  	  });

  	  postIdInput.keypress(function (event) {
  	    if (event.which === 13) {
  	      event.preventDefault();
  	      capture();
  	    }
  	  });
	  });
	};
	
	$.fn.captureByUrl = function (options) {
	  var defaults = { onComplete: function(){} };
	  options = $.extend(defaults, options);
	  
	  this.each(function () {
	    var urlInput = $(this);
  	  var captureButton = urlInput.siblings('a').first();
  	  var previewDiv = urlInput.closest('div.tab-container').siblings('div.preview');
  	  var thumb = previewDiv.children('img');
  	  var alternate = captureButton.attr('data-alternate') == 'true';
  	  var captureId;
  	  var pageId = captureButton.attr('data-page-id');

  	  function callback(response) {
  	    if (response.complete) {
          previewDiv.thumbStopLoading(response.thumb);
          options.onComplete(response);
        } else if (response.error) {
          alert('Try a different url');
          previewDiv.removeClass('loading');
          $('button:submit').enable();
        } else {
          captureId = response.capture_id;
          setTimeout(checkStatus, 3000) ;
        }
  	  }

  	  function checkStatus() {
  	    $.get(captureButton.attr('href') + '/' + captureId, {alternate: alternate, page_id: pageId}, callback);
  	  }

  	  function capture() {
  	    previewDiv.thumbStartLoading();
  	    $.post(captureButton.attr('href'),{ url: urlInput.val(), alternate: alternate, page_id: pageId}, callback);
  	  }

  	  captureButton.click(function (event) {
  	    event.preventDefault();
  	    capture();
  	  });

  	  urlInput.keypress(function (event) {
        if (event.which === 13) {
          event.preventDefault();
          capture();
        }
  	  });
	  });
	};
	
	// Annotation Plugin
	$.fn.annotatableImage = function(options) {
		var defaults = {
	    xPosition: 'middle',
	    yPosition: 'middle'
	  };
		var options = $.extend(defaults, options);
		
		var annotations = [];
		var image = $('img', this)[0];
		var date = new Date();
		var startTime = date.getTime();
		
		this.mousedown(function(event){
			if (event.target == image) {
				event.preventDefault();
				
				var element = $.fn.annotatableImage.annotation();
				annotations.push(element);
				$(this).append(element);
				
				element.positionAtEvent(event, options.xPosition, options.yPosition);
				
				var date = new Date();
				element.data('responseTime', date.getTime() - startTime);
			}
		});
	};
	
	$.fn.addAnnotations = function(annotations, options) {
		var container = this;
		var containerHeight = $(container).height();
		var defaults = {
	    xPosition: 'middle',
	    yPosition: 'middle',
			height: containerHeight,
			template: $.fn.annotatableImage.annotation
	  };
		var options = $.extend(defaults, options);
		
		$.each(annotations, function() {
			var element = $(options.template(this));
			element.css({position: 'absolute'});
			
			$(container).append(element);
			
			var left = (this.x * $(container).width()) - ($(element).xOffset(options.xPosition));
			var top = (this.y * options.height) - ($(element).yOffset(options.yPosition));
			if (this.width && this.height) {
				var width = (this.width * $(container).width());
				var height = (this.height * $(container).height());
				element.css({width: width + 'px', height: height + 'px'});
			}
			
			element.css({ left: left + 'px', top: top + 'px'});
			if (top > containerHeight) {
				element.hide();
			}
		});
	};
	
	$.fn.positionAtEvent = function(event, xPosition, yPosition) {
		var container = $(this).parent('div');
		$(this).css('left', event.pageX - container.offset().left - ($(this).xOffset(xPosition)) + 'px');
		$(this).css('top', event.pageY - container.offset().top - ($(this).yOffset(yPosition)) + 'px');
	};
	
	$.fn.seralizeAnnotations = function(xPosition, yPosition) {
		var annotations = [];
		this.each(function(){
			annotations.push({x: $(this).relativeX(xPosition), y: $(this).relativeY(yPosition), response_time: $(this).data('responseTime')});
		});
		return {'annotations': annotations};
	};
	
	$.fn.relativeX = function(xPosition) {
		var left = $(this).coordinates().left + ($(this).xOffset(xPosition));
		var width = $(this).parent().width();
		return left / width;
	}
	
	$.fn.relativeY = function(yPosition) {
		var top = $(this).coordinates().top + ($(this).yOffset(yPosition));
		var height = $(this).parent().height();
		return top / height;
	}
	
	$.fn.relativeWidth = function() {
		return $(this).width() / $(this).parent().width();
	}
	
	$.fn.relativeHeight = function() {
		return $(this).height() / $(this).parent().height();
	}
	
	$.fn.xOffset = function(xPosition) {
		switch (xPosition) {
			case 'left': return 0; break;
			default: return $(this).width() / 2; // middle
		}
	};
	
	$.fn.yOffset = function(yPosition) {
		switch (yPosition) {
			case 'top': return 0; break;
			default: return $(this).height() / 2; // middle
		}
	};
	
	$.fn.blank=function() {
		return $.trim($(this).val()).length==0;
	}

	$.fn.hasDefaultValue=function() {
		return this[0].defaultValue == this.val();
	}
	
	$.fn.coordinates = function() {
		return {left: parseInt($(this).css('left').replace('px', '')), top: parseInt($(this).css('top').replace('px', ''))};
	};
	
	// $.fn.dimentions = function() {
	// 	return {height: parseInt($(this).css('height').replace('px', '')), width: parseInt($(this).css('width').replace('px', ''))};
	// };
	
	$.fn.fadeOutAndSlide = function (options) {
		var options = $.extend({offset: 80, complete: function(){}, duration: 300}, options);
		
		var self = this;
		this.animate({ top: '-=' + options.offset + 'px' }, {queue: false, duration: options.duration, complete: function () {
			self.animate({top: '+=' + options.offset + 'px'}, 0);
			options.complete();
		}});
		this.fadeOut(options.duration);
		
		return this;
	};
	
	$.fn.fadeInAndSlide = function (options) {
		var options = $.extend({offset: 80, complete: function(){}}, options);
		
		var self = this;
		this.animate({top: '+=' + options.offset + 'px'}, {duration: 0, queue: false});
		this.animate({ top: '-=' + options.offset + 'px' }, {queue: false});
		this.fadeIn(300, options.complete);
		
		return this;
	};
	
	$.fn.fadeInOneByOne = function (options) {
		var options = $.extend({duration: 300, complete: function(){}}, options);
		var elements = this;
		
		elements.each(function (index) {
			var element = $(this);
			setTimeout(function () {
				element.fadeIn();
				if (index === elements.length - 1) {
					options.complete();
				}
			}, options.duration*index);
		});
	}
	
	$.fn.instructionsHud = function() {
		var hud = this;
		$('a.toggle', this).click(function(event){
			$(hud).toggleClass('open closed');
		});
	};
	
	$.fn.disable = function(options) {
		var options = $.extend({text: false}, options);
		
		this.each(function(){
			var button = $(this),
			    disableCount = button.data('disableCount');
			    
			button.attr('disabled', true).addClass('disabled');
			if (!disableCount) {
			  disableCount = 1;
			} else {
			  disableCount += 1;
			}
			button.data('disableCount', disableCount);
			
			if (options.text) {
			  if (!button.data('originalText')) {
			    button.data('originalText', button.children('span').html());
			  }

				button.children('span').html(options.text);
			}
		});
		
		return this;
	};
	
	$.fn.enable = function(options) {
		this.each(function(){
			var button = $(this),
			    disableCount = button.data('disableCount');
			
			if (disableCount > 1) {
			  button.data('disableCount', disableCount - 1);
			} else {
			  button.data('disableCount', 0);
			  button.attr('disabled', false).removeClass('disabled');
  			if (originalText = button.data('originalText')) {
  				button.children('span').html(originalText);
  			}
			}
		});
		
		return this;
	};
	
	$.fn.requestUpgrade = function () {
	  var buttons = this;
	  buttons.unbind('click').click(function (event) {
      event.preventDefault();
      var element = $(this);
      if (!element.hasClass('disabled')) {
        var span = buttons.find('span');
        span.html('Sending...');
        buttons.addClass('disabled');
        $.post(
          this.href, 
          {_method: 'PUT', upgrade_to: $(this).attr('upgrade_to')},
          function () {
            buttons.removeClass('green').addClass('white');
            span.html('Email Sent');
          }
        );
      }
    });
	};

	$(document).ready(function(){


		// 	if (index == 0){
		// 		new Form.Observer(input.up('form'), 0.1, function(form, value) {
		// 			textboxes.each(function(inputX){
		// 				if (!inputX.value.empty()) {
		// 					inputX.previous().addClassName('hastext');
		// 				}
		// 			});
		// 		});
		// 	}
		// });
		$('.js-center').center();

		$('.test-url').click(function(event){
			this.select();
		});

		$('form.awesome input.input-text').each(function() {
			var label = $(this).prev();

			if (!$(this).blank()) {
				label.addClass('hastext');
			}

			$(this).focus(function(){
				if ($(this).blank()){
					label.addClass('focus');            
				}
			});

			$(this).blur(function(){
				if ($(this).blank()){
					label.removeClass('focus').removeClass('hastext');          
				}
			});

			$(this).keypress(function(){
				label.addClass('hastext');
			});
		});

		/* For the mega dropdowns */
		$('ul.nav li.dropdown').each(function(){
			$(this).mouseover(function(){
				$(this).addClass('opened');
			});					
			$(this).mouseout(function(){
				$(this).removeClass('opened');
			});
		});

	});

  $('input.read-only-share').live('click', function (event) {
    $(this).select();
  });
})(jQuery);