/// <reference path="jquery-1.2.3-intellisense.js" />
jQuery.fn.imageViewer = function(){
  // Picture Class
  function Picture()
  {
    // XHR Pool
    var ac = arguments.length;
    var av = arguments;
    var av = ac>0 ? typeof(av[0])=="object" ? av[0] : {} : {};
    
    // properties
	this.title = av.title ? av.title : "";
	this.bigurl = av.bigurl ? av.bigurl : "";
	this.smallurl = av.smallurl ? av.smallurl : "";
	this.views = av.views ? av.views : "";
	this.comments = av.comments ? av.comments : "";
	this.width = av.width ? av.width : "";
	this.height = av.height ? av.height : "";
	this.time = av.time ? av.time : "";
  }
    
  var autoInterval = null;
  var periodicity = 3000;	//时间间隔
  var tipTimeCount = null;
  var tipTimeout = 3000;
  var currentPid = 0;
  var nowpage = 1;
  var totalpage = 1;
  var perpage = 4;
  var perwidth = 138; 
  if(jQuery.browser.version == "6.0"){
  	var perwidth = 134;
  }
  var lastImage = null;
  var picList = null;
  var pictures = new Array();
  
  // display a picture
  function  DisplayPicture(image){
  	if(lastImage){
  		lastImage.className = 'image_container';
	}
  	image.className = 'image_container_current';
	lastImage = image;
  	var pid = parseInt(image.id);
	currentPid = pid;
	TurnToPage(Math.ceil((pid+1)/perpage));
	//picList.animate({left: -pid * perwidth},500);
	
	var picObj = $('picture');
	var width = parseInt(pictures[pid].width);
	var height = parseInt(pictures[pid].height);
	if(width > 480)
	{
		height = parseInt(480 * height / width);
		width = 480;
	}
	picObj.src = pictures[pid].bigurl;
	picObj.width = width;
	picObj.height = height;
	picObj.onclick = NextPicture;
	picObj.style.cursor = "pointer";
	
	$('picturetitle').innerHTML = pictures[pid].title;
	//$('picturesize').innerHTML = [pictures[pid].width, '×', pictures[pid].height].join('');
	//$('picturetime').innerHTML = pictures[pid].time;
	//$('pictureviews').innerHTML = pictures[pid].views;
	//$('picturecomments').innerHTML = pictures[pid].comments;
  }
  
  // add a picture to list
  function AddPictures(){
    var template ='<div class="pic_small_box"><div class="image_container" id="{id}"><img src="{url}" alt="{title}" /></div><b>{title}</b>{width}×{height}</div>';
    
    for(var i=0; i<pictures.length; i++){
      var picHtml = template;
      picHtml = picHtml.replace(/\{id\}/ig, i);
      picHtml = picHtml.replace(/\{url\}/ig, pictures[i].smallurl);
      picHtml = picHtml.replace(/\{title\}/ig, pictures[i].title);
      picHtml = picHtml.replace(/\{width\}/ig, pictures[i].width);
      picHtml = picHtml.replace(/\{height\}/ig, pictures[i].height);
      jQuery($('pictureList')).append(picHtml);
    };
    
    jQuery('div.image_container').each(function(i, el){
		jQuery(el).bind('click', function(){DisplayPicture(this);});
    });
  }
  
  function TurnToPage(page){
  	if(page > totalpage)
	{
		page = totalpage;
	}
	else if(page < 1)
	{
		page = 1;
	}
	nowpage = page;
	picList.animate({left: (1 - page) * perwidth * perpage},1000);
  }
  
  function NextPicture(){
	currentPid++;
	if(currentPid >= pictures.length)
	{
		currentPid = 0;
	}
	DisplayPicture(picList.find('div div')[currentPid]);
  }
  
  function PrevPicture(){
	currentPid--;
	if(currentPid < 0)
	{
		currentPid = pictures.length - 1;
	}
	DisplayPicture(picList.find('div div')[currentPid]);
  }
    
  function AutoPlay(){
  	currentPid++;
	if(currentPid >= pictures.length)
	{
		currentPid = pictures.length - 1;
		clearInterval(autoInterval);
  		CheckAction(false);
	}
	DisplayPicture(picList.find('div div')[currentPid]);
  }
  
  function StartPlay(){
  	autoInterval = setInterval(AutoPlay, periodicity);
  	CheckAction(true);
  }
  
  function StopPlay(){
  	clearInterval(autoInterval);
  	CheckAction(false);
  }
  
  function CheckAction(bool){
	jQuery("input[name='autoPlay']").each(function(){
		this.checked = bool;
	});
  }
  
  function CheckBox(obj){
  	if(obj.checked){
		StartPlay();
  	    Tip.showBeside(obj,Tip.tip('图片幻灯片播放已启动...'));
  	    try{
  	        clearTimeout(tipTimeCount);
  	    }
  	    catch(e){}
  	    tipTimeCount = setTimeout(HideTip, tipTimeout);
	}
	else
	{
		StopPlay();
  	    Tip.showBeside(obj,Tip.tip('图片幻灯片播放已停止...'));
  	    try{
  	        clearTimeout(tipTimeCount);
  	    }
  	    catch(e){}
  	    tipTimeCount = setTimeout(HideTip, tipTimeout);
	}
  }
  
  function HideTip(){
    Tip.hide();
  }
	
  function init(){
	picList = jQuery($('pictureList'));
  	picList.empty();
	jQuery($('picSource')).find('li').each(function(i){
		var pic = new Picture();
		jp = jQuery(this);
		pic.title = jp.attr('title') ? jp.attr('title') : "无标题";
		pic.bigurl = jp.attr('big') ? jp.attr('big') : "";
		pic.smallurl = jp.attr('small') ? jp.attr('small') : "";
		pic.views = jp.attr('views') ? jp.attr('views') : 0;
		pic.comments = jp.attr('comments') ? jp.attr('comments') : 0;
		pic.width = jp.attr('width') ? jp.attr('width') : 480;
		pic.height = jp.attr('height') ? jp.attr('height') : 640;
		pic.time = jp.attr('time') ? jp.attr('time') : "";
		pictures.push(pic);
	});
	
	AddPictures();
	
	totalpage = Math.ceil(pictures.length / perpage); 
  
	jQuery($('nextpic')).click(function(){
		if(nowpage < totalpage){
			TurnToPage(++nowpage);
		}
	});
	
	jQuery($('prevpic')).click(function(){
		if(nowpage > 1){
			TurnToPage(--nowpage);
		}
	});
	  
  	jQuery("div[class='pics_nav']").find("b[class='button_80']").each(function(i){
		if(i % 2){
			this.onclick = function(){ 
				StopPlay(); 
				//TurnToPage(--nowpage);
				PrevPicture();
			};
		}
		else{
			this.onclick = function(){ 
				StopPlay(); 
				//TurnToPage(++nowpage); 
				NextPicture();
			};
		}
	});
  	jQuery("input[name='autoPlay']").each(function(){
		this.onclick= function(){CheckBox(this)};
	});
  	lastImage = picList.find('div div')[0];
	DisplayPicture(lastImage);
  }
  
  init();
 
} 

jQuery(document).imageViewer();