Airplane cabin and seats

HTML

<%@ page contentType="text/html; charset=UTF-8"%>
  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <html>

    <head>

      <title>${productName}</title>

      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <link rel="icon" type="image/ico" href="resources/images/icons/favicon.png" />
      <link rel="stylesheet" type="text/css" href="extjs-4.2.1/resources/css/ext-all.css">

      <script type="text/javascript" src="extjs-4.2.1/ext-all.js"></script>

      <!--===============================================================================================-->
      <link rel="stylesheet" type="text/css" href="login/vendor/bootstrap/css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="login/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" type="text/css" href="login/vendor/animate/animate.css">
      <link rel="stylesheet" type="text/css" href="login/vendor/css-hamburgers/hamburgers.min.css">
      <link rel="stylesheet" type="text/css" href="login/vendor/select2/select2.min.css">
      <link rel="stylesheet" type="text/css" href="login/css/util.css">
      <link rel="stylesheet" type="text/css" href="login/css/main.css">
      <!--===============================================================================================-->

    </head>

    <body>

      <a href="http://www.pribas.com" target="_blank" alt="Powered by Pribas" id="poweredby"></a>

      <div class="container">

        <header>

          <div class="support-note" id="browsersupportnote">
            <span class="note-ie">
						
							Your browser is too old, sorry.<br>
	
							${productName} supports following browsers:<br><br>
							
							<a href="https://www.google.com/intl/en/chrome/browser/" style="color:#E8CA84">Chrome 18+</a><br>
							<a href="http://www.mozilla.org/en-US/firefox/new/"...

CSS

body {
  font-family: Arial;
  font-size: 11px;
  padding-top: 30px
}

.wingRowTop {
  position: absolute;
  border-collapse: collapse;
  border-spacing: 0px;
  margin-top: -37px;
  -webkit-transform: skew(-25deg);
  -moz-transform: skew(-25deg);
  -o-transform: skew(-25deg);
  transform: skew(-25deg);
}

.wingRowBottom {
  position: absolute;
  border-collapse: collapse;
  border-spacing: 0px;
  margin-top: 5px;
  -webkit-transform: skew(25deg);
  -moz-transform: skew(25deg);
  -o-transform: skew(25deg);
  transform: skew(25deg);
}

#seatmap {
  position: relative;
}

#seatmap table {
  border-collapse: separate;
  border-spacing: 3px;
}

#plane {
  width: 800px;
  height: auto;
  background: #fff;
  border: solid 1px #aaa;
  border-radius: 80px 0 0 80px;
  z-index: 1;
}

#plane .rows {
  width: 30px;
  float: left;
  empty-cells: show;
  margin-top: 5px;
  margin-left: 30px;
}

#plane .rows td {
  height: 16px;
  text-align: right;
}

#cabin {
  background-color: #dedede;
  border: none;
  border-left: double 3px #aaa;
  width: 727px;
  height: auto;
  padding: 2px 5px;
  float: left;
  margin-left: 0px;
}

#cabin td {
  width: 15px;
  height: 15px;
  border: solid 1px #666;
  border-radius: 7px 0 0 7px;
  text-align: center;
  cursor: pointer;
}

#cabin td.row {
  background-color: transparent;
  border: none;
  font-weight: bold;
  padding-right: 7px;
}

#cabin td.seatAvailable {
  background-color: #01B213;
  color: #fff;
}

#cabin td.seatUnavailable {
  background-color: #aaa !important;
  color: #ddd !important;
}

#cabin td.ExtraPay {
  background-color: navy;
  color: #fff !important;
}

#cabin td.LargeSeat {
  width: 23px;
}

#cabin td.noSeatGalley {
  background-color: transparent;
  border: none;
  width: 10px;
  height: 10px;
}

#cabin td.noSeatStorage {
  background-color: #aaa;
}

#cabin td.noSeatLavatory {
  background-color: #aaa;
}

#cabin tr:first-child td,
#cabin tr:last-child td {
  height: 30px;
  border: none;
  border-radius: 0;
}

#cabin...

JavaScript

seatmap('3,3,3', 270, '5,15', '15,16,17,18,19,20,21,22,23', $('#container'));


function seatmap(configStr, seats, galleyRows, wingRows, container) {
  var i, j, t = 0,
    k = 0,
    rows, cols = [];
  galleyRows = galleyRows.split(',');
  wingRows = wingRows.split(',')
  var albet = "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,AA,AB,AC,AD,AE,AF,AG".split(",");
  var config = configStr.split(",");

  function checkSeatFree(col, row) {
    // return false here if seat taken
    return true;
  }

  for (i = 0; i < config.length; i++) {
    t += +config[i];
    for (var j = 0; j < config[i]; j++) {
      cols[k] = albet[k];
      k++;
    }
    if (i !== config.length - 1) { //add spaces in column names
      cols[k] = "";
      k++;
    }
  }

  rows = Math.floor(seats / t) + galleyRows.length;

  var wrap = $('<div>').attr('id', 'seatmap');
  var plane = $('<div>').attr('id', 'plane');
  var rowsTbl = $('<table>').addClass('rows');
  var cabinTblDiv = $('<div>').attr('id', 'cabin');
  var cabinTbl = $('<table>');

  container.html("");

  for (i = 0; i < cols.length; i++) { //(foreach seat column (including isles)
    //add column titles
    rowsTbl.append($('<tr>').append($('<td>').html(cols[i])));

    var seatCol = $('<tr>');

    for (j = 0; j < rows; j++) {
      var seat = $('<td>');

      //add Galley Rows
      if (galleyRows.indexOf("" + j) != -1) {
        seatCol.append($('<td>').addClass('noSeatGalley'));
        continue;
      } else {
        if (cols[i] == "") {
          seat.html(j + 1).addClass('noSeatGalley');
        } else {
          seat.attr('title', (j + 1) + cols[i]);
          seat.addClass(checkSeatFree(j, cols[i]) ? 'seatAvailable' : 'seatUnavailable');
        }
      }
      seatCol.append(seat);
    }
    cabinTbl.append(seatCol);
  }

  var wingCol = $('<tr>');

  for (j = 0; j < rows; j++) {
    var wing = $('<td>');
    if (wingRows.indexOf("" + j) != -1) {
      wing.addClass('wingSeat');
    }
    if...