/**
* A simple JavaScript image loaderimage loader
* @author Cuong Tham
* @url
* @usage
* var loader = new ImageLoader('IMAGE_URL');
* //set event handler
* loader.loadEvent = function(url, image){
*   //action to perform when the image is loaded
*   document.body.appendChild(image);
* }
* loader.load();
*/

//source: http://snipplr.com/view.php?codeview&id=561
// Cross-browser implementation of element.addEventListener()

function addListener(element, type, expression, bubbling)
{
  bubbling = bubbling || false;
  if(window.addEventListener)	{ // Standard
    element.addEventListener(type, expression, bubbling);
    return true;
  } else if(window.attachEvent) { // IE
    element.attachEvent('on' + type, expression);
    return true;
  } else return false;
}

var ImageLoader = function(url){
  this.url = url;
  this.image = null;
  this.loadEvent = null;
};

ImageLoader.prototype = {
  load:function(){
    this.image = document.createElement('img');
    var url = this.url;
    var image = this.image;
    var loadEvent = this.loadEvent;
    addListener(this.image, 'load', function(e){
      if(loadEvent != null){
        loadEvent(url, image);
      }
    }, false);
    this.image.src = this.url;
  },
  getImage:function(){
    return this.image;
  }
};

var PlayImg = 
{
	imgsbar:null,
	pagebar:null,
	loadIndex:-1,
	isauto:false,
	showIndex:0,
	lastShowIndex:0,
	
	init:function()
	{
		this.imgsbar = $('#wes_playImg .imgbar');
		this.pagebar = $('#wes_playImg');
		var imgs = $('#wes_playImg .imgbar li');
		$('#wes_playImg').append("<ul class='page_bg' ></ul>");
		$('#wes_playImg').append("<ul class='page' onmouseover='PlayImg.isauto=false' onmouseout='PlayImg.isauto=true' ></ul>");
		imgs.each(function(idl){
				$(this).css('opacity','0');
				$(this).css('filter','alpha(opacity=10);');
				$(this).css('display','none');
			});
	
		if(!this.fistNullImgLink())
			return;
		var img = $(this.fistNullImgLink()).attr("img");
		var loader = new ImageLoader(img);
		loader.loadEvent = PlayImg.lodImg;
		loader.load();
		this.auto();
	},
	fistNullImgLink:function()
	{
		aLinks = $('#wes_playImg .imgbar li a');
		for(var i = 0;i < aLinks.length;i++)
		{
			
			if($(aLinks[i]).find('img').length == 0)
				return aLinks[i];
		}
		return null;
	},
	lodImg:function(src,_image)
	{
		
		PlayImg.loadIndex++;
		PlayImg.isauto = true;
	
		if(PlayImg.loadIndex >= 0)
		{
			aLinks = $('#wes_playImg .imgbar li a');
			$(aLinks[PlayImg.loadIndex]).append(_image);
			
			$('#wes_playImg .page_bg').append("<li  ></li>")
			$('#wes_playImg .page').append("<li onmousedown='PlayImg.openPage("+ PlayImg.loadIndex +")' >"+ (PlayImg.loadIndex+1)  +"</li>")
		}
		if(PlayImg.loadIndex == 0)
		{
			PlayImg.show(PlayImg.loadIndex,function(){
					$('#wes_playImg .loadpic').css('display','none');
				});
			var pas = $('#wes_playImg .page li');
			$(pas[PlayImg.loadIndex]).addClass('cur');
			PlayImg.showIndex = 0;
			PlayImg.lastShowIndex = PlayImg.showIndex;
		}
		
		if(!PlayImg.fistNullImgLink())
			return;
		var img = $(PlayImg.fistNullImgLink()).attr("img");
		var loader = new ImageLoader(img);
		loader.loadEvent = PlayImg.lodImg;
		loader.load();
	},
	show:function(index,calback)
	{
		var imgs = $('#wes_playImg .imgbar li');
		var li = imgs[index];
		$(li).css('opacity','0.1');
		$(li).css('filter','alpha(opacity=10);');
		$(li).css('display','block');
		$(li).css('z-index','100');
		var poa = 0;
		var runShow = function(){
				$(li).css('opacity',poa/100);
				$(li).css('filter','alpha(opacity='+poa+');');
				poa=  poa+ 10;
				if(poa <= 100)
				{
					setTimeout(function(){
						runShow();
					},50);
				}
				else
				{
					if(calback && typeof(calback) == 'function')
						calback();
						$(li).css('z-index','0');
						
				}
			};
		runShow();
	},
	hidden:function(index,calback)
	{
			var imgs = $('#wes_playImg .imgbar li');
			var li = imgs[index];
			$(li).css('opacity','1');
			$(li).css('filter','alpha(opacity=100);');
			var poa = 100;
			var runHidden = function(){
					$(li).css('opacity',poa/100);
					$(li).css('filter','alpha(opacity='+poa+');');
					poa-=10;
					if(poa >= 0)
					{
						setTimeout(function(){
							runHidden();
						},50);
					}
					else
					{
						$(li).css('display','none');
						if(calback && typeof(calback) == 'function')
							calback();
					}
				};
			runHidden();
	},
	auto:function()
	{	
		//var i = 0;
		var _this = this;
		setInterval(function(){
			
			if(_this.isauto)
			{
				_this.showIndex++;
				if(_this.showIndex > _this.loadIndex)
					_this.showIndex = 0;
				var pas = $('#wes_playImg .page li');
				$(pas[_this.showIndex]).addClass('cur');
				$(pas[_this.lastShowIndex]).removeClass('cur');
				var last = _this.lastShowIndex;
				_this.lastShowIndex = _this.showIndex;
				_this.show(_this.showIndex,function(){
					
						var imgs = $('#wes_playImg .imgbar li');
						var li = imgs[last];
						$(li).css('opacity','0');
						$(li).css('filter','alpha(opacity=0);');
						$(li).css('display','none');
						
					});
				
				//_this.hidden(j);
				
				
				
			}
		},5000);
	},
	openPage:function(i)
	{
			if(PlayImg.showIndex == i)
				return;
			PlayImg.showIndex = i;
			var pas = $('#wes_playImg .page li');
			$(pas[PlayImg.showIndex]).addClass('cur');
			$(pas[PlayImg.lastShowIndex]).removeClass('cur');
			var last = PlayImg.lastShowIndex;
			PlayImg.lastShowIndex = PlayImg.showIndex;
			PlayImg.show(PlayImg.showIndex,function(){
				
					var imgs = $('#wes_playImg .imgbar li');
					var li = imgs[last];
					$(li).css('opacity','0');
					$(li).css('filter','alpha(opacity=0);');
					$(li).css('display','none');
					
				});
			
	}
}