mat813/film.html

## film.html
<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>Films</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
      //<![CDATA[
    var start = 9;
    var end = 23;
    var cellwidth = 6;
    var interval = 5
    var cellnumber = 60/interval;
    var titlewidth = 150;
    $(document).ready(function() {
        $('#paf').click(function() {
          var tab = $('#in')[0].value.split(/\n/);
          for (i=0; i < tab.length; i++) {
            var out = new Array();
            out[0] = "";
            var title = true
            var tmp = tab[i].split(/\s+/)
            for (j=0; j < tmp.length; j++) {
              if (/^\d?\d:\d\d$/.exec(tmp[j])) {
                title = false;
                out[out.length] = tmp[j];
              } else if (title) {
                out[0] += tmp[j] + " ";
              }
            }
            tab[i] = out;
          }
          var table = $("<table border='1'/>");
          $(table).css('border-collapse', 'collapse');
          $(table).css('background-color', 'lightgrey');
          var thead = $("<thead/>");
          $(table).append(thead);
          var trh = $("<tr/>");
          $(thead).append(trh);
          var title = $("<th>Titre<\/th>");
          $(trh).append(title);
          $(title).css('width', titlewidth+'px');
          for (i=start; i <= end; i++) {
            var th = $("<th colspan=\""+cellnumber+"\">" + i + "<\/th>");
            $(th).css('width', (cellwidth*cellnumber)+'px');
            $(trh).append(th);
          }
          var tbody = $("<tbody/>");
          $(table).append(tbody);
          for (i=0; i < tab.length; i++) {
            var tr = $("<tr/>");
            $(tbody).append(tr);
            var oldtd = $("<td>"+tab[i][0]+"<\/td>");
            $(tr).append(oldtd);
            $(oldtd).css('font-weight', 'bold');
            pos = 0;
            for(j=1; j<tab[i].length; j++) {
              /* Regarder combien le td précédent doit être grand */
              var hm = tab[i][j].split(/:/);
              var colspan = (hm[0] - start) * cellnumber + hm[1] / interval - pos + 1;
              $(oldtd).attr('colspan', colspan);
              if (pos == 0) {
                /* 150px de la première colonne, donc, colspan - 1 */
                $(oldtd).css('width', (titlewidth+(colspan-1)*cellwidth) + 'px');
              } else {
                $(oldtd).css('width', (colspan*cellwidth) + 'px');
              }
              pos = pos + colspan;
              /* Créer le nouveau TD */
              var td = $("<td class=\"heure\">" + tab[i][j] + "<\/td>");
              $(tr).append(td);
              oldtd = td;
            }
            /* Aller jusqu'au bout du tableau */
            $(oldtd).attr('colspan', (cellnumber*(end-start+1))-pos+1);
          }
          $('#out').html(table);
        });
        $('td.heure').live("click", function() {
          var papa = $(this)[0].parentNode;
          if( $(this).css('background-color') == 'transparent' || $(this).css('background-color') == 'rgb(136, 136, 136)' ) {
            $("td", papa).css('background-color', '#888');
            $("td.heure", papa).css('color', '#666');
            $(this).css('background-color', '#FBB');
            $(this).css('color', 'black');
          } else {
            $("td", papa).css('background-color', 'inherit');
            $("td.heure", papa).css('color', 'inherit');
            $(this).css('background-color', 'inherit');
          }
        });
        $('#hop').click(function() {
            $.get("http://www.ugc.fr/complex.do", {complexId: $("input[name=cinema]:checked")[0].value, comeFrom: "preferedComplexLink"}, function(data, textStatus) {
              console.log("paf" + data)
            });
        });
      });

      //]]>
    </script>
  </head>
  <body>
    <div>
      <input type="submit" id="hop" value="Récupérer"/>
      <input type="radio" value="HORIZ" name="cinema"/> Les Halles -
      <input type="radio" value="ORIEN" name="cinema"/> Orient Express -
      <input type="radio" value="BERCY" name="cinema"/> Bercy
      <textarea id="in" rows="10" cols="80" style="width:100%"></textarea><br />
      <input type="submit" id="paf" value="Générer"/><br/>
    </div>
    <div id="out"/>
  </body>
</html>
	<?xml version='1.0' encoding='utf-8' ?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	<html xmlns='http://www.w3.org/1999/xhtml'>
	<head>
	<title>Films</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
	//<![CDATA[
	var start = 9;
	var end = 23;
	var cellwidth = 6;
	var interval = 5
	var cellnumber = 60/interval;
	var titlewidth = 150;
	$(document).ready(function() {
	$('#paf').click(function() {
	var tab = $('#in')[0].value.split(/\n/);
	for (i=0; i < tab.length; i++) {
	var out = new Array();
	out[0] = "";
	var title = true
	var tmp = tab[i].split(/\s+/)
	for (j=0; j < tmp.length; j++) {
	if (/^\d?\d:\d\d$/.exec(tmp[j])) {
	title = false;
	out[out.length] = tmp[j];
	} else if (title) {
	out[0] += tmp[j] + " ";
	}
	}
	tab[i] = out;
	}
	var table = $("<table border='1'/>");
	$(table).css('border-collapse', 'collapse');
	$(table).css('background-color', 'lightgrey');
	var thead = $("<thead/>");
	$(table).append(thead);
	var trh = $("<tr/>");
	$(thead).append(trh);
	var title = $("<th>Titre<\/th>");
	$(trh).append(title);
	$(title).css('width', titlewidth+'px');
	for (i=start; i <= end; i++) {
	var th = $("<th colspan=\""+cellnumber+"\">" + i + "<\/th>");
	$(th).css('width', (cellwidth*cellnumber)+'px');
	$(trh).append(th);
	}
	var tbody = $("<tbody/>");
	$(table).append(tbody);
	for (i=0; i < tab.length; i++) {
	var tr = $("<tr/>");
	$(tbody).append(tr);
	var oldtd = $("<td>"+tab[i][0]+"<\/td>");
	$(tr).append(oldtd);
	$(oldtd).css('font-weight', 'bold');
	pos = 0;
	for(j=1; j<tab[i].length; j++) {
	/* Regarder combien le td précédent doit être grand */
	var hm = tab[i][j].split(/:/);
	var colspan = (hm[0] - start) * cellnumber + hm[1] / interval - pos + 1;
	$(oldtd).attr('colspan', colspan);
	if (pos == 0) {
	/* 150px de la première colonne, donc, colspan - 1 */
	$(oldtd).css('width', (titlewidth+(colspan-1)*cellwidth) + 'px');
	} else {
	$(oldtd).css('width', (colspan*cellwidth) + 'px');
	}
	pos = pos + colspan;
	/* Créer le nouveau TD */
	var td = $("<td class=\"heure\">" + tab[i][j] + "<\/td>");
	$(tr).append(td);
	oldtd = td;
	}
	/* Aller jusqu'au bout du tableau */
	$(oldtd).attr('colspan', (cellnumber*(end-start+1))-pos+1);
	}
	$('#out').html(table);
	});
	$('td.heure').live("click", function() {
	var papa = $(this)[0].parentNode;
	if( $(this).css('background-color') == 'transparent' \|\| $(this).css('background-color') == 'rgb(136, 136, 136)' ) {
	$("td", papa).css('background-color', '#888');
	$("td.heure", papa).css('color', '#666');
	$(this).css('background-color', '#FBB');
	$(this).css('color', 'black');
	} else {
	$("td", papa).css('background-color', 'inherit');
	$("td.heure", papa).css('color', 'inherit');
	$(this).css('background-color', 'inherit');
	}
	});
	$('#hop').click(function() {
	$.get("http://www.ugc.fr/complex.do", {complexId: $("input[name=cinema]:checked")[0].value, comeFrom: "preferedComplexLink"}, function(data, textStatus) {
	console.log("paf" + data)
	});
	});
	});

	//]]>
	</script>
	</head>
	<body>
	<div>
	<input type="submit" id="hop" value="Récupérer"/>
	<input type="radio" value="HORIZ" name="cinema"/> Les Halles -
	<input type="radio" value="ORIEN" name="cinema"/> Orient Express -
	<input type="radio" value="BERCY" name="cinema"/> Bercy
	<textarea id="in" rows="10" cols="80" style="width:100%"></textarea><br />
	<input type="submit" id="paf" value="Générer"/><br/>
	</div>
	<div id="out"/>
	</body>
	</html>