@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100);

$blue: #09f;
$white: #fff;
$gray: #aaa;
$dark: #171717;
$roboto: 'Roboto', sans-serif;

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: $roboto;
  font-weight: 300;
  background-color: #1e1e1e;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1 {
  padding-top: 40px;
  color: $white;
  font-weight: 300;
  text-align: center;
  text-shadow: 2px 2px 13px $dark;
}

//Coolal styles
#coolal {
  display: block;
  position: fixed;
  top: calc(100% / 2);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  padding-top: 25px;
  width: 350px;
  opacity: 0;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  
  .coolal-title, .coolal-text, #coolal-btnWrapper {
    margin: 0;
    padding: 5px;
    
    color: $dark;
    font-size: 1.3em;
    text-decoration: none;
  }

  .coolal-title {
    font-weight: bold;
  }

  .coolal-text {
    margin-top: -10px;
    padding-bottom: 20px;
    font-size: 1em;
    border-bottom: 0;
  }

  #coolal-btnWrapper {
    display: block;
    padding: 0;
    border-top: 1px solid $gray;
    border-bottom: 0;
  }

  #coolal-btnWrapper a {
    display: inline-block;
    margin: 0;
    padding-top: 9px;
    height: 37px;

    color: $blue;
    text-decoration: none;
  }

  #coolal-btnWrapper a:hover {
    background-color: rgba(0,0,0,0.1);
  }

  .coolal-alert {
    width: 100%;
    border-radius: 0 0 8px 8px;
  }

  .coolal-yes-no {
    width: calc( 100% / 2 - 1px);
  }

  .coolal-yes-no:first-child {
    border-right: 1px solid $gray;
    border-radius: 0 0 0 8px;
  }
}

function coolal(type, title, text) {
  //Create the alert
  var alert = $("body").append(
    "<div id='coolal' class=" + type + "><h2 class='coolal-title'>" + 
    title +
    "</h2><p class='coolal-text'>" +
    text +
    "</p></div>"   
  );
  
  var coolal = $("#coolal");
  
  //Check what type of alert is being used 
  if ( type == "alert") {
    $("#coolal").append(      
      "<div id='coolal-btnWrapper'><a id='coolal-btn' class='coolal-alert' href='#'>Ok</a></div>"
    );

    var coolalAlert = $(".coolal-alert");

    coolalAlert.click(function(){
      coolal.animate({
        "opacity":"0",
        "top":"70%" 
      }, 200);

      setTimeout(function() {
        coolal.remove();
      }, 500);
    });
  }
  
  if ( type == "yes-no" ) {
    $("#coolal").append(      
      "<div id='coolal-btnWrapper'><a id='coolal-btn' class='coolal-yes-no coolal-yes' href='#'>Yes</a><a id='coolal-btn' class='coolal-yes-no coolal-no' href='#'>No</a></div>"
    );

    var yesNo = $(".coolal-yes-no");
    var yes = $(".coolal-yes");
    var no = $(".coolal-no");

    no.click(function(){
      coolal.animate({
        "opacity":"0",
        "top":"70%"
      }, 200);

      setTimeout(function() {
        coolal.remove();
      }, 500);
    });
  } 
  
  //Resize the alert windows to fit the content
  var titleHeight = $(".coolal-title").innerHeight();
  var textHeight = $(".coolal-text").innerHeight();
  var btnWrapperHeight = $("#coolal-btn").height();
 
  if ( type != "" ) {
    $("#coolal").css("height", titleHeight + textHeight + btnWrapperHeight);
  } else { 
    $("#coolal").css("height", titleHeight + textHeight); 
  }  
   
  $("#coolal").animate({
    "opacity":"1",
    "top":"0" 
  }, 200); 
} 

//////////////////////////////////////////////////
$(document).ready(function() { 
  setTimeout(function() {
    coolal("yes-no"/*Change this value to "alert" or "yes-no"*/, "IOS Alert", "IOS like custom alert box<br /> made with custom alert function");
  }, 1000)
});