var Pic ={
	Init: function() {
       Pic.PicSlide.Init();
    },
	PicSlide: {
		__ANI_IN_INTERVAL: 1,
		__BUTTON_INTERVAL: 1000,
		Init: function(){
			var picContainer = $('div.picContainer');
			picContainer.each(function(picIndex,picEle){
				//console.log(picIndex)
			    var $picEle = $(picEle);
			
			    $picEle.__PIC_HOLDER = $picEle.find('div.picWrap div.picHolder'); 
				$picEle.__INDEX = 0;
				
			   
				var selectorBoxString = '<li><div class="box"></div></li>';
				var selectorBoxStringArray = [];
				for(var i = 0; i < $picEle.__PIC_HOLDER.length; i++){


					selectorBoxStringArray.push(selectorBoxString)
				}
			  
			
				var selectorsUl = $picEle.find('ul.selectors').get(0);

				var disjoin = selectorBoxStringArray.join("");
				selectorsUl.innerHTML = disjoin;
				
				$picEle.__PIC_HOLDER.addClass('hidden');
				$picEle.__PIC_HOLDER.eq(0).removeClass('hidden');
				
				$picEle.__PIC_HOLDER.css({
					'margin-left' : '700px',
					'opacity' : '0.4'
				});
				$picEle.__PIC_HOLDER.eq(0).animate({
					opacity: 1,
		            marginLeft: "0px"
				}, 500);
				
				$picEle.__SELECTOR_BOX = $picEle.find('ul.selectors li div.box'); 
				$picEle.__SELECTOR_BOX.eq(0).addClass('active');
				
				
				$picEle.__SELECTOR_BOX.each( function(linkIndex, linkEle ) {
					$(linkEle).click(function(){
						if(!$(this).hasClass('active')){
						Pic.PicSlide.ChangePic( linkIndex,'next',$picEle );
				    	}
					}); 
				});  
				$picEle.__PREV = $picEle.find('.prev');
				$picEle.__NEXT = $picEle.find('.next');
				
				$picEle.__PREV.click(function(){
					Pic.PicSlide.Prev($picEle);
				});
			   	$picEle.__NEXT.click(function(){
					 Pic.PicSlide.Next($picEle);
				} ); 
				
            }); 
		},
		Next: function(ele) {
            
            if( ele.__INDEX == ele.__PIC_HOLDER.length - 1) { 
                Pic.PicSlide.ChangePic(0,'next', ele);
                      
            } else {
                Pic.PicSlide.ChangePic(ele.__INDEX + 1,'next',ele);  
            }
        },
        Prev: function(ele){

            if( ele.__INDEX == 0 ) { 
				Pic.PicSlide.ChangePic(ele.__PIC_HOLDER.length - 1,'prev',ele); 
            } else {
                Pic.PicSlide.ChangePic(ele.__INDEX - 1,'prev',ele); 
            }
        },
		ChangePic: function( picIndex, direction, ele ){
			
			ele.__SELECTOR_BOX.removeClass('active');
			ele.__SELECTOR_BOX.eq(picIndex).addClass('active');
			
            if(direction == 'prev'){
			Pic.PicSlide.AnimateOutPrev(ele); 
			}
			if(direction == 'next'){
			Pic.PicSlide.AnimateOutNext(ele); 	
			}  
			ele.__INDEX = picIndex;

		},
		AnimateInPrev: function(ele){
		  	//reset 
			//console.log('reset')
			ele.__PIC_HOLDER.eq(ele.__INDEX).css({
				'margin-left' : '-700px',
				'opacity' : '0.4'
			});
			//
			ele.__PIC_HOLDER.eq(ele.__INDEX).removeClass('hidden');  
			ele.__PIC_HOLDER.eq(ele.__INDEX).animate({
				opacity: 1,
	            marginLeft: "0px"
			}, 500);  
		},
		AnimateInNext: function(ele){
		  	//reset 
			//console.log('reset')
			ele.__PIC_HOLDER.eq(ele.__INDEX).css({
				'margin-left' : '700px',
				'opacity' : '0.4'
			});
			//
			ele.__PIC_HOLDER.eq(ele.__INDEX).removeClass('hidden');  
			ele.__PIC_HOLDER.eq(ele.__INDEX).animate({
				opacity: 1,
	            marginLeft: "0px"
			}, 500);  
		},
		AnimateOutPrev: function(ele){
			ele.__PIC_HOLDER.eq(ele.__INDEX).animate({
				opacity: 0.4,
	            marginLeft: "712px"
			}, 550);
		   
			ele.__ANI_INPREV_TIMEOUT = setTimeout(function(){
			Pic.PicSlide.AnimateInPrev(ele)
			}, Pic.PicSlide.__ANI_IN_INTERVAL);   
		},
		AnimateOutNext: function(ele){
			ele.__PIC_HOLDER.eq(ele.__INDEX).animate({
				opacity: 0.4,
	            marginLeft: "-712px"
			}, 550);
			ele.__ANI_INNEXT_TIMEOUT = setTimeout(function(){
				Pic.PicSlide.AnimateInNext(ele)
				}, Pic.PicSlide.__ANI_IN_INTERVAL); 
		} 
	}
};

//v$( Pic.Init );