Blue Angels in Black and White

<script type="text/javascript">
var ImageLoaderDevV1 = function() { };

ImageLoaderDevV1.prototype.url_to_call = function() {
  return this._url_template.replace('[WIDTH]', this.url_request_width()).replace('[HEIGHT]', this.url_request_height()).replace('[QUALITY]', this._quality).replace('[IMAGE_NAME]', this._image_name) 
};

ImageLoaderDevV1.prototype.img_tag = function() {
  return '<img class="center-block" src="' + this.url_to_call() + '" width="' + this.render_width() + '" height="' + this.render_height() + '" />'
};

ImageLoaderDevV1.prototype.load_params = function(params) {
  // This is the core funciton that takes all possible inputs.
  // Convience methods will be used in production, but they will all communicate
  // load_params. 

  // Required
  this._image_name = params["image_name"];
  this._viewport_height = params["viewport_height"];
  this._viewport_width = params["viewport_width"];
  this._raw_height = params["raw_height"];
  this._raw_width = params["raw_width"];
  this._url_template = params["url_template"];

  // Optional 
  this._dpr = params["dpr"] ? params["dpr"] : 1;
  this._max_render_width = params["max_render_width"] ? params["max_render_width"] : params["raw_width"];
  this._percent_of_viewport_width = params["percent_of_viewport_width"] ? params["percent_of_viewport_width"] : 100;
  this._quality = params["quality"] ? params["quality"] : 80;
};

ImageLoaderDevV1.prototype.render_height = function() {
  return  Math.floor(this._raw_height * this.render_width() / this._raw_width );
};

ImageLoaderDevV1.prototype.render_width = function() {
  return Math.floor(Math.min(this._max_render_width, (this._percent_of_viewport_width * .01 * this._viewport_width)));
};

ImageLoaderDevV1.prototype.url_request_height = function() {
  return this.render_height() * this._dpr; 
};

ImageLoaderDevV1.prototype.url_request_width = function() {
  return this.render_width() * this._dpr; 
};

var imageLoader = new ImageLoaderDevV1;

</script>




<div class="photoWrapper">
<script type="text/javascript">
  imageLoader.load_params(
    {
      dpr: window.devicePixelRatio ? window.devicePixelRatio : 1,
      image_name: "aws-20161106--1543-17a-blue-angels.jpg",
      quality: 85,
      percent_of_viewport_width: 94,
      max_render_width: 720,
      raw_height: 1047,
      raw_width: 1600,
      viewport_height: window.innerHeight,
      viewport_width: window.innerWidth,
      url_template: "http://res.cloudinary.com/awsimages/image/upload/w_[WIDTH],h_[HEIGHT],q_[QUALITY]/i/[IMAGE_NAME]"
    }
  );
  document.write(imageLoader.img_tag());
</script>
</div>

<br /><br />

<div class="photoWrapper">
<script type="text/javascript">
  imageLoader.load_params(
    {
      dpr: window.devicePixelRatio ? window.devicePixelRatio : 1,
      image_name: "aws-20161106--1517-04a-blue-angels.jpg",
      quality: 85,
      percent_of_viewport_width: 94,
      max_render_width: 720,
      raw_height: 1037,
      raw_width: 1600,
      viewport_height: window.innerHeight,
      viewport_width: window.innerWidth,
      url_template: "http://res.cloudinary.com/awsimages/image/upload/w_[WIDTH],h_[HEIGHT],q_[QUALITY]/i/[IMAGE_NAME]"
    }
  );
  document.write(imageLoader.img_tag());
</script>
</div>

<br /><br />

<div class="photoWrapper">
<script type="text/javascript">
  imageLoader.load_params(
    {
      dpr: window.devicePixelRatio ? window.devicePixelRatio : 1,
      image_name: "aws-20161106--1534-06b-blue-angels.jpg",
      quality: 85,
      percent_of_viewport_width: 94,
      max_render_width: 720,
      raw_height: 687,
      raw_width: 1600,
      viewport_height: window.innerHeight,
      viewport_width: window.innerWidth,
      url_template: "http://res.cloudinary.com/awsimages/image/upload/w_[WIDTH],h_[HEIGHT],q_[QUALITY]/i/[IMAGE_NAME]"
    }
  );
  document.write(imageLoader.img_tag());
</script>
</div>


<br /><br />

<div class="photoWrapper">
<script type="text/javascript">
  imageLoader.load_params(
    {
      dpr: window.devicePixelRatio ? window.devicePixelRatio : 1,
      image_name: "aws-20161106--1543-11a-blue-angels.jpg",
      quality: 85,
      percent_of_viewport_width: 94,
      max_render_width: 720,
      raw_height: 729,
      raw_width: 1600,
      viewport_height: window.innerHeight,
      viewport_width: window.innerWidth,
      url_template: "http://res.cloudinary.com/awsimages/image/upload/w_[WIDTH],h_[HEIGHT],q_[QUALITY]/i/[IMAGE_NAME]"
    }
  );
  document.write(imageLoader.img_tag());
</script>
</div>


<br /><br />

<div class="photoWrapper">
<script type="text/javascript">
  imageLoader.load_params(
    {
      dpr: window.devicePixelRatio ? window.devicePixelRatio : 1,
      image_name: "aws-20161106--1538-24a-blue-angels.jpg",
      quality: 85,
      percent_of_viewport_width: 94,
      max_render_width: 720,
      raw_height: 1093,
      raw_width: 1600,
      viewport_height: window.innerHeight,
      viewport_width: window.innerWidth,
      url_template: "http://res.cloudinary.com/awsimages/image/upload/w_[WIDTH],h_[HEIGHT],q_[QUALITY]/i/[IMAGE_NAME]"
    }
  );
  document.write(imageLoader.img_tag());
</script>
</div>





<br /><br />

<div class="photoWrapper">
<script type="text/javascript">
  imageLoader.load_params(
    {
      dpr: window.devicePixelRatio ? window.devicePixelRatio : 1,
      image_name: "aws-20161106--1537-05b-blue-angels.jpg",
      quality: 85,
      percent_of_viewport_width: 94,
      max_render_width: 720,
      raw_height: 961,
      raw_width: 1600,
      viewport_height: window.innerHeight,
      viewport_width: window.innerWidth,
      url_template: "http://res.cloudinary.com/awsimages/image/upload/w_[WIDTH],h_[HEIGHT],q_[QUALITY]/i/[IMAGE_NAME]"
    }
  );
  document.write(imageLoader.img_tag());
</script>
</div>