muvmuv/mainpage.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
   2 <html>
   3 <head>
   4 <title>MuvMuv - Muvie Review</title>
   5 <link rel="stylesheet" type="text/css" href="static/style.css" />
   6 <script src="static/common.js" type="text/javascript"></script>
   7 <script src="http://code.google.com/js/jquery.js" type="text/javascript">
   8 </script>
   9 <script src="static/json2.js" type="text/javascript"></script>
  10 </head>
  11
  12 <script>
  13
  14   var muvmuv = muvmuv || {};
  15
  16   muvmuv.ITEM_PER_PAGE = 16;
  17   muvmuv.ITEM_PER_ROW = 4;
  18
  19   muvmuv.URL_ARGS = muvmuv.getUrlArgs();
  20   muvmuv.USER = '{{user}}' || 'None';
  21
  22   jQuery(document).ready(function() {
  23     muvmuv.main();
  24   });
  25
  26   muvmuv.main = function() {
  27     muvmuv.initSortChooser();
  28     muvmuv.getMovies();
  29   }
  30
  31   muvmuv.getPageUrlHtml = function(sortby, pageIndex) {
  32     var urlHtml = [];
  33
  34     var linkUrl = ['javascript:top.location.href=\'?sortby=', sortby,
  35     '&page=', pageIndex, '\''].join('');
  36
  37     urlHtml.push('<a href="');
  38     urlHtml.push(linkUrl);
  39     urlHtml.push('">');
  40     urlHtml.push(pageIndex);
  41     urlHtml.push('</a>');
  42
  43     return urlHtml.join('');
  44   }
  45
  46   muvmuv.initPagination = function(movieTotal) {
  47
  48     var totalPage = Math.ceil(movieTotal / muvmuv.ITEM_PER_PAGE);
  49
  50     var currentPage = muvmuv.getCurrentPage();
  51     var sortby = muvmuv.getSortBy();
  52
  53     var html = [];
  54
  55     var pagination = $('#pagination');
  56
  57     if (currentPage > 1) {
  58       var prevButton = $('<input type="button" value="<<"/>');
  59
  60       pagination.append(prevButton);
  61       pagination.append('&nbsp;&nbsp;&nbsp;');
  62
  63       prevButton.click(function() {
  64
  65         var prevIndex = currentPage - 1;
  66         var prevUrl = ['?sortby=', sortby, '&page=', prevIndex].join('');
  67         top.location.href = prevUrl;
  68
  69       });
  70     }
  71
  72     for (var i = 0; i < totalPage; i++) {
  73
  74       var pageIndex = i + 1;
  75
  76       if (pageIndex != currentPage) {
  77         html.push(muvmuv.getPageUrlHtml(sortby, pageIndex));
  78         html.push('&nbsp;');
  79       } else {
  80         html.push(pageIndex);
  81         html.push('&nbsp;');
  82       }
  83     }
  84
  85     $('#pagination').append(html.join(''));
  86
  87     if (currentPage < totalPage) {
  88       var nextButton = $('<input type="button" value=">>"/>');
  89
  90       pagination.append('&nbsp;&nbsp;');
  91       pagination.append(nextButton);
  92
  93       nextButton.click(function() {
  94         var nextIndex = currentPage + 1;
  95         var nextUrl = ['?sortby=', sortby, '&page=', nextIndex].join('');
  96         top.location.href = nextUrl;
  97       });
  98     }
  99
 100   }
 101
 102   muvmuv.getMovies = function() {
 103
 104     var sortby = muvmuv.getSortBy();
 105     var currentPage = muvmuv.getCurrentPage();
 106
 107     var data = ['sortby=', sortby, '&page=', currentPage].join('');
 108
 109     var callback = function(data) {
 110
 111       var json = JSON.parse(data);
 112       var movies = json.movies;
 113       var movieTotal = json.total;
 114
 115       muvmuv.initPagination(movieTotal);
 116
 117       var html = [];
 118
 119       var item_per_row = muvmuv.ITEM_PER_ROW;
 120       var row_count = Math.ceil(movies.length / item_per_row);
 121       var movie_index = 0;
 122       html.push('<table border=0 cellspacing=5 cellpadding=5>');
 123
 124       for (var i = 0; i < row_count; i++) {
 125
 126         html.push('<tr>');
 127
 128         for (var j = 0; j < item_per_row; j++) {
 129
 130           html.push('<td class="movieTd">');
 131
 132           var movieHtml = ''
 133
 134           if (movie_index < movies.length) {
 135             var movie = movies[movie_index];
 136             movieHtml = muvmuv.createMovieDiv(movie);
 137           }
 138           html.push(movieHtml);
 139
 140           html.push('</td>');
 141
 142           movie_index++;
 143         }
 144
 145         html.push('</tr>');
 146
 147       }
 148
 149       html.push('</table>');
 150
 151       $('#moviescontent').append(html.join(''));
 152
 153       $('.movieDiv').click(function() {
 154         var movieTitle = $(this).attr('id');
 155         muvmuv.gotoReview(movieTitle);
 156       });
 157
 158       $('.movieTd').mouseover(function() {
 159         var movie = $(this);
 160         movie.css({color: 'white'});
 161         movie.css({background: 'black'});
 162       });
 163
 164       $('.movieTd').mouseout(function() {
 165         var movie = $(this);
 166         movie.css({color: 'black'});
 167         movie.css({background: 'white'});
 168       });
 169     }
 170
 171     $.ajax({
 172       method: 'get',
 173       url: 'movies',
 174       data: encodeURI(data),
 175       success: callback
 176       });
 177   }
 178
 179   muvmuv.createMovieDiv = function(movie) {
 180
 181     var title = movie.title;
 182     var release_date = new Date(Date.parse(movie.release_date));
 183     var release_date_label = [release_date.getMonth() + 1,
 184         release_date.getDate(),
 185         release_date.getFullYear()].join('/');
 186
 187     release_date_label = ['<b>Release: </b>', release_date_label].join('');
 188
 189     var pic = movie.pic;
 190
 191     var image = ['<img src="', pic, '">'].join('');
 192
 193     var movieHtml = [];
 194     movieHtml.push('<div class="movieDiv" id="');
 195     movieHtml.push(encodeURI(title));
 196     movieHtml.push('">');
 197     movieHtml.push('<b>');
 198     movieHtml.push(muvmuv.textTruncate(title,30));
 199     movieHtml.push('</b>');
 200     movieHtml.push('<br>');
 201     movieHtml.push(image);
 202     movieHtml.push('<br><br>');
 203     movieHtml.push('<div>');
 204     movieHtml.push(release_date_label);
 205     movieHtml.push('</div>');
 206     movieHtml.push('<br>');
 207     movieHtml.push('</div>');
 208
 209     return movieHtml.join('');
 210   }
 211
 212   muvmuv.initSortChooser = function() {
 213
 214     var sortby = muvmuv.getSortBy();
 215     var sortChooser = $('#sortchooser');
 216     var sortOptions = sortChooser.get(0).options;
 217     for (var i=0; i<sortOptions.length;i++) {
 218       var value = sortOptions[i].value;
 219       if (value == sortby) {
 220         sortChooser.selectedIndex = i;
 221         sortOptions[i].selected = true;
 222         break;
 223       }
 224     }
 225
 226     sortChooser.change(function() {
 227       var index = $(this).get(0).selectedIndex;
 228       var sortby = $(this).get(0).options[index].value;
 229       var currentPage = 1;
 230       top.location.href = ["/?sortby=", sortby,
 231           '&page=', currentPage].join('');
 232     });
 233   }
 234
 235   muvmuv.gotoReview = function(title) {
 236     top.location.href = ['http://', top.location.host, '/review?title=',
 237     title].join('');
 238   }
 239
 240 </script>
 241
 242 <body>
 243 <div align="center" id="main">
 244
 245 {% include "header.html" %}
 246   <br/>
 247   <select id="sortchooser">
 248     <option value="release_date" selected="selected">release date</option>
 249     <option value="title">title</option>
 250   </select> &nbsp;
 251   <span id="pagination"></span>
 252   <br/>
 253   <br/>
 254   <div id="moviescontent"></div>
 255 </div>
 256 </body>
 257 </html>