$("document").ready(function(){
 var imgs = new Array();
 var srcs = new Array();
 var srcs_hover = new Array();
 var srcs_hover_out = new Array();
 var prefix = "images/web/";
 var img_box = "<div id = 'img_box' ></div>";

 srcs = {'pic_1':'create-big.jpg',
         'pic_2':'send-big.jpg',
		 'pic_3':'track-big.jpg'};

 srcs_hover = {'pic_1':'create-small-1.jpg',
         'pic_2':'send-small-1.jpg',
		 'pic_3':'track-small-1.jpg'};

 srcs_hover_out = {'pic_1':'create-small.jpg',
         'pic_2':'send-small.jpg',
		 'pic_3':'track-small.jpg'};
		 
 for(var i=1;i<=3;i++){ imgs[i] = "<img onclick='closeset()' style='cursor:pointer;' align='middle' src='images/closelabel.gif' /><br><img width='450' src='"+prefix+srcs['pic_'+i]+"' />"; }
 for(var i=1;i<=3;i++){
	 srcs_hover[i]    = prefix + srcs_hover['pic_'+i];
	 srcs_hover_out[i] = prefix + srcs_hover_out['pic_'+i];
	 
	 }
 
 $('#easy_3_step_img').after(img_box);  
 $('#img_box').hide();
 $('#img_box').css({
                   'width':"450px",
				   'height':"410px",
				   'background':"#ffffff",
				   'z_index':"10000",
				   'left':"400px",
				   'top':"400px",
				   'position':"absolute",
				   'padding':"10px",
				   'border':"4px solid #dddddd"
				   });


 $("#screen_shot_1").bind('click',function(){ 
                           $('#img_box').html(imgs[1]); 
                           $('#img_box').show('400');
                            });
 $("#screen_shot_2").bind('click',function(){ 
                           $('#img_box').html(imgs[2]); 
                           $('#img_box').show('400');
                            });
 $("#screen_shot_3").bind('click',function(){ 
                           $('#img_box').html(imgs[3]); 
                           $('#img_box').show('400');
                            });
 
//hover effect 

$("#create_pic_1").hover(function(){ 
						    $(this).attr("src", srcs_hover[1]);						  
                            },
							function(){ 
							$(this).attr("src", srcs_hover_out[1]);
							}
							);
$("#send_pic_2").hover(function(){ 
						    $(this).attr("src", srcs_hover[2]);						  
                            },
							function(){ 
							$(this).attr("src", srcs_hover_out[2]);
							}
							);
$("#track_pic_3").hover(function(){ 
						    $(this).attr("src", srcs_hover[3]);						  
                            },
							function(){ 
							$(this).attr("src", srcs_hover_out[3]);
							}
							);
						
						});

function closeset(){
 $('#img_box').bind('click',function(){ 
                 $(this).hide('slow');}
				 );
}