function applyConfigObject(o,c){
	if(o && c && typeof c == 'object'){
        for(var p in c){
            o[p] = c[p];
		}
    }
    return o;
}

var Features = Class.create();													//create new class
Features.prototype = {															//class prototype

	//bindTo			: null,
	//el: null,
	//features
	
	initialize: function(config){
		
		applyConfigObject(this, config);
		
		if (this.features.length < 1){
			return false;
		}
		
		//var featuresPanel = $("p2_featuresview");
		//wwCenter(this.el.down(".bigphoto"),this.el.down(".bigphotoContainer"));
		
		//reinit flex scroller
		fleXenv.initByClass("flexcroll");
		
		this.itemTemplate = this.el.down(".item").remove();
		
		this.imagesLoaded = 0;
		
		for (var i=0; i<this.features.length; i++){
			
			var pic = new Image();
			pic.src = this.features[i].image;
			pic.onload = function(that){
				return function(){
					that.imagesLoaded++;
					that.checkIfLoaded();
				}
			}(this);
			
			
			var item = this.itemTemplate.cloneNode(true);
			item.wwFeatureId = i;
			item.down("img").src = this.features[i].image;
			item.down(".itemTitle").innerHTML = this.features[i].name;
			this.el.down(".items").appendChild(item);
			
			item.observe("click", function(ev){
				var el = Event.findElement(ev, ".item");
				this.initFeature(el.wwFeatureId);
			}.bind(this));
		}//end for
		
		
		//this.initFeature(0);
		
		//center bottom menu
	},//end initialize
	
	checkIfLoaded: function(){

		if (this.imagesLoaded == this.features.length){
			//this.initFeature(0);
		}
		
	},
	
	doLayout: function(){
		this.el.select(".item")[0].style.marginLeft = "0px";
		wwCenter(this.el.down(".items"),this.el.down(".itemsContainer"), "h");
	},
	
	initFeature: function(id){
		
		this.el.down(".bigphoto img").setOpacity(0);
		this.el.down(".bigphoto img").src = this.features[id].image;
		
		new Effect.Opacity(this.el.down(".bigphoto img"), { from: 0.0, to: 1.0, duration: 0.5 });
		//window.setTimeout(function(){
			wwCenter(this.el.down(".bigphoto"),this.el.down(".bigphotoContainer"));
			
			//in admin the image is resized at max 700 / 400
			
			//this.ratio = this.el.down(".bigphoto img").getWidth() / 700;
			this.ratio = this.el.down(".bigphoto img").getWidth() / this.features[id].imageMarkedWidth;
			
			
			this.el.down(".bigphoto").select(".pin").each(function(el){
				el.remove();
			});
			
			var first = null;
			for (var j=0; j<this.features[id].items.length; j++){
				
				var pin = document.createElement("div");
				Element.extend(pin);
				pin.addClassName("pin");
				
				pin.style.left = this.features[id].items[j].pos_x * this.ratio - 10 + "px";
				pin.style.top = this.features[id].items[j].pos_y * this.ratio - 10 + "px";
				this.el.down(".bigphoto").appendChild(pin);
				
				pin.itemJSON = this.features[id].items[j];
				
				pin.observe("mouseover", function(ev){
					var t = Event.findElement(ev, ".pin");
					t.addClassName("hover");
					this.el.down(".tooltip").innerHTML = t.itemJSON.name;
					
					var tpos = t.positionedOffset();
					
					var left = tpos[0] - (this.el.down(".tooltip").getWidth()/2);
					
					if (left < 0){
						left = 10;
					}
					
					if (left >= this.el.down(".bigphoto").getWidth()){
						left = this.el.down(".bigphoto").getWidth() - this.el.down(".tooltip").getWidth() - 10;
					}
					
					this.el.down(".tooltip").style.left = left+"px";
					this.el.down(".tooltip").style.top = tpos[1] - 50 + "px";
					
					this.el.down(".tooltip").show();
				}.bind(this));
				
				pin.observe("mouseout", function(ev){
					var t = Event.findElement(ev, ".pin");
					t.removeClassName("hover");
					this.el.down(".tooltip").hide();
				}.bind(this));
				
				
				
				pin.observe("click", function(ev){
					var t = Event.findElement(ev, ".pin");
					this.initItem(t);
				}.bind(this));
				
				if (j == 0){
					first = pin;
				}
			}
			
			if (first != null){
				this.initItem(pin);
			}
			
		//}.bind(this), 10);
		
	},//end initFeature
	
	initItem: function(pin){
		
		this.el.down(".bigphoto").select(".pin").each(function(el){
			el.removeClassName("selected");
		});
		
		pin.addClassName("selected");
		
		this.el.down(".dTitle").innerHTML = pin.itemJSON.name;
		this.el.down(".dImg").style.backgroundImage = "url('"+pin.itemJSON.image+"')";
		//this.el.down(".dDesc").innerHTML = pin.itemJSON.description;
		
		this.el.down(".dDescContainer").innerHTML = '\
			<div class="dDesc flexcroll">'+pin.itemJSON.description+'</div>\
		';
		
		//reinit flex scroller
		fleXenv.initByClass("flexcroll");
	}//end initItem
	

}