Projet

Général

Profil

Paste
Télécharger (29,7 ko) Statistiques
| Branche: | Révision:

root / js / pano.js @ ed5e83c5

1
if (img_prefix == undefined) var img_prefix = 'http://pano.tetaneutral.net/data/tsf2/vpongnian/tiles/ttn_mediatheque/mediatheque_70';
2
if (title == undefined) var title = 'point non défini';
3
if (to_cap == undefined) var to_cap = 0;
4
if (to_ele == undefined) var to_ele = 0;
5
if (to_zoom == undefined) var to_zoom = 0;
6
if (cap == undefined) var cap = 0;
7
if (cap_min == undefined) var cap_min = cap;
8
if (cap_max == undefined) var cap_max = cap_min+360;
9
if (ref_points == undefined) var ref_points = new Array();
10
if (image_loop == undefined) var image_loop = true;
11

    
12
var pt_alt;
13
var pt_lat;
14
var pt_lon;
15

    
16
var debug_mode = false;
17
var canvas;
18
var cntext;
19
var point_list = new Array();
20
var zoom = 0;
21
var zooms = new Array();
22
var prev_zm;
23
var zm;
24
var tile = {width:256, height:256};
25
var ntiles = {x:228, y:9};
26
var border_width = 2;
27
var imageObj = new Array();
28

    
29
var last  = {x:0,y:0};
30
var shift = {x:0,y:0};
31
var mouse = {x:0,y:0};
32
var speed = {x:0,y:0};
33
var canvas_pos = {x:0,y:0};
34
var tmt;
35
var is_located = false;
36
var point_colors = {'pano_point' : '255,128,128',
37
                    'ref_point'  : '128,128,255',
38
                    'loc_point'  : '128,255,128',
39
                    'temporary'  : '255,255,128',
40
                    'unlocated'  : '255,255,255'};
41
var test = {x:0, y:0, i:100};
42

    
43

    
44
function nmodulo(val, div) {                // pour obtenir un modulo dans l'espace des nombres naturels N.
45
    return Math.floor((val%div+div)%div);   // il y a peut être plus simple, mais en attendant .... 
46
}
47

    
48
function fmodulo(val, div) {                // pour obtenir un modulo dans l'espace des nombres réels positifs.
49
    return (val%div+div)%div;               // il y a peut être plus simple, mais en attendant .... 
50
}
51

    
52
function distort_canvas(p, x, y) {
53
    if (p == 0) distort = 0;
54
    else {
55
        cntext.save();
56
        distort++;
57
        cntext.clearRect(0, 0, canvas.width, 2*canvas.height);
58
        var ratio = (canvas.width-2*distort)/canvas.width;
59
        var shift = canvas.height/2*(1-ratio);
60
        cntext.scale(1, ratio);
61
        if (p == 1) cntext.translate(0, 0);
62
        else if (p == -1) cntext.translate(0, 0);
63
        draw_image(x, y);
64
        cntext.restore();
65
        document.getElementById('res').innerHTML = 'distort : ' + distort + ' shift ' + shift + ' ratio : ' + ratio + '<br/>';
66
    }
67
}
68

    
69
function draw_image(ox, oy) {
70
    var ref_vals  = {x:last.x, y:last.y, zoom:zoom};
71
    ox = nmodulo(ox-canvas.width/2, zm.im.width);        // pour placer l'origine au centre du canvas 
72
    oy = Math.floor(oy-canvas.height/2);                 // pas de rebouclage vertical
73

    
74
    cntext.clearRect(0, 0, canvas.width, canvas.height);
75
    cntext.fillStyle = "rgba(128,128,128,0.8)";
76
    
77
    if (canvas.height > zm.im.height) {
78
        var fy = Math.floor((oy+canvas.height/2-zm.im.height/2)/(tile.height*zm.ntiles.y))*zm.ntiles.y;
79
        if (fy < 0) fy = 0; 
80
        var ly = fy + zm.ntiles.y;
81
    } else {
82
        var fy = Math.floor(oy/tile.height);
83
        var ly = Math.floor((oy+canvas.height+tile.height-1)/tile.height+1);
84
        if (fy < 0) fy = 0; 
85
        if (ly > zm.ntiles.y) ly = zm.ntiles.y; 
86
    }
87

    
88
    for (var j=fy; j<ly; j++) {
89
        var delta_y = (Math.floor(j/zm.ntiles.y) - Math.floor(fy/zm.ntiles.y)) * (tile.height - zm.last_tile.height);
90
        var dy = j*tile.height - oy - delta_y;
91
        var ny = j%ntiles.y;
92
        var wy = zm.tile.width;
93
        if (ny == zm.ntiles.y - 1) wy = zm.last_tile.height;
94

    
95
        var cpx = 0;
96
        var i = 0;
97
        var Nx = zm.ntiles.x;
98
        while (cpx < ox+canvas.width) {
99
            var cur_width = zm.tile.width;
100
            if (i%Nx == zm.ntiles.x-1) cur_width = zm.last_tile.width;
101
            if (cpx >= ox-cur_width) {
102
                var nx = i%Nx;
103
                var idx = nx+'-'+ny+'-'+ref_vals.zoom;
104
                if (imageObj[idx] && imageObj[idx].complete) {
105
                    draw_tile(idx, cpx-ox, dy); // l'image est déja en mémoire, on force le dessin sans attendre.
106
                } else {
107
                    var fname = get_file_name(nx, ny, ref_vals.zoom);
108
                    imageObj[idx] = new Image();
109
                    imageObj[idx].src = fname;
110
                    var ts = zm.get_tile_size(nx, ny);
111
                    cntext.fillRect(cpx-ox, dy, ts.width, ts.height);
112
                    imageObj[idx].addEventListener('load', (function(ref, idx, dx, dy, ox, oy, ts) {
113
                        return function() {        // closure nécéssaire pour gestion assynchronisme !!!
114
                            draw_tile_del(ref, idx, dx, dy, ox, oy, ts.width, ts.height);
115
                        };
116
                    })(ref_vals, idx, cpx-ox, dy, ox, oy, ts), false);
117
                }
118
//                load_image(zoom, nx, ny, shx, shy, cpx-ox, dy, ox, oy);
119
            }
120
            cpx += cur_width;
121
            i++;
122
        }
123
    }
124
    drawDecorations(ox, oy);
125
    var cap_ele = zm.get_cap_ele(last.x, last.y);
126
    angle_control.value = cap_ele.cap.toFixed(2);
127
    elvtn_control.value = cap_ele.ele.toFixed(2);
128
}
129

    
130
function draw_tile_del(ref, idx, tx, ty, ox, oy, twidth, theight) {
131
    if (ref.zoom == zoom && ref.x == last.x && ref.y == last.y) {
132
        draw_tile(idx, tx, ty);
133
        drawDecorations(ox, oy, tx, ty, twidth, theight);
134
    }
135
}
136

    
137
function draw_tile(idx, ox, oy) {
138
    var img = imageObj[idx];
139
    cntext.drawImage(img, ox, oy);
140
}
141

    
142
function drawDecorations(ox, oy, tx, ty, twidth, theight) {
143
    if (twidth) {
144
        cntext.save();
145
        cntext.beginPath();
146
        cntext.rect(tx, ty, twidth, theight);
147
        cntext.clip();
148
    } 
149
    var wgrd = zm.im.width/360;
150
    var od = ((ox+canvas.width/2)/wgrd)%360;
151
    var el = (zm.im.height/2 - (oy+canvas.height/2))/wgrd;
152
    cntext.fillStyle = "rgba(0,128,128,0.9)";
153
    cntext.strokeStyle = "rgb(255,255,255)";
154
    cntext.lineWidth = 1;
155
    cntext.fillRect(canvas.width/2-5, canvas.height/2-5, 10, 10);
156
    cntext.strokeRect(canvas.width/2-5, canvas.height/2-5, 10, 10);
157
    for(var i = 0; i < zm.pt_list.length; i++) {
158
        if (zm.pt_list[i]['type'] != 'unlocated') {
159
            cntext.fillStyle = 'rgba('+point_colors[zm.pt_list[i]['type']]+',0.5)';
160
            var cx = nmodulo(zm.pt_list[i]['xc'] - ox, zm.im.width);
161
            var cy = zm.pt_list[i]['yc'] - oy;
162
            cntext.beginPath();
163
            cntext.arc(cx, cy, 20, 0, 2*Math.PI, true);
164
            cntext.fill();
165
        }
166
    }
167

    
168
    if (twidth) {
169
        cntext.restore();
170
    }
171
    
172
}
173

    
174
function insert_drawn_point(lat, lon, alt) {
175
    var rt = 6371;  // Rayon de la terre
176
    var alt1 = pt_alt;
177
    var lat1 = pt_lat*Math.PI/180;
178
    var lon1 = pt_lon*Math.PI/180;
179
    var alt2 = alt;
180
    var lat2 = lat*Math.PI/180;
181
    var lon2 = lon*Math.PI/180;
182
    
183
    var dLat = lat2-lat1;
184
    var dLon = lon2-lon1; 
185
   
186
    var a = Math.sin(dLat/2)*Math.sin(dLat/2) + Math.sin(dLon/2)*Math.sin(dLon/2)*Math.cos(lat1)*Math.cos(lat2);  // 
187
    var angle = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
188
    var d = angle*rt;                    // distance du point en Kms
189
   
190
    var y = Math.sin(dLon) * Math.cos(lat2);
191
    var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(dLon);
192
    var cap = Math.atan2(y,x);                 // cap pour atteindre le point en radians
193
    var e = Math.atan2((alt2 - alt1)/1000 - d*d/(2*rt),d);  // angle de l'élévation en radians
194
    
195
    return {d:d, cap:cap*180/Math.PI, ele:e*180/Math.PI};   // les résultats sont en degrés
196
}
197

    
198
function localate_point() {
199
    var lat = document.getElementById("loca_latitude").value;
200
    var lon = document.getElementById("loca_longitude").value;
201
    var alt = document.getElementById("loca_altitude").value;
202
    if (lat == '' || isNaN(lat) || lat <= -90 || lat > 90) {
203
        alert("La latitude "+lat+"n'est pas correcte");
204
        return;
205
    }
206
    if (lat == '' || isNaN(lon) || lon <= -180 || lon > 180) {
207
        alert("La longitude "+lon+"n'est pas correcte");
208
        return;
209
    }
210
    if (lat == '' || isNaN(alt) || alt < -400 || alt > 10000000) {
211
        alert("l'altitude "+alt+"n'est pas correcte");
212
        return;
213
    }
214
    var opt_ced = new Array();
215
    opt_dce = insert_drawn_point(lat, lon, alt);
216
    display_temp(opt_dce.d, opt_dce.cap, opt_dce.ele);
217
}
218

    
219
function display_temp(d,cap,ele) {  
220
    point_list[point_list.length] = new Array("point temporaire", d,cap,ele, "temporary");
221
    reset_zooms();
222
    putImage(last.x, last.y);
223
}
224

    
225
function arrayUnset(array, value){
226
    array.splice(array.indexOf(value), 1);
227
}
228

    
229
function erase_point() {        
230
        for (var i=0; i<point_list.length; i++) {
231
                if(point_list[i][0] == "point temporaire"){
232
                        arrayUnset(point_list,point_list[i]);
233
                        loop = erase_point();
234
                }        
235
        }        
236
        reset_zooms();
237
    putImage(last.x, last.y);   
238
}
239

    
240
function get_file_name(x, y, z) { // recherche du fichier correspondant au zoom et à la position
241
    var prm = [z, x, y];
242
    var fname = img_prefix;
243
    for (var i = 0; i < prm.length; i++) {
244
        fname += '_';
245
        if (prm[i] < 10) fname += '00';
246
        else if (prm[i] < 100) fname += '0';
247
        fname += prm[i];
248
    }
249
    fname += '.jpg';
250
    return fname;
251
}
252

    
253
function keys(key) {
254
        
255
    hide_links();
256
    evt = key || event;
257
    //evt.preventDefault();
258
    //evt.stopPropagation();
259
    if (!key) {
260
        key = window.event;
261
        key.which = key.keyCode;
262
    }
263
//    alert(key);
264
//    if (!evt.shiftKey) return;
265
    switch (key.which) {
266
    /*case 66: // b
267
        alert(key.pageX);
268
        test.x=tile.width*(ntiles.x-3);
269
        test.y=0;
270
        putImage(test.x, test.y);
271
        return;
272
    case 67: // c
273
        test.x=0;
274
        test.y=tile.height*(ntiles.y-3);
275
        putImage(test.x, test.y);
276
        return;*/
277
    case 36: // home
278
        putImage(0, zm.im.height/2);
279
        return;
280
    case 35: // end
281
        putImage(last.x+zm.im.width/2, last.y);
282
        return;
283
    case 39: // left
284
        putImage(last.x+40, last.y);
285
        return;
286
    case 40: // up
287
        putImage(last.x, last.y+20);
288
        return;
289
    case 37: // right
290
        putImage(last.x-40, last.y);
291
        return;
292
    case 38: // down
293
        putImage(last.x, last.y-20);
294
        return;
295
    case 33: // pageup
296
        zoom_control.value--;
297
        change_zoom()
298
        return;
299
    case 34: // pagedown
300
        zoom_control.value++;
301
        change_zoom()
302
        return;
303
    default:
304
//        alert(key.which)
305
        return;
306
    }
307
}
308

    
309
function onImageClick(e) {
310
    hide_contextmenu();
311
    shift.x = last.x;
312
    shift.y = last.y;
313
    speed.x = 0;
314
    speed.y = 0;
315
    mouse.x = e.pageX;
316
    mouse.y = e.pageY;
317
    clearTimeout(tmt);  //arrêt de l'éffet eventuel d'amorti en cours.
318
    canvas.addEventListener('mousemove', stickImage, false);
319
    canvas.addEventListener('mouseup', launchImage, false);
320
    //canvas.addEventListener('mouseout', launchImage, false);
321
    canvas.style.cursor='move';
322
    //document.onmousemove = stickImage;
323
    document.onmouseup = launchImage;
324
    hide_links();
325
}
326

    
327

    
328
function stickImage(e) {
329
    var xs = mouse.x - e.pageX + shift.x;
330
    var ys = mouse.y - e.pageY + shift.y;
331
    speed.x = xs - last.x;  //mémorisation des vitesses horizontales
332
    speed.y = ys - last.y;  //et verticales lors de ce déplacement
333
    putImage(xs, ys);
334
}
335

    
336
function launchImage(e) {
337
    distort_canvas(0);
338
    canvas.removeEventListener('mousemove', stickImage, false);
339
    //document.onmousemove = null;
340
    shift.x = e.pageX - mouse.x + shift.x;
341
    shift.y = e.pageY - mouse.y + shift.y;
342
    tmt = setTimeout(inertialImage, 100);
343
}
344

    
345
function putImage(x, y) { // est destiné à permettre l'effet d'amortissement par la mémorisation de la position courante.
346
    if (!zm.is_updated) return; 
347
    if (x >= zm.im.width) {   // rebouclage horizontal
348
        shift.x -= zm.im.width;
349
        x -= zm.im.width;
350
    } else if (x < 0) {
351
        shift.x += zm.im.width;
352
        x += zm.im.width;
353
    }
354
    if (y >= zm.im.height) {   // pas de rebouclage vertical mais blocage
355
        //distort_canvas(1, x, y);
356
        shift.y = zm.im.height-1;
357
        y = zm.im.height-1;
358
    } else if (y < 0) {
359
        //distort_canvas(-1, x, y);
360
        shift.y = 0;
361
        y = 0;
362
    }
363

    
364
    last.x = x;
365
    last.y = y;
366
    draw_image(x, y);
367
}
368

    
369
function inertialImage() {
370
    speed.x *= 0.9;
371
    speed.y *= 0.9;
372
    if (Math.abs(speed.x) > 2 || Math.abs(speed.y) > 2) {
373
        putImage(last.x+speed.x, last.y+speed.y);
374
        tmt = setTimeout(inertialImage, 100);
375
    } else {
376
        show_links();
377
    }
378
}
379

    
380
function tri_ref_points(v1, v2) {
381
    return v1['x'] - v2['x'];
382
}
383

    
384

    
385

    
386
function tzoom(zv) {
387
    this.value = zv;
388
    this.ntiles = {x:0,y:0};
389
    this.tile = {width:0,height:0};
390
    this.last_tile = {width:0,height:0};
391
    this.max_tile = {width:0,height:0};
392
    this.im = {width:0,height:0};
393
    this.is_updated = false;
394

    
395
    this.refresh = function() {
396
        this.im.visible_width = this.tile.width*(this.ntiles.x-1)+this.last_tile.width;
397
        this.is_updated = true;
398

    
399
        this.im.width = this.im.visible_width;
400
        this.im.height = this.tile.height*(this.ntiles.y-1)+this.last_tile.height;
401
        if (this.last_tile.width > this.tile.width) this.max_tile.width = this.im.last_tile.width;
402
        else this.max_tile.width = this.tile.width;
403
        if (this.last_tile.height > this.tile.height) this.max_tile.height = this.im.last_tile.height;
404
        else this.max_tile.height = this.tile.height;
405

    
406
        var ord_pts = new Array();
407
        i=0;
408
        for(var label in ref_points) {
409
            ord_pts[i++] = ref_points[label]
410
        }
411
        ord_pts = ord_pts.sort(tri_ref_points);
412
        is_located = i > 1 || image_loop && i > 0;
413

    
414
        var alpha_domain = {start:0, end:360}; 
415
        this.pixel_y_ratio = this.im.width/360;
416
        if (is_located) {
417
            this.ref_pixels = new Array;
418
            this.ref_pixels[0] = new Array();    // Attention il faut compter un intervalle de plus !
419
            for (var i=0; i < ord_pts.length; i++) { // premier parcours pour les paramètres cap/x
420
                this.ref_pixels[i+1] = new Array();
421
                this.ref_pixels[i+1].x = Math.floor(ord_pts[i].x*this.im.width);
422
                this.ref_pixels[i+1].cap = fmodulo(ord_pts[i].cap, 360);
423
                if (i != ord_pts.length-1) {
424
                    this.ref_pixels[i+1].ratio_x = (ord_pts[i+1].x - ord_pts[i].x)/fmodulo(ord_pts[i+1].cap - ord_pts[i].cap, 360)*this.im.width;
425
                }
426
            }
427
            if (image_loop == true) {
428
                var dpix = this.im.width;
429
                var dangle = 360;
430
                if (ord_pts.length > 1) {
431
                    dpix = this.im.width - this.ref_pixels[this.ref_pixels.length-1].x + this.ref_pixels[1].x;
432
                    dangle = fmodulo(this.ref_pixels[1].cap - this.ref_pixels[this.ref_pixels.length-1].cap, 360);
433
                }
434
                this.ref_pixels[0].ratio_x = dpix/dangle;
435
                this.ref_pixels[ord_pts.length].ratio_x = this.ref_pixels[0].ratio_x;
436
                dpix = this.im.width - this.ref_pixels[ord_pts.length].x;
437
                this.ref_pixels[0].cap = fmodulo(this.ref_pixels[ord_pts.length].cap + dpix / this.ref_pixels[0].ratio_x, 360);
438
            } else {
439
                this.ref_pixels[0].ratio_x = this.ref_pixels[1].ratio_x;
440
                this.ref_pixels[ord_pts.length].ratio_x = this.ref_pixels[ord_pts.length-1].ratio_x;
441
                this.ref_pixels[0].cap = fmodulo(this.ref_pixels[1].cap - this.ref_pixels[1].x / this.ref_pixels[1].ratio_x, 360);
442
                alpha_domain.start = this.ref_pixels[0].cap;
443
                alpha_domain.end = fmodulo(this.ref_pixels[ord_pts.length].cap+(this.im.width-this.ref_pixels[ord_pts.length].x)/this.ref_pixels[ord_pts.length].ratio_x, 360);
444
                this.pixel_y_ratio = this.im.width/fmodulo(alpha_domain.end-alpha_domain.start, 360);
445
            }
446
            this.ref_pixels[0].x = 0;
447

    
448
            for (var i=0; i < ord_pts.length; i++) { // second parcours pour les paramètres elevation/y
449
                this.ref_pixels[i+1].shift_y = Math.floor(this.pixel_y_ratio*ord_pts[i].ele - ord_pts[i].y*this.im.height);
450
                if (i != ord_pts.length-1) {
451
                    var next_shift = Math.floor(this.pixel_y_ratio*ord_pts[i+1].ele - ord_pts[i+1].y*this.im.height);
452
                    this.ref_pixels[i+1].dshft_y = (next_shift - this.ref_pixels[i+1].shift_y)/(this.ref_pixels[i+2].x - this.ref_pixels[i+1].x);
453
                }
454
            }
455

    
456
            if (image_loop == true) {
457
                var dpix  = this.im.width;
458
                var delt = 0;
459
                if (ord_pts.length > 1) {
460
                    dpix  = this.im.width - this.ref_pixels[this.ref_pixels.length-1].x + this.ref_pixels[1].x;
461
                    delt = this.ref_pixels[this.ref_pixels.length-1].shift_y - this.ref_pixels[1].shift_y;
462
                }
463
                this.ref_pixels[0].dshft_y = -delt/dpix;
464
                this.ref_pixels[ord_pts.length].dshft_y = this.ref_pixels[0].dshft_y;
465
                dpix = this.im.width - this.ref_pixels[ord_pts.length].x;
466
                this.ref_pixels[0].shift_y = this.ref_pixels[ord_pts.length].shift_y + dpix*this.ref_pixels[0].dshft_y;
467
            } else {
468
                this.ref_pixels[0].shift_y = this.ref_pixels[1].shift_y;
469
                this.ref_pixels[0].dshft_y = 0;
470
                this.ref_pixels[ord_pts.length].dshft_y = 0;
471
            }
472

    
473
            if (debug_mode) {
474
                var res = document.getElementById('res');
475
                res.innerHTML = 'liste des '+this.ref_pixels.length+' valeurs de correction (image = '+this.im.width+'x'+this.im.height+') zoom = '+this.value+':<br/>';
476
                for (var i=0; i < this.ref_pixels.length; i++) { // pour le debug
477
                    res.innerHTML += '<p>point '+i+' :</p><ul>';
478
                    for (var key in this.ref_pixels[i]) { // pour le debug
479
                        res.innerHTML += '<li>'+key + '['+i+'] = '+this.ref_pixels[i][key]+'</li>';
480
                    }
481
                    if (i != this.ref_pixels.length-1) {
482
                        var tx0 = this.ref_pixels[i+1].x-1;
483
                        //var ty0 = this.ref_pixels[i+1].shift_y;
484
                        var ty0 = 0;
485
                    } else {
486
                        var tx0 = this.im.width-1;
487
                        var ty0 = 0;
488
                    }
489
                    res.innerHTML += '</ul><p>test sur : '+tx0+','+ty0+'</p>';
490
                    var tst = this.get_cap_ele(tx0, ty0);
491
                    res.innerHTML += '<p>cap:'+tst.cap+', shift:'+tst.ele+'</p>';
492
                    var tst2 = this.get_pos_xy(tst.cap, tst.ele);
493
                    res.innerHTML += '</ul><p>x:'+tst2.x+', y:'+tst2.y+'</p>';
494
                }
495
            }
496
        }
497

    
498
        this.pt_list = new Array();
499
        for (var i=0; i<point_list.length; i++) {
500
            var lbl = point_list[i][0];
501
            var dst = point_list[i][1];
502
            var cap = point_list[i][2];
503
            var ele = point_list[i][3];
504
            var lnk = point_list[i][4];
505
            var typ = 'unlocated';
506
            var rxy = this.get_pos_xy(cap, ele);
507
            var is_visible = fmodulo(cap - alpha_domain.start, 360) <= fmodulo(alpha_domain.end - alpha_domain.start -0.0001, 360)+0.0001 && is_located;
508

    
509
            this.pt_list[i] = new Array();
510
            if (ref_points[lbl] != undefined) {
511
                typ = 'ref_point';
512
                if (!is_located) rxy = {x:ref_points[lbl].x*this.im.width, y:ref_points[lbl].y*this.im.height}
513
            } else if(lnk == '' && is_visible && lbl != 'point temporaire') {
514
                typ = 'loc_point';
515
            }else if(is_visible && lbl =='point temporaire') {
516
            typ = 'temporary';
517
            
518
            } else if(is_visible) {
519
                typ = 'pano_point';
520
                lnk += '&to_zoom='+this.value;
521
            } 
522
            this.pt_list[i]['type'] = typ;
523
            this.pt_list[i]['cap'] = cap;
524
            this.pt_list[i]['ele'] = ele;
525
            this.pt_list[i]['dist'] = dst;
526
            this.pt_list[i]['label'] = lbl;
527
            this.pt_list[i]['lnk'] = lnk;
528
            this.pt_list[i]['xc'] = rxy.x;
529
            this.pt_list[i]['yc'] = Math.floor(this.im.height/2 - rxy.y);
530
        }
531
    }
532
    
533
    this.get_tile_size = function(nx, ny) {
534
        var res = {width:0, height:0};
535
        if (nx == this.ntiles.x-1) res.width = this.last_tile.width;
536
        else res.width = this.tile.width;
537
        if (ny == this.ntiles.y-1) res.height = this.last_tile.height;
538
        else res.height = this.tile.height;
539
        return res;
540
    }
541
    
542
    this.get_cap_ele = function(px, py) {               // recherche d'un cap et d'une élévation à partir d'un pixel X,Y.
543
        if (is_located) {
544
            for (var i=0; i < this.ref_pixels.length; i++) {
545
                if (i == this.ref_pixels.length - 1 || px < this.ref_pixels[i+1].x) {
546
                    var dpix = px-this.ref_pixels[i].x;
547
                    var cp = fmodulo(this.ref_pixels[i].cap + dpix/this.ref_pixels[i].ratio_x, 360);
548
                    var el = (py+this.ref_pixels[i].shift_y+this.ref_pixels[i].dshft_y*dpix)/this.pixel_y_ratio;
549
                    return {cap:cp, ele:el};
550
                }
551
            }
552
        } else {
553
            var cp = 360*px/this.im.width;
554
            var el = 360*py/this.im.height;
555
            return {cap:cp, ele:el};
556
        }
557
    }
558
    
559
    this.get_pos_xy = function(cap, ele) {                  // recherche des coordonnées pixel à partir d'un cap et d'une élévation.
560
        if (is_located) {
561
            var dcap = fmodulo(cap-this.ref_pixels[0].cap, 360);
562
            for (var i=0; i < this.ref_pixels.length; i++) {
563
                if (i == this.ref_pixels.length - 1 || dcap < fmodulo(this.ref_pixels[i+1].cap-this.ref_pixels[0].cap, 360)) {
564
                    var px = this.ref_pixels[i].x + this.ref_pixels[i].ratio_x*fmodulo(cap - this.ref_pixels[i].cap, 360);
565
                    var dpix = px-this.ref_pixels[i].x;
566
                    var py = this.pixel_y_ratio*ele - this.ref_pixels[i].shift_y - this.ref_pixels[i].dshft_y*dpix;
567
                    return {x:px, y:py};
568
                }
569
            }
570
        } else {
571
            var px = fmodulo(cap, 360)/360*this.im.width;
572
            var py = ele/360*this.im.height;
573
            return {x:px, y:py};
574
        }
575
    }
576
}
577

    
578
function reset_zooms () {
579
    for(i=0; i<zooms.length; i++) zooms[i].is_updated = false;
580
    zm.refresh();
581
}
582

    
583
function wheel_zoom (event) {
584
    var zshift = {x:0, y:0};
585
    if (event.pageX != undefined && event.pageX != undefined) {
586
        zshift.x = event.pageX-canvas.width/2-canvas_pos.x;
587
        zshift.y = event.pageY-canvas.height/2-canvas_pos.y;
588
    }
589
    event.preventDefault();
590
    if (event.wheelDelta < 0 && zoom_control.value < zoom_control.max) {
591
        zoom_control.value++;
592
        change_zoom(zshift.x, zshift.y);
593
    } else if (event.wheelDelta > 0 && zoom_control.value > zoom_control.min) {
594
        zoom_control.value--; 
595
        change_zoom(zshift.x, zshift.y);
596
    }
597
}
598

    
599
function change_zoom(shx, shy) {
600
    var zoom_control = document.getElementById("zoom_ctrl");
601
    var v = zoom_control.value;
602

    
603
    prev_zm = zm;
604

    
605
    if (zooms[v]) {
606
        if (!zooms[v].is_updated) zooms[v].refresh();
607
    } else {
608
        zooms[v] = new tzoom(v);
609
    }
610

    
611
    if (zooms[v].is_updated) {
612
        if (shx == undefined || shy == undefined) {
613
            shx=0;
614
            shy=0;
615
        }
616
        zm = zooms[v];
617
        var px = (last.x+shx)*zm.im.width/prev_zm.im.width - shx;
618
        var py = (last.y+shy)*zm.im.height/prev_zm.im.height - shy;
619
        if (py < zm.im.height && py >= 0) {
620
            zoom = zm.value;
621
            tile = zm.tile;
622
            ntiles = zm.ntiles;
623
            putImage(px, py);
624
        } else {
625
            zm = prev_zm;
626
            zoom_control.value = zm.value;
627
        }
628
    }
629
}
630

    
631
function change_angle() {
632
    var elvtn_control = document.getElementById('elvtn_ctrl');
633
    var angle_control = document.getElementById('angle_ctrl');
634
    var resxy = zm.get_pos_xy(angle_control.value, elvtn_control.value);
635
    var pos_x = resxy.x;
636
    var pos_y = Math.floor(zm.im.height/2 - resxy.y);
637
    putImage(pos_x, pos_y);
638
}
639

    
640
function check_prox(x, y, r) {   //verification si un point de coordonnées x, y est bien dans un cercle de rayon r centré en X,Y. 
641
    return Math.sqrt(x*x + y*y) < r;
642
}
643

    
644
function check_links(e) {
645
    var mouse_x = e.pageX-canvas_pos.x;
646
    var mouse_y = e.pageY-canvas_pos.y;
647
    var pos_x = nmodulo(last.x + mouse_x - canvas.width/2, zm.im.width);
648
    var pos_y = last.y + mouse_y - canvas.height/2;
649
    for(var i = 0; i < zm.pt_list.length; i++) {
650
        if (is_located && zm.pt_list[i]['type'] == 'pano_point') {
651
            if (check_prox(zm.pt_list[i]['xc']-pos_x, zm.pt_list[i]['yc']-pos_y, 20)) {
652
                if (zm.pt_list[i]['lnk'] != '') window.location = zm.pt_list[i]['lnk'];
653
                break;
654
            }
655
        }
656
    }
657
}
658

    
659
function display_links(e) {
660
    var info = document.getElementById('info');
661
    var mouse_x = e.pageX-canvas_pos.x;
662
    var mouse_y = e.pageY-canvas_pos.y;
663
    var pos_x = nmodulo(last.x + mouse_x - canvas.width/2, zm.im.width);
664
    var pos_y = last.y + mouse_y - canvas.height/2;
665
    //var cap = ((pos_x/zm.im.width)*360).toFixed(2);
666
    var res = zm.get_cap_ele(pos_x, zm.im.height/2 - pos_y);
667
    //var ele = ((zm.im.height/2 - pos_y)/zm.im.width)*360;
668
    info.innerHTML = 'élévation : '+res.ele.toFixed(2)+'<br/>cap : '+res.cap.toFixed(2);
669
    info.style.top = e.pageY+'px';
670
    info.style.left = e.pageX+'px';
671
    info.style.backgroundColor = '#FFC';
672
    info.style.display = 'block';
673
    canvas.style.cursor='crosshair';
674
    for(var i = 0; i < zm.pt_list.length; i++) {
675
        if (is_located || zm.pt_list[i]['type'] == 'ref_point') {
676
            if (check_prox(zm.pt_list[i]['xc']-pos_x, zm.pt_list[i]['yc']-pos_y, 20)) {
677
                info.innerHTML = zm.pt_list[i]['label'];
678
                if (zm.pt_list[i]['dist'] < 10) var dst = Math.round(zm.pt_list[i]['dist']*1000)+' m';
679
                else var dst = zm.pt_list[i]['dist'].toFixed(1)+' kms';
680
                info.innerHTML += '<br/> à ' + dst;
681
                info.style.backgroundColor = 'rgb('+point_colors[zm.pt_list[i]['type']]+')';
682
                canvas.style.cursor='auto';
683
                break;
684
            }
685
        }
686
    }
687
}
688

    
689
function hide_links() {
690
    canvas.removeEventListener( "mousemove", display_links, false);
691
    var info = document.getElementById('info');
692
    info.style.display = 'none';
693
}
694

    
695
function show_links() {
696
    canvas.addEventListener( "mousemove", display_links, false);
697
//    var info = document.getElementById('info');
698
//    info.style.display = 'block';
699
}
700

    
701
function hide_contextmenu() {
702
    document.getElementById('insert').style.display = 'none';
703
}
704

    
705
function manage_ref_points(e) {
706
    //event.preventDefault();
707
    //event.stopPropagation();
708
    var insrt = document.getElementById('insert');
709
    document.getElementById('do-cancel').onclick = hide_contextmenu;
710
    insrt.style.left = e.pageX+'px';
711
    insrt.style.top = e.pageY+'px';
712
    insrt.style.display = 'block';
713
    var sel_pt = document.getElementById('sel_point');
714
    var do_insert = document.getElementById('do-insert');
715
    var do_delete = document.getElementById('do-delete');
716
    var show_cap = document.getElementById('show-cap');
717
    var pos_x = nmodulo(last.x + e.pageX - canvas_pos.x - canvas.width/2, zm.im.width);
718
    var pos_y = last.y + e.pageY - canvas_pos.y - canvas.height/2;
719
    for(var i = 0; i < zm.pt_list.length; i++) {
720
        if (zm.pt_list[i]['type'] == 'ref_point') {
721
            if (check_prox(zm.pt_list[i]['xc']-pos_x, zm.pt_list[i]['yc']-pos_y, 20)) {
722
                sel_pt.value = zm.pt_list[i]['label'];
723
            }
724
        }
725
    }
726
    do_delete.onclick = function() {delete_ref_point(insrt)};
727
    do_insert.onclick = function() {insert_ref_point(insrt, e.pageX-canvas_pos.x, e.pageY-canvas_pos.y)};
728
    var res = zm.get_cap_ele(pos_x, zm.im.height/2 - pos_y);
729
    show_cap.onclick = function() {window.open('show_capline.php?title='+encodeURIComponent(title)+'&cap='+res.cap+'&org_lat='+pt_lat+'&org_lon='+pt_lon)};
730
    return false;
731
}
732

    
733
function insert_ref_point(el, x, y) {
734
    var label;
735
    el.style.display = 'none';
736
    for(var i = 0; i < zm.pt_list.length; i++) {
737
        label = zm.pt_list[i]['label'];
738
        if(label == document.getElementById('sel_point').value) {
739
            var posx = nmodulo(last.x + x - canvas.width/2, zm.im.width)/zm.im.width;
740
            var posy = 0.5 - (last.y + y - canvas.height/2)/zm.im.height;
741
            var pval = {x:posx, y:posy, cap:zm.pt_list[i]['cap'], ele:zm.pt_list[i]['ele'], label:label};
742
            ref_points[label] = pval;
743
            document.getElementById('res').innerHTML = '<h4>Dernier point entré</h4>';
744
            document.getElementById('res').innerHTML += '<p>reference["'+label+'"] = '+posx.toFixed(5)+','+posy.toFixed(5)+'</p>';
745
            reset_zooms();
746
             putImage(last.x, last.y);
747
            break;
748
        }
749
    }
750
    show_result();
751
}
752

    
753
function show_result(clear_before) {
754
    var res = document.getElementById('res');
755
    var strg = '';
756
    for (var lbl in ref_points) {
757
        strg += '<li>reference["'+lbl+'"] = '+ref_points[lbl].x.toFixed(5)+','+ref_points[lbl].y.toFixed(5)+'</li>';
758
    }
759
    if (strg) strg = '<h3>Liste de tous les points de référence</h3>\n<ul>' + strg + '</ul>';
760
    if (clear_before) res.innerHTML = strg;
761
    else res.innerHTML += strg;
762
}
763

    
764
function delete_ref_point(el) {
765
    el.style.display = 'none';
766
    delete ref_points[document.getElementById('sel_point').value];
767
    reset_zooms();
768
    putImage(last.x, last.y);
769
    show_result(true);
770
}
771

    
772
function clean_canvas_events(e) {
773
    canvas.removeEventListener('mousemove', stickImage, false);
774
    document.getElementById('info').style.display = 'none';
775
    speed.x = 0;
776
    speed.y = 0;
777
}
778

    
779
canvas_set_size = function() {
780
    canvas.style.border = border_width+"px solid red";
781
    canvas.width = window.innerWidth-2*border_width;
782
    canvas.height = window.innerHeight-2*border_width;
783
    canvas_pos.x = canvas.offsetLeft+border_width;
784
    canvas_pos.y = canvas.offsetTop+border_width;
785
}
786

    
787
canvas_resize = function() {
788
    canvas_set_size();
789
    putImage(last.x, last.y);
790
}
791

    
792
function paramIn(e) {
793
    e = e || window.event; 
794
    var relatedTarget = e.relatedTarget || e.fromElement; 
795
    
796
    while (relatedTarget != adding && relatedTarget.nodeName != 'BODY' && relatedTarget != document && relatedTarget != localisation) {
797
        relatedTarget = relatedTarget.parentNode;
798
    }
799
    
800
    if (relatedTarget != adding && relatedTarget != localisation) {
801
        document.removeEventListener('keydown', keys, false);
802
    }
803
}
804

    
805
function paramOut(e) {
806
         
807
    e = e || window.event; 
808
    var relatedTarget = e.relatedTarget || e.toElement; 
809
 
810
    while (relatedTarget != adding && relatedTarget.nodeName != 'BODY' && relatedTarget != document && relatedTarget != localisation) {
811
        relatedTarget = relatedTarget.parentNode;
812
    }
813
 
814
    if (relatedTarget != adding && relatedTarget != localisation) {
815
            document.addEventListener('keydown', keys, false);
816
    }
817
 
818
}
819

    
820
window.onload = function() {        
821
    pt_alt = document.getElementById('pos_alt').childNodes[0].nodeValue;
822
    pt_lat = document.getElementById('pos_lat').childNodes[0].nodeValue;
823
    pt_lon = document.getElementById('pos_lon').childNodes[0].nodeValue;
824

    
825
    localisation = document.getElementById("locadraw");
826
    adding = document.getElementById("adding");
827
    canvas = document.getElementById("mon-canvas");
828
    cntext = canvas.getContext("2d");
829
    canvas_set_size();
830
    canvas.addEventListener("click", check_links, false);
831
    //canvas.addEventListener("oncontextmenu", manage_ref_points, false);
832
    canvas.oncontextmenu = manage_ref_points;
833
    canvas.addEventListener("mouseout" , clean_canvas_events, false);
834
    show_links();
835

    
836
    var max_zoom = zooms.length - 1;
837
    zoom_control = document.getElementById("zoom_ctrl");
838
    zoom_control.onchange = change_zoom;
839
    zoom_control.max = max_zoom;
840
    if (to_zoom > max_zoom) to_zoom = Math.floor(max_zoom/2);
841
    zm = zooms[to_zoom];
842
    zoom_control.value = to_zoom;
843
    zm.refresh();
844

    
845
    zoom = zm.value;
846
    tile = zm.tile;
847
    ntiles = zm.ntiles;
848

    
849
    angle_control = document.getElementById("angle_ctrl");
850
    angle_control.value = to_cap;
851
    angle_control.onchange = change_angle;
852
    angle_control.onclick = change_angle;
853
    elvtn_control = document.getElementById("elvtn_ctrl");
854
    elvtn_control.value = to_ele;
855
    elvtn_control.onchange = change_angle;
856
    elvtn_control.onclick = change_angle;
857

    
858
    change_angle();
859
    loca_temp = document.getElementById("loca_show");
860
    if (loca_temp) {
861
        loca_temp.onclick = showLoca;
862
        loca_temp = document.getElementById("loca_hide");
863
        loca_temp.onclick = hideLoca;
864
        loca_temp = document.getElementById("loca_button");
865
        loca_temp.onclick = localate_point;
866
        loca_erase = document.getElementById("loca_erase");
867
        loca_erase.onclick = erase_point;
868
        localisation.addEventListener('mouseover',paramIn,false);
869
        localisation.addEventListener('mouseout',paramOut,false);
870
    }
871
    canvas.addEventListener('mousedown', onImageClick, false);
872
    document.addEventListener('keydown', keys, false);
873
    canvas.addEventListener('mousewheel', wheel_zoom, false);
874
    window.onresize = canvas_resize;
875
    if (adding) {
876
        document.getElementById("paramFormHide").onclick = hideForm;
877
        document.getElementById("paramFormShow").onclick = showForm;
878
        adding.addEventListener('mouseover', paramIn, false);
879
        adding.addEventListener('mouseout', paramOut, false);
880
    }
881
};