var panoramioImages = function (id) { this.init(id); };

panoramioImages.config = {
	// divs used to display data
	imageDivID : "#panImages",
	
	lat : -37.817,
	lon : 144.976,
	radius : 0.01,
	qty : 20,
	
	// set values for panoramio
	order : "popularity",
	set : "public",
	from : 0,
	to : 20,
	size : "square",
	
	//internal flags
	displayPagination : true,
	
	copyright : "Photos provided by <a href='http://www.panoramio.com/' target='_blank'>Panoramio</a>. Photos are under the copyright of their owners."
}

panoramioImages.prototype.init = function (id) {
	// ID used to identify the name of SELF
	this.id = id;
	
	// div used to display the images
	this.imageDivID = panoramioImages.config.imageDivID;

	// custom values
	this.lat = panoramioImages.config.lat;
	this.lon = panoramioImages.config.lon;
	this.radius = panoramioImages.config.radius;
	this.qty = panoramioImages.config.qty;
	
	// set values for panoramio
	this.order = panoramioImages.config.order;
	this.set = panoramioImages.config.set;
	this.from = panoramioImages.config.from;
	this.to = (panoramioImages.config.qty != panoramioImages.config.to) ? panoramioImages.config.qty : panoramioImages.config.to;
	this.size = panoramioImages.config.size;

	// calculated values based on lon/lat/radius
	this.minx = "";
	this.miny = "";
	this.maxx = "";
	this.maxy = "";
	
	// returned & internal values
	this.data = {};
	this.count;
	this.page = 1;
	
	// set up min Max Values
	this.setMinMax();
	
	// load
	this.load();
};
panoramioImages.prototype.load = function(){
	// grab data
	this.getData();
}

panoramioImages.prototype.setMinMax = function(){
	this.minx = parseFloat(this.lon - this.radius);
	this.maxx = parseFloat(this.lon + this.radius);
	this.miny = parseFloat(this.lat - this.radius);
	this.maxy = parseFloat(this.lat + this.radius);
}

panoramioImages.prototype.getData = function(){
	//getPagination();
	jQuery.ajax({
		url			: this.getURL(), 
		dataType	: "jsonp",
		jsonp		: "callback",
		start		: function(){ console.log("start to get data"); },
		error		: function(xmlHttpRequest, textStatus, errorThrown){
			console.log(textStatus + " " + errorThrown);
		},
		success		: function(data){
			if(data){
				// reset divs
				jQuery(this.imageDivID).html("");
				jQuery("#panLargeImages").html("");
				
				jQuery(this.imageDivID).append("<ul class='panthumb'></ul>");
				
				this.data = data;
				this.count = data.count;
				//displayTotal(data.count);
				if(this.count == 0){
					jQuery("#panImages").append("<p>Sorry, we have no images for this location</p>");
				}else{
					jQuery.each(data.photos, 
						function(i,photo){
							this.displayPhoto(photo);
						}.bind(this)
					);
				}
				if(panoramioImages.config.displayPagination){
					this.displayPagination();
				}
				jQuery(".pancopyright").html(panoramioImages.config.copyright);
			}
		}.bind(this)
	});
}

panoramioImages.prototype.getURL = function(){
	var url = "http://www.panoramio.com/map/get_panoramas.php?";
	url += "order=" + this.order;
	url += "&set="  + this.set;
	url += "&from=" + this.from;
	url += "&to="   + this.to;
	url += "&minx=" + this.minx;
	url += "&miny=" + this.miny;
	url += "&maxx=" + this.maxx;
	url += "&maxy=" + this.maxy;
	url += "&size=" + this.size;
	
	this.url = url;
	return url;
}

panoramioImages.prototype.displayPhoto = function(photo){
	/*
	photo.upload_date
	photo.owner_name
	photo.photo_id
	photo.longitude
	photo.height
	photo.width
	photo.photo_title
	photo.latitude:
	photo.owner_url
	photo.owner_id
	photo.photo_file_url
	photo.photo_url
	*/
	
	var img = document.createElement('img');
	img.src = photo.photo_file_url;
	img.setAttribute('width', photo.width);
	img.setAttribute('height', photo.height);

	// adding the images to help with the caching
	jQuery(img).hover(function() {
			this.src = this.src.replace(/square/gi, "small");
		} , function() {
			this.src = this.src.replace(/small/gi, "square");
		}
	);

	// add link to image
	jQuery(img).click(function() {
		window.open(photo.photo_url);
		return false;
	});

	//large image (add to page but dont display it)
	var largeImg = new Image();
	largeImg.src = photo.photo_file_url.replace(/square/gi, "small"),
	//jQuery(largeImg).css({'display' : 'none'});
	jQuery("#panLargeImages").append(largeImg);
	var lastId = jQuery("#panLargeImages").find("img").length;
	lastId--;

	var largeWidth = parseInt(jQuery("#panLargeImages").find("img")[lastId].width)
	var largeHeight = parseInt(jQuery("#panLargeImages").find("img")[lastId].height);
	//default incase I get 0 results
	largeWidth = (largeWidth == 0) ? 240 : largeWidth;
	largeHeight = (largeHeight == 0) ? 180 : largeHeight;
	
	
	// Create LI and add image to LI
	var imageLi = document.createElement("li");
	imageLi.appendChild(img);
	// add li to the UL
	jQuery(this.imageDivID+ " ul").append(imageLi);

	// add events
	jQuery(imageLi).hover(function() {
			jQuery(this).css({'cursor' : 'pointer'});
			jQuery(this).attr("title", "Click to view " + photo.photo_title);
			jQuery(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
			jQuery(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
				.animate({
					marginTop: "-"+parseInt(largeHeight / 2)+"px", /* The next 4 lines will vertically align this image */ 
					marginLeft: "-"+parseInt(largeWidth / 2)+"px",
					top: '50%',
					left: '50%',
					width: largeWidth+'px', /* Set new width */
					height: largeHeight+'px' /* Set new height */
					//padding: '5px'
				}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
		} , function() {
			jQuery(this).css({'cursor' : 'default'});
			jQuery(this).attr("title", "");
			jQuery(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
			jQuery(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
				.animate({
					//src : imageHoverOff,
					marginTop: '0', /* Set alignment back to default */
					marginLeft: '0',
					top: '0',
					left: '0',
					width: photo.width+'px', /* Set width back to default */
					height: photo.height+'px' /* Set height back to default */
					//padding: '5px'
				}, 400);
		}
	);
}

panoramioImages.prototype.displayPagination = function(){
	var from = this.from;
	var to = (this.to > this.count) ? this.count : this.to;
	var count = this.count;
	
	jQuery("#panPagination").html("Image "+parseInt(from + 1) +"-"+to+" of " + count);

	var pages = parseInt(this.count / this.qty);
	pages++; // not sure about this as the rounding could be out of wack!
	
	if(this.page > 1){
		var html = " <img src='/wp-content/plugins/rwLocality/images/left.png' onclick='"+this.id+".loadPagination("+parseInt(this.page - 1 )+")' class='panarrow' />";
		jQuery("#panPagination").append(html);
	}
	if(this.page != pages){
		var html = " <img src='/wp-content/plugins/rwLocality/images/right.png' onclick='"+this.id+".loadPagination("+parseInt(this.page + 1 )+")' class='panarrow' />";
		jQuery("#panPagination").append(html);
	}
	/*
	for (i=1; i<=pages; i++){
		// /wp-content/plugins/rwProperty/images/arrow_left.gif
		// /wp-content/plugins/rwProperty/images/arrow_right.gif
		//var html = "<input type='button' value='"+i+"' onclick='"+this.id+".loadPagination("+i+")' />";
		var html = "<span onclick='"+this.id+".loadPagination("+i+")'>"+i+"</span>";
		jQuery("#panPagination").append(html);
		
	}
	*/
}

panoramioImages.prototype.loadPagination = function(page){
	this.page = page;
	this.from = (this.page <= 1) ? 0 : (this.qty * (this.page - 1));
	this.to = this.qty + this.from;
	
	this.getData();
}