var FieldManager = new Class({
        
            initialize: function(type) {	        
	            // set popup position            
	            var width = 625;
	            var height = 550;
	            var window_size = window.getSize();
	            var left = Math.max(0, (window_size.x - width) / 2);
	            var top = Math.max(0, ((window_size.y - height) / 2) + window.getScroll().y);

	            // create popup box
	            this.addFieldBox = new Element('div', { 'id': 'popup', 'styles': {'width':width,'height': height,'position': 'absolute', 'top': top + 'px', 'left': left + 'px','overflow':'auto'} }).inject($(document.body));
	            var titlebar = new Element('div', { 'class': 'titlebar' }).set('text', 'TitleBar').inject(this.addFieldBox, 'top');
	            new Element('div', {'id':'close','events': { 'click': function() { this.hideAddFieldBox(); } .bind(this)} }).inject(titlebar);
	            this.overlay = new Element('div', { 'id': 'overlay', 'styles': { 'width': +window_size.x + 'px', 'height': window_size.y + window.getScroll().y + 'px',}, 'events': { 'click': function() { this.hideAddFieldBox(); } .bind(this)} }).inject($(document.body));		            
				
			    if(type == "reel1")
	           {
	            var h1 = new Element('div',{'class':'pHeader1'}).set('text','Basketball Eye').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox)
					
					var p = new Element('p').inject(this.addFieldBox);
	                new Element ('p').set('text','Lorem ipsum dolor sit amet, molestie consectetuer. Risus doloremque egestas, turpis deleniti, accumsan lorem, tortor scelerisque deleniti diam orci lectus. Augue libero in eget orci adipiscing. Wisi ac duis lobortis mauris nunc, porttitor wisi non sapien libero metus malesuada, elit quis ultrices et fermentum in interdum, vitae in sem. Eget sed maecenas gravida sit velit pharetra, justo senectus amet, sagittis rhoncus lorem, amet penatibus neque. Aliquam consequat pede ante urna, quam nulla risus proin. Ullamcorper mi in eros, maecenas ut per leo at nibh sed, amet sed risus lectus, velit libero ultrices vestibulum. ').inject(this.addFieldBox);
					
					
					new Element('img', {'src':'images/home_sites/1.jpg','align':'right'}).inject(p);
					
					var p = new Element('p').inject(this.addFieldBox);
	                new Element ('p').set('text','Lorem ipsum dolor sit amet, molestie consectetuer. Risus doloremque egestas, turpis deleniti, accumsan lorem, tortor scelerisque deleniti diam orci lectus. Augue libero in eget orci adipiscing. Wisi ac duis lobortis mauris nunc, porttitor wisi non sapien libero metus malesuada, elit quis ultrices et fermentum in interdum, vitae in sem. Eget sed maecenas gravida sit velit pharetra, justo senectus amet, sagittis rhoncus lorem, amet penatibus neque. Aliquam consequat pede ante urna, quam nulla risus proin. Ullamcorper mi in eros, maecenas ut per leo at nibh sed, amet sed risus lectus, velit libero ultrices vestibulum aliquet cursus. ').inject(this.addFieldBox);
					
					var p = new Element('p').inject(this.addFieldBox);
	                new Element('a', {'href':'http://basketballeye.com','target':'_blank'}).set('text',' « View Site').inject(p);
	           }			   
			     else if(type == "reel2")
	           {
	            var h1 = new Element('div',{'class':'pHeader1'}).set('text','Exotic Woods').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox)
					
					var p = new Element('p').inject(this.addFieldBox);
	                new Element ('p').set('text','Lorem ipsum dolor sit amet, molestie consectetuer. Risus doloremque egestas, turpis deleniti, accumsan lorem, tortor scelerisque deleniti diam orci lectus. Augue libero in eget orci adipiscing. Wisi ac duis lobortis mauris nunc, porttitor wisi non sapien libero metus malesuada, elit quis ultrices et fermentum in interdum, vitae in sem. Eget sed maecenas gravida sit velit pharetra, justo senectus amet, sagittis rhoncus lorem, amet penatibus neque. Aliquam consequat pede ante urna, quam nulla risus proin. Ullamcorper mi in eros, maecenas ut per leo at nibh sed, amet sed risus lectus, velit libero. ').inject(this.addFieldBox);
					
					
					new Element('img', {'src':'images/home_sites/2.jpg','align':'right'}).inject(p);
					
						var p = new Element('p').inject(this.addFieldBox);
	                new Element ('p').set('text','Lorem ipsum dolor sit amet, molestie consectetuer. Risus doloremque egestas, turpis deleniti, accumsan lorem, tortor scelerisque deleniti diam orci lectus. Augue libero in eget orci adipiscing. Wisi ac duis lobortis mauris nunc, porttitor wisi non sapien libero metus malesuada, elit quis ultrices et fermentum in interdum, vitae in sem. Eget sed maecenas gravida sit velit pharetra, justo senectus amet, sagittis rhoncus lorem, amet penatibus neque. Aliquam consequat pede ante urna, quam nulla risus proin. Ullamcorper mi in eros, maecenas ut per leo at nibh sed, amet sed risus lectus, velit libero ultrices vestibulum aliquet cursus. Lorem ipsum dolor sit amet, molestie consectetuer. Risus doloremque egestas, turpis deleniti, accumsan lorem, tortor scelerisque deleniti diam orci lectus. Augue libero in eget orci adipiscing. Wisi ac duis lobortis mauris nunc, porttitor wisi non sapien libero metus malesuada, elit quis ultrices et fermentum in interdum, vitae in sem. Eget sed maecenas gravida sit velit pharetra, justo senectus amet, sagittis rhoncus lorem, amet penatibus neque. Aliquam consequat pede ante urna, quam nulla risus proin. Ullamcorper mi in eros, maecenas ut per leo at nibh sed, amet sed risus lectus, velit libero ultrices vestibulum aliquet cursus. ').inject(this.addFieldBox);
					
					
					var p = new Element('p').inject(this.addFieldBox);
	                new Element('a', {'href':'http://www.exotic-woods.com','target':'_blank'}).set('text',' « View Site').inject(p);
	           }
			      else if(type == "reel3")
	           {
	            var h1 = new Element('div',{'class':'pHeader1'}).set('text','BACKRACK').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox)
					
					var p = new Element('p').inject(this.addFieldBox);
	                new Element ('p').set('text','Lorem ipsum dolor sit amet, molestie consectetuer. Risus doloremque egestas, turpis deleniti, accumsan lorem, tortor scelerisque deleniti diam orci lectus. Augue libero in eget orci adipiscing. Wisi ac duis lobortis mauris nunc, porttitor wisi non sapien libero metus malesuada, elit quis ultrices et fermentum in interdum, vitae in sem. Eget sed maecenas gravida sit velit pharetra, justo senectus amet, sagittis rhoncus lorem, amet penatibus neque. Aliquam consequat pede ante urna, quam nulla risus proin. Ullamcorper mi in eros, maecenas ut per leo at nibh sed, amet sed risus lectus, velit libero ultrices vestibulum. ').inject(this.addFieldBox);
					
					new Element('img', {'src':'images/home_sites/3.jpg','align':'right'}).inject(p);
					
						var p = new Element('p').inject(this.addFieldBox);
	                new Element ('p').set('text','Lorem ipsum dolor sit amet, molestie consectetuer. Risus doloremque egestas, turpis deleniti, accumsan lorem, tortor scelerisque deleniti diam orci lectus. Augue libero in eget orci adipiscing. Wisi ac duis lobortis mauris nunc, porttitor wisi non sapien libero metus malesuada, elit quis ultrices et fermentum in interdum, vitae in sem. Eget sed maecenas gravida sit velit pharetra, justo senectus amet, sagittis rhoncus lorem, amet penatibus neque. Aliquam consequat pede ante urna, quam nulla risus proin. Ullamcorper mi in eros, maecenas ut per leo at nibh sed, amet sed risus lectus, velit libero ultrices vestibulum aliquet cursus. Lorem ipsum dolor sit amet, molestie consectetuer. Risus doloremque egestas, turpis deleniti, accumsan lorem, tortor scelerisque deleniti diam orci lectus. Augue libero in eget orci adipiscing. Wisi ac duis lobortis mauris nunc, porttitor wisi non sapien libero metus malesuada, elit quis ultrices et fermentum in interdum, vitae in sem. Eget sed maecenas gravida sit velit pharetra, justo senectus amet, sagittis rhoncus lorem, amet penatibus neque. Aliquam consequat pede ante urna, quam nulla risus proin. Ullamcorper mi in eros, maecenas ut per leo at nibh sed, amet sed risus lectus, velit libero ultrices vestibulum aliquet. ').inject(this.addFieldBox);
					
					
					var p = new Element('p').inject(this.addFieldBox);
	                new Element('a', {'href':'http://www.backrack.com','target':'_blank'}).set('text',' « View Site').inject(p);
	           }
			      else if(type == "reel4")
	           {
	            var h1 = new Element('div',{'class':'pHeader1'}).set('text','Top 10 Workouts').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox)
					
					var p = new Element('p').inject(this.addFieldBox);
	                new Element ('p').set('text','Lorem ipsum dolor sit amet, molestie consectetuer. Risus doloremque egestas, turpis deleniti, accumsan lorem, tortor scelerisque deleniti diam orci lectus. Augue libero in eget orci adipiscing. Wisi ac duis lobortis mauris nunc, porttitor wisi non sapien libero metus malesuada, elit quis ultrices et fermentum in interdum, vitae in sem. Eget sed maecenas gravida sit velit pharetra, justo senectus amet, sagittis rhoncus lorem, amet penatibus neque. Aliquam consequat pede ante urna, quam nulla risus proin. Ullamcorper mi in eros, maecenas ut per leo at nibh sed, amet sed risus lectus, velit libero ultrices vestibulum aliquet. ').inject(this.addFieldBox);
					
					new Element('img', {'src':'images/home_sites/4.jpg','align':'right'}).inject(p);
					
						var p = new Element('p').inject(this.addFieldBox);
	                new Element ('p').set('text','Lorem ipsum dolor sit amet, molestie consectetuer. Risus doloremque egestas, turpis deleniti, accumsan lorem, tortor scelerisque deleniti diam orci lectus. Augue libero in eget orci adipiscing. Wisi ac duis lobortis mauris nunc, porttitor wisi non sapien libero metus malesuada, elit quis ultrices et fermentum in interdum, vitae in sem. Eget sed maecenas gravida sit velit pharetra, justo senectus amet, sagittis rhoncus lorem, amet penatibus neque. Aliquam consequat pede ante urna, quam nulla risus proin. Ullamcorper mi in eros, maecenas ut per leo at nibh sed, amet sed risus lectus, velit libero ultrices vestibulum aliquet cursus. Lorem ipsum dolor sit amet, molestie consectetuer. Risus doloremque egestas, turpis deleniti, accumsan lorem, tortor scelerisque deleniti diam orci lectus. Augue libero in eget orci adipiscing. Wisi ac duis lobortis mauris nunc, porttitor wisi non sapien libero metus malesuada, elit quis ultrices et fermentum in interdum, vitae in sem. Eget sed maecenas gravida sit velit pharetra, justo senectus amet, sagittis rhoncus lorem, amet penatibus neque. Aliquam consequat pede ante urna, quam nulla risus proin. Ullamcorper mi in eros, maecenas ut per leo at nibh sed, amet sed risus lectus, velit libero ultrices vestibulum aliquet cursus. ').inject(this.addFieldBox);
					
					
					var p = new Element('p').inject(this.addFieldBox);
	                new Element('a', {'href':'http://www.top10workouts.com','target':'_blank'}).set('text',' « View Site').inject(p);
	           }
			      else if(type == "reel5")
	           {
	            var h1 = new Element('div',{'class':'pHeader1'}).set('text','Hickory Dickory Decks').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox);
	                new Element('br').inject(this.addFieldBox)
					
					var p = new Element('p').inject(this.addFieldBox);
	                new Element ('p').set('text','Lorem ipsum dolor sit amet, molestie consectetuer. Risus doloremque egestas, turpis deleniti, accumsan lorem, tortor scelerisque deleniti diam orci lectus. Augue libero in eget orci adipiscing. Wisi ac duis lobortis mauris nunc, porttitor wisi non sapien libero metus malesuada, elit quis ultrices et fermentum in interdum, vitae in sem. Eget sed maecenas gravida sit velit pharetra, justo senectus amet, sagittis rhoncus lorem, amet penatibus neque. Aliquam consequat pede ante urna, quam nulla risus proin. Ullamcorper mi in eros, maecenas ut per leo at nibh sed, amet sed risus lectus, velit libero ultrices vestibulum. ').inject(this.addFieldBox);
					
					new Element('img', {'src':'images/home_sites/5.jpg','align':'right'}).inject(p);
					
						var p = new Element('p').inject(this.addFieldBox);
	                new Element ('p').set('text','Lorem ipsum dolor sit amet, molestie consectetuer. Risus doloremque egestas, turpis deleniti, accumsan lorem, tortor scelerisque deleniti diam orci lectus. Augue libero in eget orci adipiscing. Wisi ac duis lobortis mauris nunc, porttitor wisi non sapien libero metus malesuada, elit quis ultrices et fermentum in interdum, vitae in sem. Eget sed maecenas gravida sit velit pharetra, justo senectus amet, sagittis rhoncus lorem, amet penatibus neque. Aliquam consequat pede ante urna, quam nulla risus proin. Ullamcorper mi in eros, maecenas ut per leo at nibh sed, amet sed risus lectus, velit libero ultrices vestibulum aliquet cursus. Lorem ipsum dolor sit amet, molestie consectetuer. Risus doloremque egestas, turpis deleniti, accumsan lorem, tortor scelerisque deleniti diam orci lectus. Augue libero in eget orci adipiscing. Wisi ac duis lobortis mauris nunc, porttitor wisi non sapien libero metus malesuada, elit quis ultrices et fermentum in interdum, vitae in sem. Eget sed maecenas gravida sit velit pharetra, justo senectus amet, sagittis rhoncus lorem, amet penatibus neque. Aliquam consequat pede ante urna, quam nulla risus proin. Ullamcorper mi in eros, maecenas ut per leo at nibh sed, amet sed risus lectus, velit libero ultrices vestibulum aliquet cursus. ').inject(this.addFieldBox);
					
					
					var p = new Element('p').inject(this.addFieldBox);
	                new Element('a', {'href':'http://www.decks.ca','target':'_blank'}).set('text',' « View Site').inject(p);
	           }   
	           var footer = new Element('div', { 'class': 'footerbar','events': { 'click': function() { this.hideAddFieldBox(); } .bind(this)}  }).set('text', '').inject(this.addFieldBox, 'bottom');
	               
	       },
	       hideAddFieldBox: function() {
	            if (this.addFieldBox) {
	                document.getElementById('popup').destroy();	                
	                this.overlay.destroy();
	            }
	        }
        });