Map.PinkIcon = new GIcon();

Object.extend(Map.PinkIcon, {

	shadow: IMAGES_URI + "marker/shadow.png",
	image: IMAGES_URI + "marker/pink.png",
	transparent: IMAGES_URI + "marker/transparent.png",
	iconSize: new GSize(14, 18),
	iconAnchor: new GPoint(6, 18),
	shadowSize: new GSize(32, 18)
});

Map.BlueIcon = new GIcon(Map.PinkIcon, IMAGES_URI + "marker/blue.png");

Map.FlickrImage = Class.create({

	highlighted: null,

	initialize: function(map, pos, options){
		
		this.map = map;
		
		this.point = pos;
		
		this.options = options;
		
		if (options.data) {
		
			this.data = options.data;
		}
	
		this.markerBlue = new GMarker(pos, {icon: Map.BlueIcon, title:options.title});
		this.markerPink = new GMarker(pos, {icon:Map.PinkIcon, clickable:false});
		
		if (this.options.allwaysHighlighted){
			
			this.markerBlue = new GMarker(pos, {icon: Map.PinkIcon, title:options.title});
		}		
		
		this.map.addOverlay(this.markerBlue);
		this.map.addOverlay(this.markerPink);
		
		this.markerPink.hide();
		
		GEvent.addListener(this.markerBlue, 'mouseover', this.over.bind(this));
		
		GEvent.addListener(this.markerBlue, 'mouseout', function(){
			
			Element.hide($("flickrpreview"));
		});
		
		GEvent.addListener(this.markerBlue, 'click', this.options.handleClick);

		this.highlight(false);
	
	},
		
	highlight: function(bool) {
		
		if (bool !== this.highlighted){
		
			if (this.overlay) {
			
				this.overlay.hide();	
			}
			
			if (bool) {
				
				this.overlay = this.markerPink;
				
			} else {
				
				this.overlay = this.markerBlue;
			}
			
			this.overlay.show();
			
			this.highlighted = bool;
		}

	},
	
	over: function(){

		var b = this.map.fromLatLngToDivPixel(this.point);

		var pLabel = $("flickrpreview");
		
		Element.show(pLabel);

		pLabel.style.top = (b.y - pLabel.offsetHeight) + "px";	
		pLabel.style.left = (b.x - 38) + "px";		
		
		if(pLabel.hasChildNodes()) {
			
			$A(pLabel.childNodes).each(Element.remove);
		}
		
		var photo = this.data;

		var link = Element.create("a", {
			
			href: "http://www.flickr.com/photo.gne?id=" + photo.id,
			title: photo.title,
			target:"_blank"	
		});

		var newImage = Element.create("img", {
			
			src:"http://static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_s.jpg"	
		});
		
		pLabel.appendChild(link);
		link.appendChild(newImage);
		
		Event.observe(link, "click", (function(e){
			
			this.options.handleClick();
			Event.stop(e);
			
		}).bind(this));	
	},	
	
	registerTarget: function(div){
		
		Event.observe(div, "mouseover", this.showArrow.bind(this));
		Event.observe(div, "mouseout", this.hideArrow.bind(this));								
	},
	
	showArrow: function(){
		
		this.overlay.hide();
		
		var b = this.map.fromLatLngToDivPixel(this.point);

		var arrow = $("arrow");
		
		Element.show(arrow);

		arrow.style.top = (b.y - 28) + "px";	
		arrow.style.left = (b.x - 10) + "px";				
	},
	
	hideArrow: function(){
		
		this.overlay.show();	
		Element.hide("arrow");		
	}
});