$(function() {
var ready 		= true;
var navigate 	= false;
var MultimediaGallery = {
	/**
	* loaded 	: how many files were loaded already;
	* total		: total number of existing files
	* set		: number of items to load for each ajax call,
	* except the first one - it will load as much it fits in the window
	*/
	data				: {
		'loaded' 				: 0,	
		'total'					: 0,
		'set'					: 100
	},
	/**
	* method called innitially: register events 
	* and starts the gallery
	*/
	init					: function () {
		MultimediaGallery.initEventHandlers();
		MultimediaGallery.start();
	},
	/**
	* init the events
	*/
	initEventHandlers		: function () {
		$('#mmg_media_wrapper ul').delegate('a','mouseenter',function () {
			var $this   = $(this);
			$this.find('img').stop().animate({'opacity':'1.0'},200);
		}).delegate('a','mouseleave',function () {
			var $this   = $(this);
			$this.find('img').stop().animate({'opacity':'1.0'},200);
		}).delegate('a','click',function(e){
			MultimediaGallery.data.currentItem = $(this).parent().index()+1;
			MultimediaGallery.showItem();
			e.preventDefault();
		});
		$(window).bind('resize', function() {
			MultimediaGallery.centerWrapper();
			
			if(!$('#mmg_preview .preview_wrap').is(':empty')){
				if($('#mmg_large_photo').length > 0)
				 MultimediaGallery.resize($('#mmg_large_photo'));
			}
		});
		$('#mmg_nav .next').bind('click',function(e){
			MultimediaGallery.data.currentItem = MultimediaGallery.data.currentItem+1;
			MultimediaGallery.showItem();
			e.preventDefault();
		});
		$('#mmg_nav .prev').bind('click',function(e){
			MultimediaGallery.data.currentItem = MultimediaGallery.data.currentItem-1;
			MultimediaGallery.showItem();
			e.preventDefault();
		});
		$('#mmg_item_close').live('click',function(e){
			MultimediaGallery.hideItem();
			e.preventDefault();
		});
		$('#mmg_more').bind('click',function(e){
			MultimediaGallery.more();
			e.preventDefault();
		});
	},
	/**
	* checks how many files we have
	* draws the structure
	* displays the first set
	*/
	start					: function () {
		
//		$.get('jsondata/total.js', function(data) {
			MultimediaGallery.data.total = jsondata.total;
		
			/**
			* draws the containers where our thumbs will be displayed,
			*/
			if(ready){
				var nmb_containers 		= MultimediaGallery.countSpaces();
				MultimediaGallery.draw(nmb_containers);
			}	
//		},'text');
	},
	draw					: function (nmb_containers) {
		/**
		* load innitially the number of items that fit
		* on the window + a certain margin.
		* When resizing the window we follow the
		* same approach. All the other items will load
		* when the User clicks the more button
		*/
		var $list = $('#mmg_media_wrapper ul');
		for(var i=0; i < nmb_containers; ++i){
			$list.append($('<li />'));
		}
		MultimediaGallery.centerWrapper();
		MultimediaGallery.display();
	},
	/**
	* checks how many more thumbs we can display 
	* given the window dimentions
	*/
	countSpaces				: function () {
		var containerSizeW 				= $(window).width()-100;
		var photosPerRow 				= Math.floor(containerSizeW/188);
		var containerSizeH 				= $(window).height()-50;
		var photosPerColumn 			= Math.floor(containerSizeH/148) + 1;
		var nmb_containers 				= Math.min(MultimediaGallery.data.total,photosPerRow * (photosPerColumn+32));
		var nmb_containers_in_viewport 	= $('#mmg_media_wrapper li:in-viewport').length;
		return nmb_containers-nmb_containers_in_viewport;
	},
	/**
	* centers the thumbs grid
	*/
	centerWrapper			: function () {
		var photosLength = $('#mmg_media_wrapper li').size();
		if(photosLength > 0) {
			var containerSize 	= $(window).width()-100;
			var photosPerRow 	= Math.floor(containerSize/188);

			//0 of paddings (if you want more...)
			var left = Math.floor((containerSize-(photosPerRow*188))/2);
			$('#mmg_media_wrapper li').each(function(i){
				var $this = $(this);
				if(i%photosPerRow == 0) {
					$this.css('margin-left','0px');
				}
				else {
					$this.css('margin-left','0px');
				}
			});
		}
	},
	/**
	* displays the first set of files
	* we need to check how many we can display for our window size!
	*/
	display					: function () {
		ready = false;

		if(MultimediaGallery.data.loaded == MultimediaGallery.data.total)
			return;
			
		var $list 			= $('#mmg_media_wrapper ul');
		
		var nmb_toLoad 		= $list.find('li:empty').length;
		if(nmb_toLoad == 0){
			ready = true;
			return;
		}	
		
//		$.get('jsondata/data.js', {op:'display',req:nmb_toLoad,cursor:MultimediaGallery.data.loaded} , function(data) {
			
			var res = jsondata.data;
			var res_length 	= res.length;
			if(res_length == 0) ready = true;
			MultimediaGallery.incrementLoadedFiles(res.length);
			MultimediaGallery.showOptionMore();
			var total_loaded= 0;
			for(var i=0; i<res_length; ++i){
				var elem 			= res[i];
				var elem_thumb 		= elem.thumb;
				var elem_sources 	= elem.sources;
				var elem_type 		= elem.type;
				var elem_description= elem.description;
				var elem_info= elem.info;
				$('<img type="'+elem_type+'"  info="'+elem_info+'" />').load(function(){
					var $this = $(this);
					total_loaded 	+= 1;
					MultimediaGallery.resizeGridImage($this);
					var $elem		= $('<a class="'+ $this.attr('type') +'" href="#" />').append($this);
					var li=$list.find('li:empty:first')
					li.append($elem)
					if($this.attr('info')!= "undefined" &&$this.attr('info')!=''){
						
						var info=$this.attr('info').split('|');
					
					  li.append('<div style="position: absolute; cursor:hand;left: 10px;bottom:0px;   font-size: 12px; background-color: #121212;-moz-user-select: none;" onclick="window.location.href =\'app_imgaddfav:'+info[4]+','+info[5]+'\'">&nbsp;<font color=636363>加入到我的收藏</font></div>') 	
						li.append('<div style="position: absolute; right: 2px;color:#6b6b6b;bottom:1px;  font-size: 10px; background-color: #121212;-moz-user-select: none;cursor:hand;">'+info[3]+'</div>')
						//li.append('<div style="position: absolute; color:#656565; left:130px;top:2px;  font-size: 14px; background-color: #121212;-moz-user-select: none;><font color=590303>Lv '+info[1]+'</font> &nbsp;</div>')
								itype = null;
             		    info = null;
					}if(total_loaded == res_length){
						ready = true;
						/**
						* if the user was navigating through the items
						* show the next one...
						*/
						if(navigate){
							navigate = false;
							MultimediaGallery.showItem();
						}		
					}
				}).attr('src',elem_thumb)
				  .attr('alt',elem_description)
				  .data('sources',elem_sources)
				  .data('type',elem_type)
				  .data('info',typeof(elem_info)!= "undefined" ?elem_info:'')
				  .data('description',elem_description);
				
			}
			
//		},'text');

	},
	/**
	* shows the button "more" if there are more items
	*/
	showOptionMore			: function () {
		if(MultimediaGallery.data.total<40)
			//$('#mmg_media_wrapper .more').hide();
			$('#mmg_media_wrapper .more').show();
			//$('#mmg_media_wrapper .last').hide();
		else
			$('#mmg_media_wrapper .more').show();
	},
	/**
	* increments the amount of loaded files
	*/
	incrementLoadedFiles	: function (newfiles) {
		MultimediaGallery.data.loaded += newfiles;	
	},
	/**
	* user clicks on more button
	*/
	more					: function (){
//		if(ready){
//			var nmb_containers 		= Math.min(MultimediaGallery.data.total-MultimediaGallery.data.loaded,MultimediaGallery.data.set)	
//			MultimediaGallery.draw(nmb_containers);
//		}					
	},
	/**
	* displays the item when user clicks on thumb (photo,video or audio)
	*/
	showItem				: function () {
		if(MultimediaGallery.data.currentItem < 1) return;
		
		$('#mmg_overlay,#mmg_preview').show();
		var $preview_wrap 	= $('#mmg_preview .preview_wrap');
		
		var $list 			= $('#mmg_media_wrapper ul');
		var $item 			= $list.find('li:nth-child('+ MultimediaGallery.data.currentItem +')').find('img');
		if(!$item.length){
			/**
			* reached the end, let's load more
			*/
			if(MultimediaGallery.data.currentItem == parseInt(MultimediaGallery.data.total)+1) {
				MultimediaGallery.data.currentItem = MultimediaGallery.data.currentItem-1;
				return
			};
			
			MultimediaGallery.more();
			navigate = true;
			return;
		}	
		$('#mmg_preview_loading').show();	
		/**
		* photo, video or audio
		*/
		var item_type 		= $item.data('type');
		var item_sources 	= $item.data('sources');
		var item_description= $item.data('description');
		var item_info= $item.data('info');
		if (item_type.indexOf('gallery') > -1) {
			$('#mmg_overlay,#mmg_preview').hide()
        // gallery
        window.location.href = 'app_into:'+item_type.split('|')[1]
      }
     
     function addIMG() {
        
      }
		switch(item_type){
			case 'photo':
				var $photo = $('<img id="mmg_large_photo"/>').load(function(){
					var $theImage = $(this);
					$preview_wrap.fadeOut(100,function(){
						$('#mmg_preview_loading').hide();
						$(this).empty().append('<a href="#" id="mmg_item_close" class="close"></a>').append($theImage).append(addIMG()).fadeIn();
						MultimediaGallery.changeDescription(item_description);
						MultimediaGallery.resize($theImage);
					})
				}).attr('src',item_sources[0].source);
 

				break;
		}
	},
	/**
	* adds a description when there is one
	*/
	changeDescription		: function (item_description) {
		if(item_description=='')
			$('#mmg_description').hide();
		else	
			$('#mmg_description').empty().html('<p>' + item_description + '</p>').show();
	},
	/**
	* user clicks on the cross to close the item
	*/
	hideItem				: function () {
		var $preview_wrap 	= $('#mmg_preview .preview_wrap');
		$('#mmg_overlay,#mmg_preview,#mmg_description').hide();
		$preview_wrap.empty();
	},
	/**
	* resize the image (large image), based on windows width and height
	*/
	resize 					: function ($image){
		var widthMargin		= 80
		var heightMargin 	= 100;
		
		var windowH      = $(window).height()-heightMargin;
		var windowW      = $(window).width()-widthMargin;
		var theImage     = new Image();
		theImage.src     = $image.attr("src");
		var imgwidth     = theImage.width;
		var imgheight    = theImage.height;

		if((imgwidth > windowW)||(imgheight > windowH)){
			if(imgwidth > imgheight){
				var newwidth = windowW;
				var ratio = imgwidth / windowW;
				var newheight = imgheight / ratio;
				theImage.height = newheight;
				theImage.width= newwidth;
				if(newheight>windowH){
					var newnewheight = windowH;
					var newratio = newheight/windowH;
					var newnewwidth =newwidth/newratio;
					theImage.width = newnewwidth;
					theImage.height= newnewheight;
				}
			}
			else{
				var newheight = windowH;
				var ratio = imgheight / windowH;
				var newwidth = imgwidth / ratio;
				theImage.height = newheight;
				theImage.width= newwidth;
				if(newwidth>windowW){
					var newnewwidth = windowW;
					var newratio = newwidth/windowW;
					var newnewheight =newheight/newratio;
					theImage.height = newnewheight;
					theImage.width= newnewwidth;
				}
			}
		}
		$image.css({
			'width':theImage.width+'px',
			'height':theImage.height+'px'
		});
		MultimediaGallery.centerPreview(theImage.width,theImage.height);
	},
	/**
	* center the large image / video / audio on the page
	*/
	centerPreview			: function (width,height){
		var $preview_wrap 	= $('#mmg_preview .preview_wrap');
		$preview_wrap.css({
			'width':width+'px',
			'height':height+'px',
			'margin-top':-(height/2)-20+'px',
			'margin-left':-(width/2)-30+'px'
		});
	},
	/**
	* resize each thumb image in the grid view
	*/
	resizeGridImage 		: function ($image){
		var theImage 	= new Image();
		theImage.src 	= $image.attr("src");
		var imgwidth 	= theImage.width;
		var imgheight 	= theImage.height;
		
		var containerwidth  = 100;
		var containerheight = 100;
		
		if(imgwidth	> containerwidth){
			var newwidth = containerwidth;
			var ratio = imgwidth / containerwidth;
			var newheight = imgheight / ratio;
			if(newheight > containerheight){
				var newnewheight = containerheight;
				var newratio = newheight/containerheight;
				var newnewwidth =newwidth/newratio;
				theImage.width = newnewwidth;
				theImage.height= newnewheight;
			}
			else{
				theImage.width = newwidth;
				theImage.height= newheight;
			}
		}
		else if(imgheight > containerheight){
			var newheight = containerheight;
			var ratio = imgheight / containerheight;
			var newwidth = imgwidth / ratio;
			if(newwidth > containerwidth){
				var newnewwidth = containerwidth;
				var newratio = newwidth/containerwidth;
				var newnewheight =newheight/newratio;
				theImage.height = newnewheight;
				theImage.width= newnewwidth;
			}
			else{
				theImage.width = newwidth;
				theImage.height= newheight;
			}
		}
		$image.css({
			'width':theImage.width,
			'height':theImage.height
			});
	}
};

MultimediaGallery.init();
});