function Property() {
	this.imagePath = '';
	this.imageHeight = '';
	this.imageWidth = '';
	this.thumbImageHeight = '';
	this.thumbImageWidth = '';
	this.title = '';
	this.price = '';
	this.url = '';
	this.position = 0;
	this.htmlPosition = 0;
	this.setImage = function(path, height, width) {
		this.imagePath = path;
		this.imageHeight = height;
		this.imageWidth = width;
		
		var newWidth = 154;
		var newHeight = 116;
		var aspectRatio = width / height;
		  
		if(aspectRatio < 1.32)
			newWidth = newHeight * aspectRatio;
		else
			newHeight = newWidth / aspectRatio;
		
		this.thumbImageHeight = Math.floor(newHeight);
		this.thumbImageWidth = Math.floor(newWidth);
	}
	this.getImagePath = function() {
		return this.imagePath;
	}
	this.getImageHeight = function() {
		return this.imageHeight;
	}
	this.getImageWidth = function() {
		return this.imageWidth;
	}
	this.getThumbImageHeight = function() {
		return this.thumbImageHeight;
	}
	this.getThumbImageWidth = function() {
		return this.thumbImageWidth;
	}
	this.setTitle = function(title) {
		this.title = title;
	}
	this.getTitle = function() {
		return this.title;
	}
	this.setPrice = function(price) {
		this.price = price;
	}
	this.getPrice = function() {
		return this.price;
	}
	this.setUrl = function(url) {
		this.url = url;
	}
	this.getUrl = function() {
		return this.url;
	}
	this.setPosition = function(pos) {
		this.position = pos;
	}
	this.getPosition = function() {
		return this.position;
	}
	this.setHtmlPosition = function(pos) {
		this.htmlPosition = pos;
	}
	this.getHtmlPosition = function() {
		return this.htmlPosition;
	}
}

function FeatureProperty(timeout) {
	
	this.timeout = timeout;
	
	this.properties = [];
	this.timer = null;
	this.counter = 0;
	
	this.start = function() {
		
		var links = PP.getElementById('mainPic').getElementsByTagName('a');
		for(var i = 0; i < links.length; i++) {
			var img = links.item(i).getElementsByTagName('img').item(0);
			var address = links.item(i).getElementsByTagName('span').item(0).innerHTML;
			var price = links.item(i).getElementsByTagName('span').item(1).innerHTML;
			
			var prop = new Property();
			prop.setImage(img.getAttribute('src'), img.getAttribute('height'), img.getAttribute('width'));
			prop.setPrice(price);
			prop.setTitle(address);
			prop.setUrl(links.item(i).getAttribute('href'));
			prop.setPosition(i);
			prop.setHtmlPosition(i);
			this.properties.push(prop);
			
			if(i > 0)
				links.item(i).style.display = 'none';
			
		}
		
		var link = document.createElement('a');
		link.setAttribute('href', '#');
		link.innerHTML = '<span class="line1"></span><span class="line2"></span>';
		
		PP.getElementById('details').appendChild(link);
		
		this.setMainProperty(0);
		this.createList();
		
		var _this = this;
		this.timer = setInterval(function() {
			_this.timerSwitchProperty();
		}, this.timeout);
		
		PP.Util.attachEvent(PP.getElementById('wrapper'), 'mouseout', function() {
			if(!_this.timer) {
				_this.timer = setInterval(function() {
					_this.timerSwitchProperty();
				}, _this.timeout);
			}
		});
		
		PP.Util.attachEvent(PP.getElementById('wrapper'), 'mouseover', function() {
			clearInterval(_this.timer);
			_this.timer = null;
		});
		
		// Remove all span tag within the main pic div
		for(var i = 0; i < links.length; i++) {
			
			var spans = links.item(i).getElementsByTagName('span');
			for(var j = spans.length - 1; j >= 0; j--)
				links.item(i).removeChild(spans.item(j));
			
		}
		
	}
	
	this.createList = function() {
		
		this.Sort();
		
		var element = PP.getElementById('list');
		var html = "";
		var linkTemplate = '<img src="##imagepath##" height="##imageheight##" width="##imagewidth##" alt="" />';
		for(var i = 1; i < this.properties.length; i++) {
			
			var temp = linkTemplate;
			temp = temp.replace("##imagepath##", this.properties[i].getImagePath());
			temp = temp.replace("##imageheight##", this.properties[i].getThumbImageHeight());
			temp = temp.replace("##imagewidth##", this.properties[i].getThumbImageWidth());
			
			var link = document.createElement('a');
			link.setAttribute('href', '#');
			link.setAttribute('class', 'property' + ((i == 2)?' last':''));
			link.innerHTML = temp;
			
			element.appendChild(link);
			
		}
		
		var links = PP.getElementById('list').getElementsByTagName('a');
		var _this = this;
		PP.Util.attachEvent(links.item(0), 'click', function() {
			_this.switchProperty(1);
		});
		
		PP.Util.attachEvent(links.item(1), 'click', function() {
			_this.switchProperty(2);
		});		
		
	}
	
	this.timerSwitchProperty = function() {
		
		this.counter++;
		if(this.counter > (this.properties.length - 1))
			this.counter = 0;
		
		this.switchProperty(this.counter);		
	}
	
	this.switchProperty = function(index) {
		
		// Change postition
		this.properties[0].setPosition(index); // Set main property
		this.properties[index].setPosition(0);
		
		this.removeList();
		this.createList();
		this.setMainProperty();
		
	}
	
	this.setMainProperty = function() {
		
		this.hideAll();
		
		PP.getElementById('mainPic').getElementsByTagName('a').item(this.properties[0].getHtmlPosition()).style.display = 'block';
		
		var link = PP.getElementById('details').getElementsByTagName('a');
		link.item(0).setAttribute('href', this.properties[0].getUrl());
		link.item(0).getElementsByTagName('span').item(0).innerHTML = this.properties[0].getTitle();
		link.item(0).getElementsByTagName('span').item(1).innerHTML = this.properties[0].getPrice();
	}
	
	this.hideAll = function() {
		var links = PP.getElementById('mainPic').getElementsByTagName('a');
		for(var i = 0; i < links.length; i++)
			links.item(i).style.display = 'none';
	}
	
	this.removeList = function() {
		var element = PP.getElementById('list');
		var links = element.getElementsByTagName('a');
		for(var i = links.length - 1; i >= 0; i--)
			element.removeChild(links.item(i));
	}
	
	this.Sort = function() {
		this.properties.sort(this.sortPosition);
	}
	
	this.sortPosition = function (a, b) {
		if(a.position > b.position) return 1;
		else if(a.position < b.position) return -1;
		else return 0;
	}
	
}