function Throbber(elementId) {
  this.options = {
    speedMS: 100,
    center: 4,
    thickness: 3,
    spokes:8,
    color: [0,0,0],
    style: "line" //set to "balls" for a different style of throbber
  };
  this.saved = false;
  this.c = document.getElementById(elementId);

  this.throb = function() {
    var ctx = this.c.getContext("2d");
    ctx.translate(this.c.width/2, this.c.height/2);
    var w = Math.floor(Math.min(this.c.width,this.c.height)/2);
    var self = this;
    var o = self.options;
    var draw = function() {
      ctx.clearRect(-self.c.width/2,-self.c.height/2,self.c.width,self.c.height)
      if(this.saved) { ctx.restore(); }
      ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
        ctx.shadowBlur = 2;
        ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
        for (var i = 0; i < o.spokes; i++) {
          a = Math.floor(100 / o.spokes * i) / 100;
          ctx.fillStyle = "rgba(" + o.color[0] + "," + o.color[1] + "," + o.color[2] + "," + a + ")";
        if(o.style == "balls") {
          ctx.beginPath();
          ctx.moveTo(w,0)
          ctx.arc(w-Math.floor(Math.PI*2*w/o.spokes/3),0,Math.floor(Math.PI*2*w/o.spokes/3),0,Math.PI*2,true);
          ctx.fill();
        } else { ctx.fillRect(o.center, -Math.floor(o.thickness/2), w-o.center, o.thickness); }
        ctx.rotate(Math.PI/(o.spokes/2))
        if(i == 0) {
            ctx.save();
            this.saved = true;
        }  
      }
    };
    draw();
    this.timer = setInterval(draw,this.options.speedMS);  
  };
  this.stop = function() {
    clearInterval(this.timer);
    this.c.getContext("2d").clearRect(-this.c.width/2,-this.c.height/2,this.c.width,this.c.height)
  };
};



$(document).ready(function(){

    $("#phone_number").mask("(999) 999-9999",{placeholder:"_"});

    $("#nav1").hover(function(){ $(this).toggleClass('ui-state-hover'); },function(){ $(this).toggleClass('ui-state-hover'); });
    $("#nav2").hover(function(){ $(this).toggleClass('ui-state-hover'); },function(){ $(this).toggleClass('ui-state-hover'); });
    $("#nav3").hover(function() { $(this).toggleClass('ui-state-hover'); }, function() { $(this).toggleClass('ui-state-hover'); });
    $("#nav4").hover(function() { $(this).toggleClass('ui-state-hover'); }, function() { $(this).toggleClass('ui-state-hover'); });
    $("#contact_send").hover(function(){ $(this).toggleClass('ui-state-hover'); },function(){ $(this).toggleClass('ui-state-hover'); });
    $("#contact_cancel").hover(function(){ $(this).toggleClass('ui-state-hover'); },function(){ $(this).toggleClass('ui-state-hover'); });




    $("#request_info").click(function(e){
        $("#status_message").text("");
        
        $("#captcha_image").attr("src", "/CaptchaImage.ashx?" + (new Date()).getTime());
                        
        $("#button_group_default").show();
        $("#button_group_ok").hide();
        $("#form_inner_container").show();
        
        tb_show(null, "http://www.bossproductsinc.com/#TB_inline?height=300&width=350&inlineId=contact_form&modal=true", false);
    });

    var t = new Throbber("cv");
    t.options.color = [200, 200, 200];
    t.options.center = 4;
    t.options.thickness = 1.5;
    t.options.spokes = 11;
    t.options.style = "line";

    $("#contact_cancel").click(function(e){
        tb_remove();
        
        $("#contact_name").val("");
        $("#phone_number").val("");
        $("#contact_message").val("");
        $("#captcha").val("");
    });

    $("#contact_send").click(function(e){
        // stop normal link click
        e.preventDefault();
        
        $("#status_message").text("");
        
        if($("#contact_name").val() == "" || $("#phone_number").val() == "" || $("#contact_message").val() == "")
        {
            $("#status_message").text("All fields are required.");
            $("#status_message").css("color", "#d00");
            return;
        }
        
        if($("#contact_message").val().length > 200)
        {
            $("#status_message").text("Message may only be 200 characters.");
            $("#status_message").css("color", "#d00");
            return;
        }

        t.throb();		

        // send request
        postVars = {name: $("#contact_name").val(),
                    phone_number: $("#phone_number").val(),
                    message: $("#contact_message").val(),
                    captcha: $("#captcha").val()};

        $.post("/Engine.ashx", postVars, function(data) {
            t.stop();

            if(data.result == 0)
            {
                $("#contact_name").val("");
                $("#phone_number").val("");
                $("#contact_message").val("");
                $("#captcha").val("");
                
                $("#button_group_default").hide();
                $("#button_group_ok").show();
                $("#form_inner_container").hide();
                
                $("#status_message").text("Your information has been sent.");
                $("#status_message").css("color", "#0d2");
                
            }else if(data.result == 1)
            {
                $("#captcha_image").attr("src", "CaptchaImage.ashx?" + (new Date()).getTime());
                $("#status_message").text("Your verification numbers did not match.");
                $("#status_message").css("color", "#d00");
                $("#captcha").val("");
                
            }else{                
                $("#captcha_image").attr("src", "CaptchaImage.ashx?" + (new Date()).getTime());
                $("#status_message").text("There was an error.");
                $("#status_message").css("color", "#d00");
                $("#captcha").val("");
            }

        }, "json");
        
        
    });

});
