Chromatik files (2015/09/30)

global.js

window["colorElements"] = {
  "frontColors" : ["f8c5c5","f8dfc5","f8f8c5","dff8c5","c5f8c5","c5f8df","c5f8f8","c5dff8","c5c5f8","dfc5f8","f8c5f8","f8c5df","f28c8c","f2bf8c","f2f28c","bff28c","8cf28c","8cf2bf",
  "8cf2f2","8cbff2","8c8cf2","bf8cf2","f28cf2","f28cbf","eb5252","eb9f52","ebeb52","9feb52","52eb52","52eb9f","52ebeb","529feb","5252eb","9f52eb","eb52eb","eb529f",
  "e51919","e57f19","e5e519","7fe519","19e519","19e57f","19e5e5","197fe5","1919e5","7f19e5","e519e5","e5197f","ac1313","ac5f13","acac13","5fac13","13ac13","13ac5f",
  "13acac","135fac","1313ac","5f13ac","ac13ac","ac135f","720c0c","723f0c","72720c","3f720c","0c720c","0c723f","0c7272","0c3f72","0c0c72","3f0c72","720c72","720c3f",
  "390606","391f06","393906","1f3906","063906","06391f","063939","061f39","060639","1f0639","390639","39061f","ffffff","e9e9e9","d4d4d4","bfbfbf","aaaaaa","949494","7f7f7f","6a6a6a",
  "555555","3f3f3f","2a2a2a","151515"],
  "frontColors_group" : {
  "f8c5c5" : "Red","f28c8c" : "Red","eb5252" : "Red","e51919" : "Red","ac1313" : "Red","720c0c" : "Red","390606" : "Red",
  "f8dfc5" : "Orange","f2bf8c" : "Orange","eb9f52" : "Orange","e57f19" : "Orange","ac5f13" : "Orange","723f0c" : "Orange","391f06" : "Orange",
  "f8f8c5" : "Yellow","f2f28c" : "Yellow","ebeb52" : "Yellow","e5e519" : "Yellow","acac13" : "Yellow","72720c" : "Yellow","393906" : "Yellow",
  "dff8c5" : "Green","bff28c" : "Green","9feb52" : "Green","7fe519" : "Green","5fac13" : "Green","3f720c" : "Green","1f3906" : "Green","c5f8c5" : "Green",
  "8cf28c" : "Green","52eb52" : "Green","19e519" : "Green","13ac13" : "Green","0c720c" : "Green","063906" : "Green","c5f8df" : "Green","8cf2bf" : "Green",
  "52eb9f" : "Green","19e57f" : "Green","13ac5f" : "Green","0c723f" : "Green","06391f" : "Green",
  "c5f8f8" : "Cyan","8cf2f2" : "Cyan","52ebeb" : "Cyan","19e5e5" : "Cyan","13acac" : "Cyan","0c7272" : "Cyan","063939" : "Cyan",
  "c5dff8" : "Blue","8cbff2" : "Blue","529feb" : "Blue","197fe5" : "Blue","135fac" : "Blue","0c3f72" : "Blue","061f39" : "Blue","c5c5f8" : "Blue","8c8cf2" : "Blue",
  "5252eb" : "Blue","1919e5" : "Blue","1313ac" : "Blue","0c0c72" : "Blue","060639" : "Blue",
  "dfc5f8" : "Purple","bf8cf2" : "Purple","9f52eb" : "Purple","7f19e5" : "Purple","5f13ac" : "Purple","3f0c72" : "Purple","1f0639" : "Purple",
  "f8c5f8" : "Pink","f28cf2" : "Pink","eb52eb" : "Pink","e519e5" : "Pink","ac13ac" : "Pink","720c72" : "Pink","390639" : "Pink",
  "f8c5df" : "Pink","f28cbf" : "Pink","eb529f" : "Pink","e5197f" : "Pink","ac135f" : "Pink","720c3f" : "Pink","39061f" : "Pink",
  "ffffff" : "White","e9e9e9" : "White","151515" : "Black","d4d4d4" : "Gray","bfbfbf" : "Gray","aaaaaa" : "Gray","949494" : "Gray","7f7f7f" : "Gray",
  "6a6a6a" : "Gray","555555" : "Gray","3f3f3f" : "Gray","2a2a2a" : "Gray",
  },
  "colorgroups_color" : {
  	"Cyan":"#00FFFF",
  	"Black":"#000000",
  	"Blue":"#0000FF",
  	"Yellow":"#FFFF00",
  	"Red":"#FF0000",
  	"Pink":"#FF00FF",
  	"Purple":"#800080",
  	"Green":"#008000",
  	"Gray":"#808080",
  	"White":"#FFFFFF",
  	"Orange":"#FF8C00"
  },
  "color_colorgroups" : {
  	"#00FFFF":"Cyan",
  	"#000000":"Black",
  	"#0000FF":"Blue",
  	"#FFFF00":"Yellow",
  	"#FF0000":"Red",
  	"#FF00FF":"Pink",
  	"#800080":"Purple",
  	"#008000":"Green",
  	"#808080":"Gray",
  	"#FFFFFF":"White",
  	"#FF8C00":"Orange"
  }
}

window["mapElements"] = {
 "map":null,
 "markers":[],
 "markers_event_listeners" : [],
 "markers_latlng":{},
 "infomap": null,
 "image_overlay":null,
 "randomMap" : null,
 "randomMarkers":[],
 "image_overlay":null,
 "randombounds":null,
 "searchbounds":null,
 "positions" : {},
 "map_nhits" : 0,
 "infomap_marker":null,
 "infobox":null,
 "markerClicked":false,
 "markerClicked_ind":null,
}

window["searchElements"] = {
 "query":null,
 "selectedColors" : [],
 "leftScore":100,
 "start":0,
 "nhits":40,
}
window["pageElements"] = {
  "width":window.innerWidth,
  "height":window.innerHeight,
  "spinner" : null,
}

var photosMap = {};
var geolocPhotosMap = {};
var randomPhotosMap = {};
var timer;
var ftm = null;
var tm = null;
var currentPhoto = null;
var selected_photo_id = null;
var imageGrids = null;
var in_grid_cnt = 0;
var APP_MEDIA_URL = "";
var YAHOO_API_KEY = "VM.IvzjV34GMLi4mSpXM8PKVl07lgQ.nw0dE9zrmf4LuxV1xlrOy1Ugj.naMJS2SYr0-";
var palette = null;
var slider = null;
var HL = null;
var viewsSelector = null;
var inputfocus = false;
var request = null;
var preload_request = null;

window["images"]={
  "randomImage":null,
}
function sortColorsDescending(a, b){
  score_a = parseInt(a.split(":")[1]);
  score_b = parseInt(b.split(":")[1]);
  return score_b-score_a;
}


var Searcher  = new Class({
  initialize: function(){
    this.queryElements = {"text":null,"owner":null,"location":null,"darkness":null,"saturation":null,"woeid":null,"locationids":null,"license":null,"ownerid":null,"photoid":null};
    this.colors = {};
    this.start = 0;
    this.nhits = 40;
    this.filters = {};
    this.numOfResults = 0;
  },
  resolveRegion: function(locationhash){
    var location_parts = locationhash.split(',');
    var region = location_parts[0];
    var country = location_parts[2];
    var self = this;
    var request = new Request.JSON({
        url: current_app_url + "resolveregion",
        data:{
          'q':region,
        },
        onSuccess: function(responseJson,responseText)
        {
          var regionwoeid = responseJson.places.place[0].woeid;
          getnearbyphotos(regionwoeid,locationhash,true);
        },
    }).get();
  },
  resolveOwner: function(owner){
    var self = this;
    var request = new Request.JSON({
        url: current_app_url + "searchowners",
        data:{
          'q':owner,
          'start':0,
          'nhits':1
        },
        onSuccess: function(responseJson,responseText)
        {
          window.searcher.queryElements["owner"] = responseJson[0]["username"];
          window.searcher.queryElements["ownerid"] = responseJson[0]["url"];
          window.searcher.search();
        },
    }).get();
  },
  loadFromHash : function(){
    this.clean();
    if(window.location.hash == "#home"){
      viewsSelector.update("randomView");
      return;
    }
    var hash_parts = window.location.hash.replace('#','').split("&");
    var searchBool = false;
    var locationids_filled = false;
    for(var i = 0 ; i < hash_parts.length;i++){
      var keyval = hash_parts[i].split(":");
      if(keyval[0] == "s"){
        this.start = keyval[1];
      }
      if(keyval[0] == "n"){
        this.nhits = keyval[1];
      }
      if(keyval[0] != "colors" && keyval[0] != "" && keyval[0] != "s" && keyval[0] != "n"){
        this.queryElements[keyval[0]] = decodeURI(keyval[1]);
      }
      if(keyval[0] == "colors"){
        var colors = keyval[1].split(",");
        for(var j = 0 ; j < colors.length ; j++ ){
          var colorscore = colors[j].split('/');
          this.colors[colorscore[0]] = colorscore[1];
        }
      }
    }
    renderpaletteAndSlider();
    for(var i = 0 ; i < hash_parts.length;i++){
      var keyval = hash_parts[i].split(":");
      if(keyval[0] == "woeid"){
        searchBool = true;
        this.setFilters();
        this.getnearbyphotos(keyval[1],this.queryElements["location"],true);
      }
    }
    if(searchBool == false){
      this.setFilters();
      this.search();
    }
  },
  clean: function(){
    this.queryElements = {"text":null,"owner":null,"location":null,"darkness":null,"saturation":null,"locationids":null,"license":null,"woeid":null,"ownerid":null,"photoid":null};
    this.colors = {};
    this.start = 0;
    this.nhits = 40;
    this.filters = {};
    this.numOfResults = 0;
    Array.each($$(".filterclose"),function(elt){elt.destroy();});
  },
  cleanpagination: function(){
    this.start = 0;
    this.nhits = 40;
  },
  updatequery: function(key,value){
    this.queryElements[key] = value;
  },
  updatecolors:function(color,score){
    this.colors[color] = score;
  },
  removecolor: function(color){
    delete this.colors[color];
  },
  cleancolors: function(){
    this.colors = {};
  },
  buildcolorquery: function() {
    var colorgroups = {};
    var colorelement = [];
    for(var color in this.colors) {
      if (parseInt(this.colors[color]) < 1) continue;
      var colorgroup = window["colorElements"].frontColors_group[color];
      var colorscore = this.colors[color];
      colorelement.push("OPT color:" + [colorgroup,color,colorscore].join('/') + "{s=200000}");
      if(colorgroup in colorgroups) {
        colorgroups[colorgroup] += parseInt(colorscore);
      }
      else {
        colorgroups[colorgroup] = parseInt(colorscore);
      }
    }
    var colorgroupelement = [];
    for(var colorgroup in colorgroups) {
      colorgroupelement.push("colorgroup:" + [colorgroup,colorgroups[colorgroup]].join('/'));
    }
    return [colorelement.join(" "),colorgroupelement.join(" ")].join(" ");
  },
  fillcolorswithJSON: function(responseJSON){
    this.colors = {};
    var sortedColors = responseJSON.sort(sortColorsDescending);
    var max_color = Math.min(10,sortedColors.length);
    for(var k = 0 ; k < max_color ; k++){
        var parts = sortedColors[k].split(":");
        var score = parseFloat(parts[1]);
        var new_score = Math.floor((score*75.0)/100.0);
        if(new_score > 0){
          this.colors[parts[0]] = new_score;
        }
    }
  },
  filllocationidswithJSON: function(responseJSON){
    this.queryElements["locationids"] = [];
    for(var i = 0;i < responseJSON.length;i++){
      this.queryElements["locationids"].push(responseJSON[i]);
    }
  },
  getnearbyphotos: function(regionwoeid,regiondescription,hashready){
    var self = this;
    var regionrequest = new Request.JSON({
      url: current_app_url + "getnearbyphotos",
      data:{
        'q': regionwoeid,
      },
      onRequest: function(){
        cleanInfos();
        cleanMapCanvas();
        cleanFullSize();
      },
      onSuccess: function(responseJSON,responseText)
      {
        window.searcher.clean();
        cleanExternalSearch();
        $('textSearchField').value = "";
        self.queryElements["location"] = regiondescription;
        self.queryElements["woeid"] = regionwoeid;
        self.filllocationidswithJSON(responseJSON["locationids"]);
        if(hashready == false){
          self.setwindowhash();
        }
        else{
          self.search();
        }
      }
    }).get();
  },
  //get the space available for color
  getcolorspace: function(){
    var space = 100;
    for(var c in this.colors){
      space -= this.colors[c];
    }
    return space;
  },
  buildAjaxQuery: function(){
    var ajaxelements = [];
    if(this.queryElements["text"] != null){
      ajaxelements.push(this.queryElements["text"]);
    }
    var colorquery = this.buildcolorquery();
    if(colorquery != " "){
      ajaxelements.push("(" + colorquery +  ")");
    }
    if(this.queryElements["locationids"] != null){
      var locationidsquery = [];
      for(var i = 0 ; i < this.queryElements["locationids"].length ; i++){
        locationidsquery.push("photo_locationid:" + this.queryElements["locationids"][i]);
      }
      ajaxelements.push("(" + locationidsquery.join(" OR ") + ")");
    }
    if(this.queryElements["ownerid"] != null){
      ajaxelements.push("photo_ownerid:" + this.queryElements["ownerid"]);
    }
    if(this.queryElements["license"] != null){
      ajaxelements.push("rights:" + this.queryElements["license"]);
    }
    if(this.queryElements["saturation"] != null){
      ajaxelements.push("saturation:" + this.queryElements["saturation"]);
    }
    if(this.queryElements["darkness"] != null){
      ajaxelements.push("darkness:" + this.queryElements["darkness"]);
    }
    return ajaxelements.join(" ");
  },
  createFilterDiv: function(elt){
    var divclose = new Element("div",{"class":"filterclose"});
    var span = new Element('span',{'text':elt});
    span.setStyles({
      'float':'left',
      'font-size':'0.8em',
      'margin-top':'3px',
    });
    span.inject(divclose);
    var closeimg = new Element("img",{"src":"media/img/btn_close_filter.png"});
    closeimg.inject(divclose);
    return divclose;
  },
  setFilters: function(){
    var self = this;
    $('colorful_btn').set("class","refine_btn");
    $('greyscale_btn').set("class","refine_btn");
    $('bright_btn').set("class","refine_btn");
    $('dark_btn').set("class","refine_btn");
    for(var elt in this.queryElements){
      if(elt == "text" || elt == "saturation" || elt == "darkness" || elt == "license" || elt == "location" || elt == "owner"){
        if(this.queryElements[elt] != null){
          if(elt == "saturation"){
            if(this.queryElements[elt] == "Colorful")
              $('colorful_btn').set("class","refine_btn_selected");
            else
              $('greyscale_btn').set("class","refine_btn_selected");
          }
          if(elt == "darkness"){
            if(this.queryElements[elt] == "Bright")
              $('bright_btn').set("class","refine_btn_selected");
            else
              $('dark_btn').set("class","refine_btn_selected");
          }

          for(var i = 1; i<=6;i++)
            $("license_" + i).getElementsByTagName("img")[0].setStyle("margin-top","0px");
          if(elt =="license"){
            for(var i = 1; i<=6;i++){
              var license_id = "license_" + i;
              if(this.queryElements[elt] == license_id)
                $(license_id).getElementsByTagName("img")[0].setStyle("margin-top","-23px");
            }
          }
        }
      }
    }
  },
  setwindowhash: function(){
    var hash_arr = [];
    for(var elt in this.queryElements){
      if(elt != "locationids"){
        if(this.queryElements[elt] != null){
          hash_arr.push([elt,this.queryElements[elt]].join(':'));
        }
      }
    }
    hash_arr.push("s:" + this.start);
    hash_arr.push("n:" + this.nhits);
    var color_hash_arr = [];
    for(var color in this.colors){
      color_hash_arr.push([color,this.colors[color]].join('/'));
    }
    if(color_hash_arr.length > 0){
      hash_arr.push("colors:" + color_hash_arr.join(','));
    }
    if (navigator.platform != "iPad" || this.isNewSearch(hash_arr))
      imageGrids.wipeout();
    window.location.hash = encodeURI(hash_arr.join('&'));
  },

  //Méthode qui compare un hash avec le hash actuel
  //Renvoie false si la nouveau hash correpond à un page suivante/précédente du hash actuel
  isNewSearch: function (hash) {
    var current = window.location.hash.replace('#','').split("&");
    var identical = current.length == hash.length;
    for (var i = 0; i < hash.length; i++) {
      var key = hash[i].split(':')[0];
      identical = identical && (hash[i] == current[i] || key == 's' || key == 'n');
    }
    return !identical;
  },

  preloadNextGrid: function () {

    var self = this;

    if (preload_request != null && preload_request.isRunning())
      return;

    preload_request = new Request.JSON({
        url: current_app_url + "searchphotos",
        data:{
            'q': this.buildAjaxQuery(),
            'start': imageGrids.loaded,
            'nhits': this.nhits,
        },
        onSuccess: function (responseJSON, responseText) {
          if(responseJSON.length > 1){
            var images_data = [];
            for(var k = 1 ; k<responseJSON.length ; k++) {
              photosMap[responseJSON[k]["id"]] = new Photo();
              var photo = photosMap[responseJSON[k]["id"]];
              photosMap[responseJSON[k]["id"]].loadFromJSON(responseJSON[k]);
              images_data.push({"url":photo.thumbnailurl,"id":photo.id, "title": photo.title,"owner" : photo.owner_username,"license": photo.license,"fullsizeurl": photo.squarethumbnailurl.replace("_s","")});
            }
            imageGrids.addGrid(images_data);
          }
        }
    }).get();
  },

  search: function () {

    cleanInfos();
    $('spinner').setStyle('display','block');
    window.pageElements.spinner.show();
    var self = this;
    $('noResults').setStyle('display','none');
    if (request != null && request.isRunning())
      request.cancel();
    if (preload_request != null && preload_request.isRunning())
      preload_request.cancel();

    request = new Request.JSON({
        url: current_app_url + "searchphotos",
        data:{
            'q': self.buildAjaxQuery(),
            'start': self.start,
            'nhits': self.nhits,
        },
        onRequest: function()
        {
          $('viewSelector').setStyle('display','block');
          photosMap = {};
          geolocPhotosMap = {};
          window["mapElements"].map_nhits = 0;
          cleanMap();
          cleanInfos();
          cleanMapCanvas();
          cleanFullSize();
          cleanExternalSearch();
          viewsSelector.update("gridView");
          $('textSearchField').value = self.queryElements["text"];
        },
        onSuccess: function(responseJSON, responseText)
        {

          $('spinner').setStyle('display','none');
          window.pageElements.spinner.hide();
          self.setFilters();
          self.totalResults = responseJSON[0];

          if(self.totalResults > 0) {
            $('numOfResults').setStyle('display','block');
            for(var k = 1;k<responseJSON.length;k++){
              photosMap[responseJSON[k]["id"]] = new Photo();
              photosMap[responseJSON[k]["id"]].loadFromJSON(responseJSON[k]);
            }
            var images_data = [];
            for(var photoid in photosMap){
                photo = photosMap[photoid];
                photofullSizeUrl = photo.squarethumbnailurl.replace("_s","");
                images_data.push({"url":photo.thumbnailurl,"id":photo.id, "title": photo.title,"owner" : photo.owner_username,"license": photo.license,"fullsizeurl":photofullSizeUrl});
            }
            imageGrids.addGrid(images_data);
      	  }
      	  else{
              $('noResults').setStyle('display','block');
              $('numOfResults').setStyle('display','none');
      	  }
        }
    }).get();
  }
});
window["searcher"] = new Searcher();

var ViewsSelector = new Class({
  initialize : function(){
    this.views = {"gridView":"gridSelector_btn","mapView":"mapSelector_btn","tagsView":"tagsSelector_btn","randomView":"randomSelector_btn"};
	  this.current = "randomView";
	  $('viewSelector').setStyle('display','none');
  },
  update: function(view){
    cleanFullSize();
    cleanInfos();
    cleanInfoBoxMap();
    for(var v in this.views){
      if(v == view){
        $(v).setStyle("visibility","visible");
        if(view != "randomView"){
          ($(this.views[v]).getElementsByTagName("img")[0]).toggleClass("viewbtn_pressed");
          $$('.randomZone .spinner').destroy();
        }
        show(view);
		    this.current = view;
      }
      else{
        $(v).setStyle("visibility","hidden");
        if(v != "randomView"){
          ($(this.views[v]).getElementsByTagName("img")[0]).removeClass("viewbtn_pressed");
        }
      }
    }
  }
});


function Tag(text,score){
	this.text = text;
	this.score = score;
}

var Photo = new Class({
  initialize : function(){
    this.squarethumbnailurl = "";
    this.thumbnailurl = "";
    this.title = "";
    this.width = "";
    this.height = "";
    this.id = "";
    this.latitude = "";
    this.longitude = "";
    this.owner_ownerid = "";
    this.owner_username = "";
    this.owner_realname = "";
    this.owner_location = "";
    this.tags = [];
    this.license = "";
    this.regionwoeid = "";
    this.locationdescription = "";
  },
  loadFromJSON: function(json){
    this.squarethumbnailurl = json["squarethumbnailurl"];
    this.thumbnailurl = json["thumbnailurl"];
    this.title = json["title"];
    if(json["width"] == null){
      this.width = 240;
    }else{
      this.width = json["width"];
    }

    if(json["height"] == null){
      this.height = 240;
    }else{
      this.height = json["height"];
    }
    this.id = json["id"];
    this.latitude = json["latitude"];
    this.longitude = json["longitude"];
    this.owner_ownerid = json["ownerid"];
    try{
      this.owner_username = json["owner"]["username"];
      this.owner_realname = json["owner"]["realname"];
      this.owner_location = json["owner"]["location"];
    }
    catch(e){}
    this.tags = json["tags"];
    this.license = json["license"];
    this.locationid = json["locationid"];
  }
});

function Size(width,height){this.width = width;this.height = height;}