/**
 * Popup
 * @author Mitsuaki Ishimoto
 * @param { "linkClassName" : "string", "mode" : "animation", "thumbnails" : [], "images" : []}
 */
function Popup(arg){
	var self = this;
    
	/**
	 * styles
	 */
	this.bgColor = '#000000';
	this.opacity = 70;
    
    /**
     * variables for having the document object of the images
     */
	this.thumbnails = [];
	this.images = [];
    
	/**
     * document object of the frame
	 */
    this.elm;
    
	/**
     * preference for fadein/fadeout
	 */
    this.mode = arg.mode;
    
	/**
	 * open a popup window
	 */
	this.openWindow = function(){
		if(self.mode === 'animation'){
			if(window.shadow){
				shadow.onAnimation();
			}
			else{
				shadow = new Shadow({"id" : "shadow"});
				shadow.onAnimation();
			}
			if(window.photoFrame){
				photoFrame.onAnimation();
			}
			else{
				photoFrame = new PhotoFrame({"id" : "photoFrame"});
				photoFrame.onAnimation();
			}
		}
		else{
			if(window.shadow){
				shadow.on();
			}
			else{
				shadow = new Shadow({"id" : "shadow"});
				shadow.on();
			}
			if(window.photoFrame){
				photoFrame.on();
			}
			else{
				photoFrame = new PhotoFrame({"id" : "photoFrame"});
				photoFrame.on();
			}
		}
		self.set();
	}
    
	/**
	 * set
	 * prepare all elements in the frame
	 */
	this.set = function(){
        //buttons
		var button = document.createElement('p');
		var link   = document.createElement('a');
        button.id = 'button';
		link.id   = 'button-mail';
		link.setAttribute('href', 'mailto:info@foundltd.com');
		document.getElementById('photoFrame').appendChild(button).appendChild(link).appendChild(document.createTextNode('mail'));
		var link = document.createElement('a');
		link.id = 'button-close';
        $(link).click(function(){
            self.closeWindow();
        });
		button.appendChild(link).appendChild(document.createTextNode('close'));
        
        //main image
		var table = document.createElement('table');
        var tbody = document.createElement('tbody');
        var tr    = document.createElement('tr');
        var td    = document.createElement('td');
        table.id = 'mainImage';
		document.getElementById('photoFrame').appendChild(table).appendChild(tbody).appendChild(tr).appendChild(td).appendChild(self.images[0]);
        self.elm = td;

        //size
		var p = document.createElement('p');
        p.className = 'size';
		if(arg.size){
			p.appendChild(document.createTextNode(arg.size));
			self.elm.style.marginBottom = '3px';
		}
		else{
			self.elm.style.marginBottom = '20px';
		}
		document.getElementById('photoFrame').appendChild(p);
        
        //thumbnails
        var table = document.createElement('table');
        table.id = 'thumbnails';
        var tbody = document.createElement('tbody');
        for(var i = 0, n = arg.thumbnails.length; i < n; i++){
            if(i % 4 === 0){
                var tr = document.createElement('tr');
                tbody.appendChild(tr);
            }
            var td = document.createElement('td');
            td.appendChild(self.thumbnails[i])
            tr.appendChild(td);
        }
        document.getElementById('photoFrame').appendChild(table).appendChild(tbody);
        
        /*
		var tr = document.createElement('tr');
		for(var i = 0, n = arg.thumbnails.length; i < n; i++){
			var td = document.createElement('td');
            td.appendChild(self.thumbnails[i])
            tr.appendChild(td);
		}
        var table = document.createElement('table');
		table.id = 'thumbnails';
        var tbody = document.createElement('tbody');
		document.getElementById('photoFrame').appendChild(table).appendChild(tbody).appendChild(tr);
		*/
	}
	/**
	 * change a photo into another by the attribute 'rel'
	 *
	 */
	this.chagePhoto = function(elm){
		var num = elm.attr('rel');
		while(self.elm.firstChild){
			self.elm.removeChild(self.elm.firstChild);
		}
		self.elm.appendChild(self.images[num]);
	}
	/**
	 * close a popup window
	 *
	 */
	this.closeWindow = function(){
		if(self.mode === 'animation'){
			shadow.offAnimation();
			photoFrame.offAnimation();
		}
		else{
			shadow.off();
			photoFrame.off();
		}
	}
	this.init = function(){
		$('a.' + arg.linkClassName).each(function(){
			$(this).click(function(){
					self.openWindow();
				}
			);
		});
		for(var i = 0, n = arg.thumbnails.length; i < n; i++){
			self.thumbnails[i] = document.createElement('img');
			self.thumbnails[i].src = arg.thumbnails[i];
			self.thumbnails[i].setAttribute('rel', i);
            $(self.thumbnails[i]).click(function(){
                self.chagePhoto($(this));
            });
		}
		for(var i = 0, n = arg.images.length; i < n; i++){
			self.images[i] = document.createElement('img');
			self.images[i].src = arg.images[i];
		}
	}
	self.init();
}