script.js
author Eugen Sawin <sawine@me73.com>
Tue, 20 Dec 2011 03:01:50 +0100
changeset 77 9c443a61358c
parent 76 681b1d7dc3a9
child 78 1e4ba37124e3
permissions -rw-r--r--
Smaller logo.
     1 var QUOTES_NUMBER = 39;
     2 var port = 8080;
     3 var SERVER = "http://" + window.location.hostname + ":" + port;
     4 
     5 $(document).ready(function() {     
     6     var image = new Image();
     7     image.onload = init_logo;
     8     image.src = "images/logobase.png";
     9     $("#logo").click(handle_click);   
    10     $("#logo").hover(function() {
    11         $(this).css("cursor", "pointer");        
    12     }, function() {
    13         $(this).css("cursor", "auto");
    14     });
    15 });
    16 
    17 $(document).keypress( function(event) {
    18     if (event.which == 13) {            
    19 	event.preventDefault();
    20         update_logo();	    
    21     }
    22 });
    23 
    24 var menu_width = 670;
    25 var menu_height = 100;
    26 var menu_splits = new Array(180, 350, 505);
    27 
    28 var click_events = new Array();
    29 click_events["logo"] = new Array();
    30 click_events["logo"][0] = new Object();
    31 click_events["logo"][0]["min_x"] = 0;
    32 click_events["logo"][0]["max_x"] = menu_splits[0];
    33 click_events["logo"][0]["min_y"] = 0;
    34 click_events["logo"][0]["max_y"] = menu_height;
    35 click_events["logo"][0]["func"] = switch_page;
    36 click_events["logo"][0]["args"] = new Array("personalwork.html");
    37 click_events["logo"][1] = new Object();
    38 click_events["logo"][1]["min_x"] = menu_splits[0] + 1;
    39 click_events["logo"][1]["max_x"] = menu_splits[1];
    40 click_events["logo"][1]["min_y"] = 0;
    41 click_events["logo"][1]["max_y"] = menu_height;
    42 click_events["logo"][1]["func"] = switch_page;
    43 click_events["logo"][1]["args"] = new Array("howiwork.html");
    44 click_events["logo"][2] = new Object();
    45 click_events["logo"][2]["min_x"] = menu_splits[1] + 1;
    46 click_events["logo"][2]["max_x"] = menu_splits[2];
    47 click_events["logo"][2]["min_y"] = 0;
    48 click_events["logo"][2]["max_y"] = menu_height;
    49 click_events["logo"][2]["func"] = switch_page;
    50 click_events["logo"][2]["args"] = new Array("books.html");
    51 click_events["logo"][3] = new Object();
    52 click_events["logo"][3]["min_x"] = menu_splits[2] + 1;
    53 click_events["logo"][3]["max_x"] = menu_width - 1;
    54 click_events["logo"][3]["min_y"] = 0;
    55 click_events["logo"][3]["max_y"] = menu_height;
    56 click_events["logo"][3]["func"] = switch_page;
    57 click_events["logo"][3]["args"] = new Array("links.html", "linksend.html");
    58 
    59 function mouse_pos(event) { 
    60     var offset = $("#logo").offset();   
    61     return new Array(event.pageX - offset.left, 
    62                      event.pageY - offset.top);
    63 }
    64 
    65 function handle_click(event) {
    66     var xy = mouse_pos(event);
    67     var x = xy[0];
    68     var y = xy[1];
    69     for (var i in click_events[event.target.id]) {
    70         var ces = click_events[event.target.id][i];
    71         if (ces && x >= ces["min_x"] && x <= ces["max_x"]
    72             && y >= ces["min_y"] && y <= ces["max_y"]) {    
    73             ces["func"](event.target.id, ces);
    74             break;
    75         }
    76     }
    77 }
    78 
    79 function switch_page(id, params) {
    80     var page = params["args"][0];
    81     $("body").load(page);
    82     document.location.href = page;    
    83 }
    84 
    85 function colour_area(image, min_x, max_x, min_y, max_y, colour) {   
    86     var pixels = image.data;    
    87     for (var y = min_y; y <= max_y; y += 1) {
    88         for (var x = min_x; x <= max_x; x += 1) {
    89             var pix_colour = getPixel(image, x, y);
    90             if (pix_colour.a > 0) {
    91                 colour.a = pix_colour.a;
    92                 setPixel(image, x, y, colour);
    93             }
    94         }
    95     }    
    96 }
    97 
    98 function init_logo(event) {
    99     var canvas = document.getElementById("logo");
   100     var context = canvas.getContext("2d");    
   101     canvas.width = menu_width;
   102     canvas.height = menu_height;
   103     context.drawImage(event.target, 0, 0);
   104     var image = context.getImageData(0, 0, menu_width, menu_height);
   105     var white = new Colour(255, 255, 255);
   106     var black = new Colour(0, 0, 0);
   107     var orange = new Colour(201, 87, 35);
   108     var green = new Colour(90, 215, 21);
   109     var found = false;
   110     for (var i in click_events["logo"]) {
   111         var p = click_events["logo"][i]; 
   112         var min_x = p["min_x"];
   113         var max_x = p["max_x"];
   114         var min_y = p["min_y"];
   115         var max_y = p["max_y"];
   116         var pos = document.location.href.lastIndexOf("/") + 1; 
   117         var page = document.location.href.substr(pos);        
   118         for (var j in p["args"]) {
   119             if (page == p["args"][j]) {         
   120                 colour_area(image, min_x, max_x, 0, 60, orange);
   121                 colour_area(image, min_x, max_x, 60, max_y, white);                        
   122                 found = p;
   123                 break;
   124             }
   125         }
   126         if (!found) {
   127             colour_area(image, min_x, max_x, 0, 60, white);
   128             colour_area(image, min_x, max_x, 60, max_y,  orange);          
   129         }
   130     } 
   131     context.putImageData(image, 0, 0);        
   132     // context.fillStyle = green.str();
   133     // console.log((found["max_x"] - found["min_x"]) / 2 + found["min_x"] - 2);
   134     // context.fillRect((found["max_x"]-found["min_x"])/2+found["min_x"]-1, 95, 2, 5);  
   135     drawMenuLines();   
   136 }
   137 
   138 function drawMenuLines() {
   139     var canvas = document.getElementById("logo");
   140     var context = canvas.getContext("2d");  
   141     var image = context.getImageData(0, 0, menu_width, menu_height);
   142     var pixels = image.data;
   143     context.lineCap = "round";
   144     context.lineWidth = 1;
   145     var colour1a = new Colour(0, 0, 0, 0.1);
   146     context.beginPath();   
   147     context.moveTo(0, menu_height - 1);
   148     context.lineTo(menu_width - 1, menu_height - 1);   
   149     context.closePath();  
   150     context.strokeStyle = colour1a.str();
   151     context.stroke(); 
   152     var colour1e = new Colour(0, 0, 0, 0.05);  
   153     context.beginPath();   
   154     context.moveTo(70, menu_height - 1);
   155     context.lineTo(menu_width - 71, menu_height - 1);   
   156     context.closePath();  
   157     context.strokeStyle = colour1e.str();
   158     context.stroke();  
   159     var colour1b = new Colour(0, 0, 0, 0.05);  
   160     context.beginPath();   
   161     context.moveTo(50, menu_height - 1);
   162     context.lineTo(menu_width - 51, menu_height - 1);   
   163     context.closePath();  
   164     context.strokeStyle = colour1b.str();
   165     context.stroke();
   166     var colour1c = new Colour(0, 0, 0, 0.05);  
   167     context.beginPath();   
   168     context.moveTo(25, menu_height - 1);
   169     context.lineTo(menu_width - 26, menu_height - 1);   
   170     context.closePath();  
   171     context.strokeStyle = colour1c.str();
   172     context.stroke();
   173     var colour1d = new Colour(0, 0, 0, 0.05);  
   174     context.beginPath();   
   175     context.moveTo(10, menu_height - 1);
   176     context.lineTo(menu_width - 11, menu_height - 1);   
   177     context.closePath();  
   178     context.strokeStyle = colour1d.str();
   179     context.stroke();  
   180     
   181     var colour2 = new Colour(0, 0, 0, 0.2);
   182     context.beginPath();  
   183     context.moveTo(menu_splits[0], 0); 
   184     context.lineTo(menu_splits[0], menu_height - 1);
   185     context.moveTo(menu_splits[1], 0);
   186     context.lineTo(menu_splits[1], menu_height - 1);
   187     context.moveTo(menu_splits[2], 0);
   188     context.lineTo(menu_splits[2], menu_height - 1);
   189     context.closePath();
   190     context.strokeStyle = colour2.str();
   191     context.stroke();
   192 
   193     context.clearRect(menu_splits[0] - 1, menu_height - 1, 2, 2);
   194     context.clearRect(menu_splits[1] - 1, menu_height - 1, 2, 2);
   195     context.clearRect(menu_splits[2] - 1, menu_height - 1, 2, 2);
   196 
   197     context.clearRect(menu_splits[0] - 1, menu_height - 2, 1, 1);
   198     context.clearRect(menu_splits[1] - 1, menu_height - 2, 1, 1);
   199     context.clearRect(menu_splits[2] - 1, menu_height - 2, 1, 1);
   200 }
   201 
   202 function clearMenuLines() {
   203     var canvas = document.getElementById("logo");
   204     var context = canvas.getContext("2d");  
   205     var image = context.getImageData(0, 0, menu_width, menu_height);
   206     var pixels = image.data;
   207     context.clearRect(0, menu_height - 2, menu_width - 1, 2);
   208     context.clearRect(menu_splits[0] - 1, 0, 2, menu_height - 1);
   209     context.clearRect(menu_splits[1] - 1, 0, 2, menu_height - 1);
   210     context.clearRect(menu_splits[2] - 1, 0, 2, menu_height - 1);
   211 }
   212 
   213 function update_logo() {
   214     var canvas = document.getElementById("logo");
   215     var context = canvas.getContext("2d");  
   216     var image = context.getImageData(0, 0, menu_width, menu_height);
   217     var pixels = image.data;
   218     var white = new Colour(255, 255, 255);
   219     for (var y = 0; y < menu_height; y += 1) {
   220         for (var x = 0; x < menu_width; x += 1) {
   221             var pix_colour = getPixel(image, x, y);
   222             if (pix_colour.a > 0) {
   223                 setPixel(image, x, y, new Colour(90, 215, 21, pix_colour.a));
   224             }
   225         }
   226     }   
   227     context.putImageData(image, 0, 0);
   228 }
   229 
   230 function Colour(r, g, b, a) {
   231     this.r = r;
   232     this.g = g;
   233     this.b = b;
   234     this.a = a == undefined ? 255 : a;
   235 }
   236 Colour.prototype.equals = function(rhs) {
   237     for (p in this) {
   238         if (typeof(rhs[p]) == undefined
   239            || this[p] != rhs[p]) {           
   240             return false;
   241         }
   242     }
   243     return true;
   244 }
   245 Colour.prototype.str = function() {
   246     return "rgba(" + this.r + "," + this.g + "," + this.b + "," + this.a + ")";
   247 }
   248 
   249 function setPixel(image, x, y, colour) {
   250     var index = 4 * (x + y * image.width);
   251     image.data[index] = colour.r;
   252     image.data[index + 1] = colour.g;
   253     image.data[index + 2] = colour.b;
   254     image.data[index + 3] = colour.a;
   255 }
   256 
   257 function getPixel(image, x, y) {   
   258     var index = 4 * (x + y * image.width);
   259     var r = image.data[index];
   260     var g = image.data[index + 1];
   261     var b = image.data[index + 2];
   262     var a = image.data[index + 3];
   263     return new Colour(r, g, b, a);
   264 }
   265 
   266 function load_random_quote() {
   267     var file = "/quotes/quote" + Math.floor(Math.random() * QUOTES_NUMBER + 1) + ".html";
   268     $.ajax({url: SERVER + file,
   269             success: write_quote});
   270 }
   271 
   272 function write_quote(data, status, xhr) {   
   273     $("#random_quote").html(data);
   274 }
   275 
   276 function load_footer()
   277 {
   278 	var file = "/footer.html";
   279 	var currentFile = self.location.hostname + self.location.pathname;		
   280 	var request = http_request_object();
   281 	var url  = "http://" + self.location.hostname + file;	
   282 	request.open("GET", url, false);
   283 	request.setRequestHeader("User-Agent", navigator.userAgent);
   284 	request.send(null)
   285 	// if (oRequest.status == 200) alert(oRequest.responseText);
   286 	// else alert("Error executing XMLHttpRequest call!");	
   287 	//document.write(url);
   288 	//document.write(request.responseText);
   289     document.getElementById('footer').innerHTML = request.responseText;
   290 }
   291 
   292 
   293 
   294 // Mandelbrot functions
   295 function Complex(real, imag) 
   296 {
   297 	this.real = real;
   298 	this.imag = imag;
   299 }
   300 
   301 var MIN_C = new Complex(-2.2, -1.4);
   302 var MAX_C = new Complex(1.0, 1.4);
   303 var min_c = MIN_C;
   304 var max_c = MAX_C;
   305 var MIN_ITER = 100;
   306 var max_iter = MIN_ITER;
   307 var zoom = 1.0;
   308 var resolution = 3;
   309 var bailout = 4.0;
   310 
   311 function Result(z, iter) 
   312 {
   313 	this.z = z;
   314 	this.iter = iter;
   315 }
   316 
   317 function complex_quad(c)
   318 {
   319 	return new Complex(Math.pow(c.real, 2) - Math.pow(c.imag, 2), 
   320 		2.0 * c.real * c.imag);
   321 }
   322 
   323 function complex_quad_value(c)
   324 {
   325 	return Math.pow(c.real, 2) + Math.pow(c.imag, 2);
   326 }
   327 
   328 function complex_add(c1, c2)
   329 {
   330 	return new Complex(c1.real + c2.real, c1.imag + c2.imag);
   331 }
   332 
   333 function complex_equal(c1, c2)
   334 {	
   335 	return (c1.real == c2.real) && (c1.imag == c2.imag);
   336 }
   337 
   338 function iterate(z, c) 
   339 {
   340 	z_quad = complex_quad(z);
   341 	return new Complex(z_quad.real + c.real, z_quad.imag + c.imag);
   342 }
   343 
   344 function test(c, max_iter) 
   345 {
   346 	var iter = 0;
   347 	var z = new Complex(0.0, 0.0);
   348 	var last_z = new Complex(-1.0, 0.0);
   349 	var quad_z = complex_quad_value(z);
   350 	
   351 	while (iter < max_iter
   352 		&& !complex_equal(z, last_z)
   353 		&& quad_z <= bailout)
   354 	{
   355 		last_z = z;
   356 		z = iterate(z, c);
   357 		quad_z = complex_quad_value(z);
   358 		iter++;
   359 	}
   360 	return new Result(quad_z, iter);
   361 }
   362 
   363 function draw(diter, dx, dy, dz, dres)
   364 {  
   365 	var canvas = document.getElementById('mandelbrot'); 
   366 	
   367 	if (canvas.getContext)
   368 	{  
   369 		zoom += dz;
   370 		var ctx = canvas.getContext('2d');
   371 
   372 		if (dres != 0)
   373 		{		
   374 			resolution = Math.max(1, resolution + dres);
   375 		}
   376 
   377 		if (diter != 0)
   378 		{
   379 			max_iter = Math.max(MIN_ITER, max_iter + diter);
   380 		}
   381 		
   382 		var red = "rgb(255, 0, 0)";
   383 		var white = "rgb(255, 255, 255)";
   384 		var width = canvas.width;
   385 		var height = canvas.height;
   386 		var dim = Math.max(width, height);
   387 		var dim_ratio = Math.round(width / height);	
   388 		var diff_c = new Complex(max_c.real - min_c.real,
   389 			max_c.imag - min_c.imag);
   390 		dx_min = diff_c.real / 100 * (dx + dz);
   391 		dx_max = diff_c.real / 100 * (dx - dz);
   392 
   393 		dy_min = diff_c.imag / 100 * (dy + dz);
   394 		dy_max = diff_c.imag / 100 * (dy - dz);
   395 
   396 		var min_inc = new Complex(dx_min * dim_ratio / 2.0, dy_min);
   397 		var max_inc = new Complex(dx_max * dim_ratio / 2.0, dy_max);
   398 		min_c = complex_add(min_c, min_inc);
   399 		max_c = complex_add(max_c, max_inc);
   400 		diff_c = new Complex(max_c.real - min_c.real,
   401 			max_c.imag - min_c.imag);
   402 		
   403 		for (var y = 0; y < height; y += resolution) 
   404 		{
   405 			for (var x = 0; x < width; x += resolution) 
   406 			{    			
   407 				var c = new Complex(min_c.real + diff_c.real / dim * x, 
   408 					min_c.imag + diff_c.imag / dim * y);  	
   409 			 	var result = test(c, max_iter);	
   410 		 		var r = Math.min(255, Math.pow(Math.max(0, 
   411 		 			(result.iter - max_iter / 20.0)), 2));
   412 				var g = Math.min(255, Math.pow(Math.max(0, 
   413 					(result.iter - max_iter / 25.0)), 2));			
   414 		 		var b = Math.min(255, Math.pow(Math.max(0, 
   415 					(result.iter - max_iter / 20.0)), 2));
   416 		 		var colour = "rgb(" + r + "," + g + "," + b + ")";
   417 		 		ctx.fillStyle = colour; 
   418 				ctx.fillRect(x, y, resolution, resolution);			
   419 			}
   420   		}
   421 	}  
   422 } 
   423 
   424 function getEventOffsetX(evt)
   425 {
   426 	if (evt.offsetX != null)
   427 		return evt.offsetX;
   428  
   429     var obj = evt.target || evt.srcElement;
   430    	setPageTopLeft(obj);
   431     return (evt.clientX - obj.pageLeft);
   432 }
   433 
   434 function getEventOffsetY(evt)
   435 {
   436 	if (evt.offsetY != null)
   437 		return evt.offsetY;
   438  
   439     var obj = evt.target || evt.srcElement;
   440    	setPageTopLeft(obj);
   441     return (evt.clientY - obj.pageTop);
   442 }
   443  
   444 function setPageTopLeft( o )
   445 {
   446     var top = 0,
   447     left = 0,
   448     obj = o;
   449  
   450     while (o.offsetParent)
   451      {
   452          left += o.offsetLeft ;
   453          top += o.offsetTop ;
   454          o = o.offsetParent ;
   455     };
   456  
   457     obj.pageTop = top;
   458     obj.pageLeft = left; 
   459 }
   460  
   461 function draw2(evt)
   462 {
   463 	var iter = 0;
   464 	var res = 0;
   465 	var x = (getEventOffsetX(evt) - 335) / 167.5;
   466     var y = (getEventOffsetY(evt) - 140) / 70;
   467 	var z = 0;
   468 	draw(iter, x, y, z, res);
   469 }
   470 
   471