add choice dummy

js/main.js

-/* global window, body, $, jQuery */
+/* global window, body, $, jQuery */
 
-/* 
-    *  CityGuess
+/*  *  CityGuess - DEMO/PROTOTYPE
     *  simple game with Images from Flickr
     *  Version: 0.0.2
 
     TODO'S:
-    Score system - LocalStorage-Manager - Levels etc
+    Score system - LocalStorage-Manager - Levels - Game terms(ie: Skylines, Superheros, Cars..)
+    Choice Manager(currently dummy) - Animation timings - etc..
+    Refactor the whole script more OOP
 */
 function db() {
     'use strict';
@@ -70,14 +71,13 @@ CityGuess.prototype.getAjax = function () {
         width: '100%',
         WebkitTransition: transition,
         transition: transition,
-        border: '3px solid #353535'
+        border: '1px solid #383838'
     });
     $('.player-state').html('<p class="ready-state" id="wait">' + text + '</p>');
     $('#timer').html('<span>000</span>');
 
     // ze ajax call
     var ajax = $.getJSON(this.imgUrl + '&page=' + (Math.floor(Math.random() * 60) + 1), function (data) {
-        db(data)
         var j = Math.floor(Math.random() * 250) + 1,
             z = data.photos.photo[j],
             imgSRC = 'http://farm' + z.farm + '.static.flickr.com/' + z.server + '/' + z.id + '_' + z.secret + '_b.jpg',
@@ -102,7 +102,7 @@ CityGuess.prototype.getAjax = function () {
                     var country = (data.photo.location.hasOwnProperty('country') ? data.photo.location.country._content : '_').toLowerCase(),
                         region = (data.photo.location.hasOwnProperty('region') ? data.photo.location.region._content : '_').toLowerCase(),
                         county = (data.photo.location.hasOwnProperty('county') ? data.photo.location.county._content : '_').toLowerCase(),
-                        city = (data.photo.location.hasOwnProperty('locality') ? data.photo.location.locality._content : '_').toLowerCase(),
+                        city = (data.photo.location.hasOwnProperty('locality') ? data.photo.location.locality._content : data.photo.location.county._content).toLowerCase(),
                         space = ' ', hyph = '-',
                         country = country.replace(hyph, space), region = region.replace(hyph, space), county = county.replace(hyph, space),
                         geoTempArr = [country, region, county],
@@ -119,7 +119,9 @@ CityGuess.prototype.getAjax = function () {
                     });
 
                     self.HintManager(geoArrClone);
-                    cl(geoArrClone);
+                    this.result = '';
+                    this.result = data.photo.location.hasOwnProperty('locality') ? data.photo.location.locality._content : data.photo.location.county._content;
+                    self.ChoiceManager(this.result);
                 }
             });
 
@@ -170,6 +172,7 @@ CityGuess.prototype.HintManager = function (geoArrClone) {
 
     this.fnClick = function (e) {
         i = geoArr.length;
+
         $('#hint-text').stop().show().animate({
             opacity: 0, display: 'block', zIndex: '5000'
         }, 1200, function () {
@@ -180,16 +183,38 @@ CityGuess.prototype.HintManager = function (geoArrClone) {
 
         i--;
 
-        $('#hint-text p').text(geoArr.shift())
+        $('#hint-text p').text(geoArr.shift().toUpperCase())
         $('.hint').html('get hint <span>/' + geoArr.length + ' </span>');
-
-        //if (i == 0)
-        //    $('.hint').attr('disabled', 'disabled');
     };
 
     $('.hint').click(this.fnClick.bind(this));
 };
 
+CityGuess.prototype.ChoiceManager = function(city) {
+    var self = this;
+    this.result = city;
+    
+    this.fnClick = function(e){
+        this.runTime.stop();
+
+        if (self.player.children(':first').get(0).id === 'pause') {
+            self.togglePlay();
+        } 
+
+        self.TilesManager.call(self.hideTiles());
+
+        $('#hint-text').stop().fadeIn(400).css({
+            opacity: 1, display: 'block', zIndex: '5000'
+        });
+
+        $('#hint-text').html('<p style="color:rgba(0,0,0, 0.3); font-size:2em; margin:0.2em 0 1em 0; padding:0;">.:DEMO MODE:.</p><p style="text-shadow: 1px 1px 0px #01CC9A;">You'+"'"+'re in: ' + this.result.toUpperCase() +'</p><p style="font-size:1.5em;color:rgba(0,0,0, 0.3); margin:1.5em 0 0 0;">[Please refresh your Browser]</p>');
+
+        $('.hide-container').css({ opacity: 0.5 }).fadeIn(2000);
+   };
+
+   $('#choice').click(this.fnClick.bind(this));
+};
+
 CityGuess.prototype.render = function (src) {
     var size, sizeW = src.width, sizeH = src.height;
     size = sizeW < sizeH ? 'contain' : 'cover';
@@ -207,8 +232,7 @@ CityGuess.prototype.render = function (src) {
 };
 
 CityGuess.prototype.TilesManager = function () {
-    var self = this,
-        flipInterval, i, toFlip = [], nTiles = self.nTiles;
+    var self = this, flipInterval, i, toFlip = [], nTiles = self.nTiles;
 
     // Extend the array object to randomly splice an element and remove the target (alters the original arry) 
     Array.prototype.randsplice = function () {
@@ -247,6 +271,7 @@ CityGuess.prototype.TilesManager = function () {
             stopInterval();
             self.togglePlay();
         }
+        
         var n = toFlip.randsplice();
         flipManager(n);
     };
@@ -327,10 +352,11 @@ CityGuess.prototype.eventHandler = function () {
             self.getAjax();
             $('.progress').css({ width: '100%' });
         }
-        if (this.mapped == 3) {
-            //self.togglePlay();
-            //return false;
-        }
+
+        // if (this.mapped == 3) {
+        //     self.togglePlay();
+        //     return false;
+        // }
     });
 };