/**
 * City images display gadget
 *
 * @author    Nemanja Nikolic
 * @copyright MASSVision 2011
 */

cityImages = {
	images:       new Array(),
	overImages:   new Array(),
	zoomImages:   new Array(),
	links:        new Array(),
	titles:       new Array(),
   text:         new Array(),
	useOvers:     false,
	useLinks:     false,
	useTitles:    false,
   useText:      false,
	map:          null,
	imageMap:     null,
	currentImage: null,
	logo:         null,
	transition:   300,

	addImage: function(src) {
		this.images[this.images.length] = src;
	},
	addOver: function(src) {
		this.overImages[this.overImages.length] = src;
		this.useOvers = true;
	},
	addZoom: function(src) {
		this.zoomImages[this.zoomImages.length] = src;
	},
	addLink: function(link) {
		this.links[this.links.length] = link;
		this.useLinks = true;
	},
   addText: function(txt) {
      this.text[this.text.length] = txt;
      this.useText = true;
   },
	addTitle: function(title) {
		this.titles[this.titles.length] = title;
		this.useTitles = true;
	},
	addMap: function(src) {
		this.map = src;
	},

	addImageMap: function(imgMapName) {
		this.imageMap = imgMapName;
	},
	isEmpty: function() {
		return this.zoomImages.length ? false : true;
	},
	init: function() {
		var self = this;

		// create right panel
		var rightPanel = $('<div>').attr('class', 'rightPanel');
      
      //create left panel
      $('<div>').attr('class','leftPanel');

		// create images
		for (var i=0; i<this.zoomImages.length; i++) {
         
			// create thumb
			//var img = $('<img>').attr('class', 'thumb').attr('src', this.images[i]).data('index', i);
			var zoomImg = $('<img>').attr('class', 'zoom').data('index', i)
											.attr('src', this.zoomImages[i]).attr('alt', 'zoom image');

			// add title
			//if (this.useTitles)
			//	img.attr('alt', this.titles[i]).attr('title', this.titles[i]);
			//else
			//	img.attr('alt', 'click to enlarge');

			var title = $('<span class="title">').append(this.titles[i]).data('index', i);   
         
         //add text on image
         var txt = $('<div class="leftPanel">').append(this.text[i]).data('index', i);

			// add over action
			title.mouseover(function() {
            
            $(this).css('color', 'red');
           //  $('.thumbWrapper').css('background-image','url("UI/Images/strelica.png")'); stavi strelicu pored svake, a treba samo na over!
            
				var ind = $(this).data('index');  //kad ovo zakomentarisem ne pomera fotke
				//if (self.useOvers)
				//	$(this).attr('src', self.overImages[ind]);
            
 
				if (self.current != ind+1) {
					if (self.current)
						$('#cityImg'+self.current).fadeTo(self.transition, 0);
                 
					else
						$('#cityMap').fadeTo(self.transition, 0).css('z-index', 0);
					self.current = ind+1;
					$('#cityImg'+(ind+1)).fadeTo(self.transition, 1);
				}
            
			});

     
   title.mouseout(function() { $(this).css('color', '#424c4b'); });
  
			/*
			// set mouseout
			if (this.useOvers)
				img.mouseout(function() { $(this).attr('src', self.images[$(this).data('index')]); });
			*/

			// set click
			if (this.useLinks) {
				title.click(function() { document.location = self.links[$(this).data('index')]; });
				zoomImg.click(function() { document.location = self.links[self.current-1]; }).css('cursor', 'pointer');
			}

      
			// add thumb to panel
		//	rightPanel.append($('<div>').attr('class', 'thumbWrapper thumbWrapper'+(i%2 ? 'Right':'Left')).append(title));
         rightPanel.append($('<div>').attr('class', 'thumbWrapper').append(title));  
   
			// add zoom image
			$('#cityImagesPlaceholder').append(
				$('<div>').attr('class', 'zoomWrapper').attr('id', 'cityImg'+(i+1)).css('z-index', i+1)
							 .append(zoomImg).fadeTo(0, 0).append(txt)
			);
		}

		// add right panel
		$('#cityImagesPlaceholder').append(rightPanel);

		// add map
		var map = $('<img>').attr('src', this.map).attr('alt', 'map');
		if (this.imageMap)
			map.attr('usemap', '#'+this.imageMap);
		$('#cityImagesPlaceholder').append($('<div>').attr('id', 'cityMap').attr('class', 'zoomWrapper').append(map).css('z-index', 10));
	}

};

$(document).ready(function() {
	if (!cityImages.isEmpty())
		cityImages.init();
});