var wdc = Class.create({
	
	_litbox : null,
	
	initialize : function(page){
		this._observeNav();
		
		switch(page){
			case 'pics':
				this.pics = new woggie_pics();
				break;
			case 'upload':
				this.pics = new woggie_pics('upload');
				break;
		}
	},
	
	_observeNav : function(){
		$$('.nav_item').each(function(e){
			e.observe('click', function(event){
				var action = event.target.readAttribute('action');
				
				switch(action){
					case 'home':
						break;
					case 'blog':
						break;
					case 'tek':
						break;
					case 'projects':
						break;
					case 'linx':
						break;
					case 'pics':
						break;
					case 'vids':
						break;
					case 'music':
						break;
					case 'upload':
						break;
					case 'login':
						this._callLogin();
						break;
				}
			}.bind(this));
		}.bind(this));
	},
	
	_updateUploadCategories : function(){
		
			new Ajax.Request('ajax/wdc_ajax.php?type=pic_categories', {
				method: 'get',
				onSuccess : function(transport){
					alert(transport.responseText);
					if(transport.responseText == 'login successful'){
						$('logged_in').innerHTML = 'logged in as: '+'wajiw'+' <br /><a href="javascript: void(0);" action="login">logout</a>';
					}
					else{
						
					}
				}
			} );
	},
	
	
	_callLogin : function(){
		var html = '<div id="login_box">';
		html += '<div style="margin-bottom: 20px;"><div style="float:left;width: 80px;">username:</div><div style="float:left;width: 120px;"><input type="text" class="input_item" name="un" id="un"></div></div><div style="margin-bottom: 20px;"><div style="float:left;width: 80px;">password:</div><div style="float:left;width: 120px;"><input type="password"  class="input_item" name="pw" id="pw"></div></div>';
		html += '<div style="float:left;width: 200px;text-align: center;margin-top: 30px;"><input type="button" id="submit_login" value="login" class="input_item"></div>';
		html += '</div>';
		this._litbox = new LITBox(html, {type:'alert', overlay:false, height:150, width:280, resizable:false}, this._doLogin );
	},
	
	_doLogin : function(){
		$('submit_login').observe('click', function(){
			login_string = 'un='+$F('un')+'&pw='+$F('pw');
			
			new Ajax.Request('ajax/wdc_ajax.php?type=login&'+login_string, {
				method: 'get',
				onSuccess : function(transport){
					alert(transport.responseText);
					if(transport.responseText == 'login successful'){
						$('logged_in').innerHTML = 'logged in as: '+'wajiw'+' <br /><a href="javascript: void(0);" action="login">logout</a>';
					}
					else{
						
					}
				}
			} );
		});
	}
	
	
	
});

var woggie_pics = Class.create({
	
	mainNumGalleries : 6,
	_dataSet : {},
	
	initialize : function(type, options){
		
		var init = 'init'; 
		
		if($('pics'))
			this.container = $('pics');
			
			
		switch(type){
			case 'upload':
				init = 'upload';
				break;
			default:
				this._initGallery();
				break;
		}
		
		this._getDataSet('../pictures/', init);
		
	},
	
	_initGallery : function(){
		
		this._createPageElements();
		
		if($('pic_galleries'))
			this.galleryContainer = $('pic_galleries');
			
		if($('gallery_display'))
			this.displayContainer = $('gallery_display');
			
		if($('gallery_title'))
			this.galleryTitle = $('gallery_title');
			
		if($('active_pic'))
			this.activepicCont = $('active_pic');
			
		if($('thumbCont'))
			this.thumbCont = $('thumbCont');
			
		if($('prevThumbs'))
			this.p_thumb = $('prevThumbs');
			
		if($('nextThumbs'))
			this.n_thumb = $('nextThumbs');
			
		if($('pic_count'))
			this.picCount = $('pic_count');
			
		this._currPageSize = 14;
		this._currPageRows = 2;
		this._currRowSize = this._currPageSize/this._currPageRows;
		this._currNumPages = null;
		this._currThumbWidth = 60;
		this._currThumbHeight = 60;
		this._pagesFinished = 0;
		this._initGalNum = 3;
		this._initGalCount = 0;
		
	},
	
	_createPageElements : function(){
		var html  = '<div id="pic_galleries_cont"><div id="pic_galleries"></div></div>';
			html += '<div id="gallery_display" style="display:none;">';
			html += '<div id="top_row">';
			html += '<div id="gallery_title"></div>';
			html += '<div id="active_pic"></div>';
			html += '';
			html += '<div id="pagination"><a href="javascript:void(0);" action="prev_pic"><< prev </a><span id="pic_count"></span><a href="javascript:void(0);" action="next_pic"> next >></a></div>';
			html += '</div>';
			html += '<div id="thumbs">';
			html += '<div id="prevThumbsCont">&nbsp;<span id="prevThumbs" action="p_thumb" style="display:none;">prev page</span></div>';
			html += '<div id="thumbCont"></div>';
			html += '<div id="nextThumbsCont">&nbsp;<span id="nextThumbs" action="n_thumb" style="display:none;">next page</span></div>';
			html += '</div>';
			html += '<div id="show_galleries"><a href="javascript:void(0);" action="toggle_display">Show Galleries</a></div>';
			html += '</div>';
			html += '<div id="image_preload" style="display:none;"></div>';
		this.container.innerHTML = html;
	},
	
	_getDataSet : function(dir, init){
		
		params = '?type=image_categories&img_dir='+dir;
		this._dataSet = null;
		var req = new Ajax.Request('ajax/wdc_ajax.php'+params, {
			method: 'get',
			onSuccess : function(transport){
				this._dataSet = transport.headerJSON;
				if (init == 'init') {
					this._getPics(dir);
					//this._setGalleries();
				}
				if(init == 'upload'){
					this._addGallerySelectObservers();
					this._updateGallerySelect();
					this._createGalleryObserver();
				}
			}.bind(this)
		} );
	},
	
	_getPics : function(dir){
		this._dataSet.each(function(e){
			this._totalPages += e.pages;
		}.bind(this));
		this._dataSet.each(function(e, i){
			var img_dir = dir + e.name + '/';
			var pages = e.pages;
			var page = 0; 
			this._dataSet[i].pictures = {};
			for(var j = 0; j < pages; j++){
				page = j+1;
				this._getPicPage(page, img_dir, i, pages);
			}
			/*
			var params = '?type=gallery_pictures&img_dir=' + img_dir;
			var req = new Ajax.Request('ajax/wdc_ajax.php' + params, {
				method: 'get',
				onSuccess: this._getPicsResp.bind(this, i, img_dir),
				onException: function(e){
				},
				onError: function(e){
				}
			});
			*/
		}.bind(this));
		
	},
	
	_getPicPage : function(page, img_dir, set_num, pages){
		var pic_temp = {};
		var params = '?type=get_page&page='+page+'&img_dir=' + img_dir
		//alert(params);
		var req = new Ajax.Request('ajax/wdc_ajax.php' + params, {
			method: 'get',
			onSuccess: function(transport){
				pic_temp = transport.headerJSON[0].pictures;
				this._pagesFinished++;
				Object.extend(this._dataSet[set_num].pictures, pic_temp);
				//alert(page  +' '+   pages);
				if(page == pages){
					//this._setGalleries();
					this._initGalCount++;
					//alert(this._initGalCount +' '+  this._dataSet.size());
					if(this._initGalCount == this._dataSet.size()){
						this._picsLoaded();
					}
				}
				alert(this._dataSet[i].pictures);
			}.bind(this)
		});
		
		return pic_temp;
	},
	
	_picsLoaded : function(){
		this._setGalleries();
	},
	
	_getPicsResp : function(i, transport, img_dir){
		
		var pages = transport.headerJSON[0].pages;
		var page = 0;
		var set_num = i;
		this._dataSet[i].pictures = {};
		for(var j = 0; j < pages; j++){
			page = j+1;
			
			Object.extend(this._dataSet[i].pictures, this._getPicPage(page, img_dir, i));
		}
		/*
		this._dataSet[i].pictures = transport.headerJSON[0].pictures;
		if(i+1 == this._dataSet.length)
			this._setGalleries();
		*/
	},
	
	_setGalleries : function(){
		var html = '';

		if (this._dataSet) {
			for (var i = 0; i < this._dataSet.size(); i++) {
				//debugger; 
				var gname = this._dataSet[i]['date']+'_'+this._dataSet[i]['title'];
				html += '<a href="javascript:void(0);"><div class="gallery_box" gallery_name="'+gname+'"  action="change_gallery">';
				var picdir = $H(this._dataSet[i]['pictures']);
				var filename = '';
				var first = true;
				picdir.each(function(e){
					if(e[1]['sm'] && first)
						filename = e[1]['sm'];
					first = false;
					return false;
				}.bind(this));
				var picurl = (filename != '' && filename != null) ? '/pictures/'+this._dataSet[i]['date']+'_'+this._dataSet[i]['title']+'/' + filename : '' ;
				html += '<div class="gallery_image" style="background: transparent url('+picurl+') no-repeat; height: 150px; width: 150px;" gallery_name="'+gname+'"  action="change_gallery"></div>';
				html += '<div class="gallery_title" gallery_name="'+gname+'" action="change_gallery">'+this._dataSet[i]['title']+'<br />'+this._dataSet[i]['date']+'<br /></div></div></a>';
			}
			this.galleryContainer.innerHTML = html;
			this._addGalleryObservers();
		}
	},
	
	_setGallery : function(g_name){
		var html = '';

		if (this._dataSet) {
			for (var i = 0; i < this._dataSet.size(); i++) {
				//debugger; 
				var gname = this._dataSet[i]['date']+'_'+this._dataSet[i]['title'];
				html += '<a href="javascript:void(0);"><div class="gallery_box" gallery_name="'+gname+'"  action="change_gallery">';
				var picdir = $H(this._dataSet[i]['pictures']);
				var filename = '';
				var first = true;
				picdir.each(function(e){
					if(e[1]['sm'] && first)
						filename = e[1]['sm'];
					first = false;
					return false;
				}.bind(this));
				var picurl = (filename != '' && filename != null) ? '/pictures/'+this._dataSet[i]['date']+'_'+this._dataSet[i]['title']+'/' + filename : '' ;
				html += '<div class="gallery_image" style="background: transparent url('+picurl+') no-repeat; height: 150px; width: 150px;" gallery_name="'+gname+'"  action="change_gallery"></div>';
				html += '<div class="gallery_title" gallery_name="'+gname+'" action="change_gallery">'+this._dataSet[i]['title']+'<br />'+this._dataSet[i]['date']+'<br /></div></div></a>';
			}
			this.galleryContainer.innerHTML = html;
			this._addGalleryObservers();
		}
	},
	
	_addGalleryObservers : function(){
		this.container.observe('click', function(e){
			var action = e.target.readAttribute('action');
			 
			switch(action){
				case 'change_gallery':
					this.currpic = null;
					this.currgal = null;
					this.picIndex = null;
					this.currpage = null;
					var gallery = e.target.readAttribute('gallery_name');
					if(gallery){
						this.currgal = gallery;
						this._displayGallery(gallery);
					} 
					this._toggleDisplay();
					this._currNumPages = parseInt(this._currentPictures.length/this._currPageSize + 1);
					break;
				case 'next_pic':
					this._nextPic();
					break;
				case 'prev_pic':
					this._prevPic();
					break;
				case 'toggle_display':
					this._toggleDisplay();
					break;
				case 'p_thumb':
					if(this.currpage > 1){
						--this.currpage;
						this._updateThumbs();
					}
					break;
				case 'n_thumb':
					if(this.currpage < this._currNumPages){
						++this.currpage;
						this._updateThumbs();
					}
					break;
				case 'thmbClick':
					var picid = e.target.readAttribute('picid');
					this.picIndex = picid*1;
					this.currpic = this._currentPictures[picid].sm;
					this._updateActivePic();
					break;
					
			}
		}.bind(this)); 
	},
	
	_toggleDisplay : function(){
		this.galleryContainer.toggle();
		this.displayContainer.toggle();
	},
	
	_displayGallery : function(gallery, options){
		
		if(options){
			this.currpic = options.currpic;
			this.currgal = options.currgal;
		}
		/*
		if(!this.currgal){
			this.currgal = this._dataSet[0].name;
		}
		*/
		this.galleryTitle.update(this.currgal);
		var currGalArr = this._dataSet.detect(function(e){
			return e.name == this.currgal; 
		}.bind(this));
		this._currentPictures = [];
		this._picCache = [];
		
		$H(currGalArr.pictures).each(function(e, i){
			this._currentPictures[i] = e.value;
			this._picCache[i] = new Image();
			this._picCache[i].src = ' ../pictures/'+this.currgal+'/'+ e.value.sm;
		}.bind(this));

		this._currGallerySize = this._currentPictures.length;
		this._currNumPages = parseInt(this._currentPictures.length/this._currPageSize + 1);
		
		this._updateActivePic();
		this._updateThumbs();
		
		//this.galleryContainer.hide();
		//this.displayContainer.show();
		
	},
	
	_updateActivePic : function(){
		
		if(!this.currpic){
			
			this.currpic = this._currentPictures[0].sm;
			this.picIndex = 0;
			
		}
		
		var picurl =' ../pictures/'+this.currgal+'/'+this.currpic;
		
		var img = new Image(); 

		img.src = picurl;
		
		img.setAttribute('style', 'padding-left: 25px; padding-top: 25px');
		
		
		this.activepicCont.innerHTML = '';
		img.onload = function(){
			this.activepicCont.update(img);
			var wid = img.width + 50;
			var hig = img.height + 50;
			$('active_pic').setStyle({'height' : hig+'px', 'width' : wid+'px'});
			var picNum = this.picIndex + 1;
			this.picCount.update('Displaying ' + picNum + ' of ' + this._currentPictures.length);
		}.bind(this);
		var picNum = this.picIndex + 1;
		this.picCount.update('Displaying ' + picNum + ' of ' + this._currentPictures.length);
	},
	
	_updateThumbs : function(options){
		this._currNumPages = parseInt(this._currentPictures.length/this._currPageSize + 1);
		if (!this.currpage) {
			this.currpage = 1;
			if(this._currNumPages > 1)
				this.n_thumb.show();
		}
		else {
			switch (this.currpage) {
				case 1:
					if (this.currNumPages > 1) {
						this.p_thumb.hide();
						this.n_thumb.show();
					}
					break;
				case this._currNumPages:
					this.p_thumb.show();
					this.n_thumb.hide();
					break;
				default:
					this.p_thumb.show();
					this.n_thumb.show();
					break;
			}
		}
		if(!options || !options.picchange){
			var i = (this.currpage-1)*this._currPageSize*1;
			this.currpic = this._currentPictures[i].sm;
			this.picIndex = (this.currpage-1)*this._currPageSize;
			this._updateActivePic();
		}
		 
		var extra = this._currentPictures.length - this._currPageSize*(this.currpage-1);
		var pagesize = (extra < this._currPageSize ) ? 
			this._currentPictures.length - this._currPageSize*(this.currpage-1) : 
			this._currPageSize;

		this._currThumbs = [];
		for(i = 0; i < pagesize; i++){
			this._currThumbs[i] = new Image();
			var idx = i+((this.currpage-1)*this._currPageSize)*1;
			this._currThumbs[i].src = ' ../pictures/'+this.currgal+'/'+this._currentPictures[idx].sm;
			this._currThumbs[i].picID = i+((this.currpage-1)*this._currPageSize);
			
			this._currThumbs[i].setAttribute('width', this._currThumbWidth);
			this._currThumbs[i].setAttribute('height', this._currThumbHeight);
			this._currThumbs[i].setAttribute('action', 'thmbClick');
			this._currThumbs[i].setAttribute('picid', this._currThumbs[i].picID);
			this._currThumbs[i].setAttribute('id', 'pic_'+this._currThumbs[i].picID);
		}
		
		var table = document.createElement('table');
		table.setAttribute('width', '500');
		table.setAttribute('height', '250');
		var tb = document.createElement("tbody");
		var rows = [];
		var size = 0;
		rows[size] = document.createElement ("tr");
		
		for(j = 0; j < this._currThumbs.length; j++){
			size = rows.size();
			if(j+1 == (this._currRowSize)*size && j > 3){
				rows[size] = document.createElement("tr");
			}	

			var td = document.createElement ("td");
			var span = document.createElement ("span");
			span.setAttribute('class', 'thmb');
			span.appendChild(this._currThumbs[j]);
			td.appendChild(span);
			
			rows[size-1].appendChild(td);
		}
		
		for(k = 0; k<size; k++)
			tb.appendChild(rows[k]);
		table.appendChild(tb);
		
		//this.thumbCont.innerHTML = '';
		this.thumbCont.update(table);
	},
	
	_nextPic : function(){
		if(this.picIndex == this._currentPictures.length-1)
			this.picIndex = 0;
		else
			++this.picIndex;
			
		this.currpic = this._currentPictures[this.picIndex].sm;
		
		this._updateActivePic();
		if(this.picIndex == 0){
			this.currpage = 1;
			this._updateThumbs({'picchange' : true});
		}
		
		if(this.picIndex == (this.currpage)*this._currPageSize + 1 && this.picIndex !== 1){
			++this.currpage;
			this._updateThumbs({'picchange' : true});
		}
		
	},
	
	_prevPic : function(){
		if(this.picIndex == 0)
			this.picIndex = this._currentPictures.length-1;
		else
			--this.picIndex;
			
		this.currpic = this._currentPictures[this.picIndex].sm;
		
		this._updateActivePic();
		
		if(this.picIndex == this._currentPictures.length-1){
			this.currpage = this._currNumPages;
			this._updateThumbs({'picchange' : true});
		}
		
		if(this.picIndex == (this.currpage-1)*this._currPageSize - 1){
			--this.currpage;
			this._updateThumbs({'picchange' : true});
		}
	},
	
	
	
	_addGallerySelectObservers : function(){
		if($('gallery_select'))
			$('gallery_select').observe('change',function(e){
				if(e.target.value == 'New Gallery'){
					this._makeNewGallery();	
					this._updateGallerySelect();
				}
				else{
					if(e.target.value != '')
						createUploaderGalleryAttribute();
				}
			}.bind(this));
	},
	
	_makeNewGallery : function(){
		$('make_new_gallery').show();
	},
	
	_createGalleryObserver : function(){
		
		$('create_gallery_button').observe('click', function(){
			var date  = $F('year')+'-'+$F('month')+'-'+$F('day');
			var title  = $F('gallery_title').gsub(' ','_');
			this._dataSet.push({ 'title' : title, 'date': date});
			this._updateGallerySelect(date+'_'+title);
		}.bind(this));
	},
	
	_updateActiveGallery : function(){
		//debugger;
	},
	
	_updateGallerySelect : function(selected){
		
		var select = $('gallery_select');
		
		if(select){
			select.options.length = 0;
			var empty=document.createElement('option');
			try
		    {
		    	select.add(empty,null); // standards compliant
		    }
		  catch(ex)
		    {
		    	select.add(empty); // IE only
		    }
			
			
			this._dataSet.each(function(e){
				var o=document.createElement('option');
				var text = e.date+'_'+e.title;
				o.text = text;
				o.value = text;
				if(selected== text) o.selected = "selected";
				try
			    {
			    	select.add(o,null); // standards compliant
			    }
			  catch(ex)
			    {
			    	select.add(o); // IE only
			    }
			}.bind(this));
			
			empty=document.createElement('option');
			empty.text = 'New Gallery...';
			empty.value = 'New Gallery';
			try
		    {
		    	select.add(empty,null); // standards compliant
		    }
		  catch(ex)
		    {
		    	select.add(empty); // IE only
		    }
		}
	}
});