/**
 * PhotoFrame
 * @author Mitsuaki Ishimoto
 * @param { "id" : "string" }
 */
function PhotoFrame(arg){
	var self = this;
	/*
	 * styles
	 */
	this.bgColor = '#ffffff';
	this.opacity = 100;
	this.tmpOpacity = 0;
	/*
	 * document object of the frame
	 */
	this.elm;
	/*
	 * time ID for animation
	 */
	this.timeId;
	/*
	 * lock to animation
	 */
	this.lockAnimation = false;
	this.createFrame = function(){
		self.elm = document.createElement('div');
		self.elm.id = arg.id;
		self.elm.style.backgroundColor = self.bgColor;
		self.elm.style.zIndex = 200;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        self.elm.style.top = scrollTop + 10 + 'px';
		document.getElementById('products').appendChild(self.elm);
	}
	this.deleteFrame = function(){
		var oldNode = (document.getElementById(arg.id));
		if(oldNode){
			oldNode.parentNode.removeChild(oldNode);
		}
	}
	this.fadeIn = function(){
		if(self.opacity > self.tmpOpacity){
			self.tmpOpacity = self.tmpOpacity + 25;
			self.setOpacityValue(self.tmpOpacity);
			self.timeId = setTimeout(
				function(){
					self.fadeIn();
				},
				30
			);
		}
		else{
			self.lockAnimation = false;
			self.tmpOpacity = 100;
			self.setOpacityValue(self.opacity);
			clearTimeout(self.timeId);
		}
	}
	this.fadeOut = function(){
		if(self.tmpOpacity > 0){
			self.tmpOpacity = self.tmpOpacity - 25;
			self.setOpacityValue(self.tmpOpacity);
			self.timeId = setTimeout(
				function(){
					self.fadeOut();
				},
				30
			);
		}
		else{
			self.lockAnimation = false;
			self.tmpOpacity = 0;
			self.setOpacityValue(self.opacity);
			clearTimeout(self.timeId);
			self.deleteFrame();
		}
	}
	this.setOpacityValue = function(value){
		if(!!(window.attachEvent && !window.opera)){
			self.elm.style.filter = 'Alpha(opacity = ' + value + ')';
		}
		else{
			self.elm.style.opacity = (value / 100);
		}
	}
	/**
	 * turn on a frame
	 * 
	 */
	this.on = function(){
		self.createFrame();
		self.setOpacityValue(self.opacity);
	}
	/**
	 * turn on a frame animated
	 * 
	 */
	this.onAnimation = function(){
		self.createFrame();
		if(self.lockAnimation === false){
			self.fadeIn();
		}
		self.lockAnimation = true;
	}
	/**
	 * turn off a frame
	 * 
	 */
	this.off = function(){
		self.deleteFrame();
	}
	/**
	 * turn off a frame animated
	 * 
	 */
	this.offAnimation = function(){
		if(self.lockAnimation === false){
			self.fadeOut();
		}
		self.lockAnimation = true;
	}
}