var suningimages = function(){
	var box = $('#bigpics');
	var image = $('#pics');
	var btn = image.find('li');
	var len = btn.length ;
	var ul = image.find('ul');
	
	return{
		init:function(){
			var that = this ;
			var posx ;
			var posy ;
			var i = 0 ;
			ul.css('width',len*60);
			image.prev('div').click(function(e){
				if(i<=0){
					return false;
				}
				i--;
				that.scroll(i);
				e.preventdefault();
			})
			
			image.next('div').click(function(e){
				if(i>= parseint(len/4)){
					return false;
				}
				i++;	
				that.scroll(i);
				e.preventdefault();
			})
			
			btn.each(function(i){
				$(this).find('a').click(function(e){
					index = i ;							 
					that.addbk(i);
					that.loadimg(i);
					e.preventdefault();
				})
			})
		},
		loadimg:function(i){
			box.html('<div class="loading"></div>');
			var src = btn.eq(i).find('img').attr('src');
			var maxlen = src.length ;
			newsrc = src.slice(0,maxlen-4)+"_b.jpg";
			box.html('<img src = ' +newsrc+'  />' ).find('img').hide();
			box.find('img').fadein(250);
		},
		addbk:function(i){
			btn.eq(i).find('a').addclass('on').parent().siblings().find('a').removeclass('on');
		},
		scroll:function(i){
			ul.stop().animate({marginleft: -60*3*i },300);
		},
		next:function(index){
			var that = this ;
			if(((index)%7)==0){
				ul.stop().animate({marginleft: -60*(index) },300);
			}
			that.addbk(index);
			settimeout(function(){that.loadimg(index);},400);
		},
		prev:function(index){
			var that = this ;
			if((index+1)%3==0){
				ul.stop().animate({marginleft: -60*parseint(index/3)*3 },300);
			}
			that.addbk(index);
			settimeout(function(){that.loadimg(index);},400);
		}
	}
}
$(document).ready(function(){
	suningimages().init();	
})