/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
$(document).ready(function(){
    $('#main_box').css('background-color', 'transparent');

    $('#petra_logo').click(function(){
        window.location = 'index.php';
    });
});
$(window).load(function(){

    $('#petra_map_canvas').css({
        left: function(){
            return $('#main_box').css('left');
        },
        top: function(){
            var tt = removepx($('#main_box').css('left'));
            tt = tt+$('#petra_main_menu_box').height();
            return tt+'px';
        },
        width: function(){
            return $('#main_box').width()+'px';
        },
        height: function(){
            var tt = $('#main_box').height() - $('#petra_main_menu_box').height();
            return tt+'px';
        }
    });

    $('#petra_map_canvas').everyTime(1000, 'timer2', function(i) {
        citypairs();
    },250);

    var canvas = document.getElementById('canvas');
    try {
        ctx=canvas.getContext('2d');
    } catch(e){
        alert(e.message);
    };
});

$(window).resize(function(){

    $('#petra_map_canvas').stopTime('timer2');
    $('div.petra_city').hide();
    $('#petra_map_canvas').everyTime(1000, 'timer2', function(i) {
        citypairs();
    },250);
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, 2000, 2000);
    $('div.petra_city').each(function(idx, el){
        var city_name=$(el).attr('id');
        var city_coord = cities(city_name);
        var new_coords = remap_coords(city_coord);
        $(el).css({
            left: function(){
                return new_coords[0]
            },
            top: function(){
                return new_coords[1]
            }
        });
    });
    $('#petra_map_canvas').css({
        left: function(){
            return $('#main_box').css('left');
        },
        top: function(){
            var tt = removepx($('#main_box').css('left'));
            tt = tt+$('#petra_main_menu_box').height();
            return tt+'px';
        },
        width: function(){
            return $('#main_box').width()+'px';
        },
        height: function(){
            var tt = $('#main_box').height() - $('#petra_main_menu_box').height();
            return tt+'px';
        }
    });
});

/**
 * Нужна для преобразования значений, возращаемых css()
 * в число
 */
function removepx(val){
    val = val.replace(new RegExp("px",'g'),"");
    if(isNaN(val)){
        return -1;
    } else{
        return val*1;
    }
}

function remap_coords(city_coord){
    var source_map = [2088,1172];
    var w_new = $('#petra_map_box img').width();
    var h_new = $('#petra_map_box img').height();
    var x_new=Math.floor(city_coord[0]*w_new/(source_map[0]));
    var y_new=Math.floor(city_coord[1]*h_new/(source_map[1]))+$('#petra_main_menu_box').height();
    return [x_new, y_new];
}

/**
 * Задача функции, найти центр окружности, которая проходит через заданные точки
 * радиус по умолчанию 68.<br/>
 * <b>Возвращает массив x1 y1 k11 k12 x2 y2 k21 k22 rad</b><br/>
 * <i>k11 k12 — углы для первого пересечения<br/>
 * k21 k22 — углы для второго пересечения</i>
 */
function projectarc (a, b, c, d) {
    /*проверяем, что расстояние между точками больше радиуса */

    var rad =10;
    var dist = Math.sqrt((Math.pow((a-c), 2)+Math.pow((b-d), 2)));
    while (2*rad<(dist+50)) {
        //Если радиус меньше расстояния, дугу не построишь, увеличиваем радиус
        rad += 50;
        dist = Math.sqrt((Math.pow((a-c), 2)+Math.pow((b-d), 2)));
    };

    //Координаты точек
    var tt1 = (b - d)*Math.sqrt((2*a*c - b*b + 2*b*d - c*c - d*d + 4*rad*rad - a*a))*sign(a-c);
    var tt2 = (a+c)*Math.sqrt(a*a - 2*a*c + b*b - 2*b*d + c*c + d*d);
    var tt3 = 2*Math.sqrt(a*a - 2*a*c + b*b - 2*b*d + c*c + d*d);

    var x_r1 = (tt1+tt2)/tt3;

    tt1 = (Math.sqrt(a*a - 2*a*c + b*b - 2*b*d + c*c + d*d))*(b+d);
    tt2 = (Math.sqrt(2*a*c - b*b + 2*b*d - c*c - d*d + 4*rad*rad - a*a))*Math.abs(a-c);
    tt3 = 2*Math.sqrt(a*a - 2*a*c + b*b - 2*b*d + c*c + d*d);

    var y_r1 = (tt1-tt2)/tt3;

    tt1 = (a+c)*Math.sqrt(a*a - 2*a*c + b*b - 2*b*d + c*c + d*d);
    tt2 = (b-d)*Math.sqrt(2*a*c - b*b + 2*b*d - c*c - d*d + 4*rad*rad - a*a)*sign(a-c);

    var x_r2 = (tt1-tt2)/tt3;

    tt1 = Math.abs(a-c)*Math.sqrt(2*a*c - b*b + 2*b*d - c*c - d*d + 4*rad*rad - a*a );
    tt2 = (b+d)*Math.sqrt(a*a - 2*a*c + b*b - 2*b*d + c*c + d*d);

    var y_r2 = (tt1+tt2)/tt3;

    // Углы между прямыми

    var k1_r1 = (y_r1-b)/(x_r1-a);
    k1_r1 = Math.atan(k1_r1);
    if(k1_r1<0) {
        k1_r1 += 2*Math.PI;
    }

    var k2_r1 = (y_r1-d)/(x_r1-c);
    k2_r1 = Math.atan(k2_r1);
    if(k2_r1<0) {
        k2_r1 += 2*Math.PI;
    }

    tt1 = Math.min(k1_r1, k2_r1);
    tt2 = Math.max(k1_r1, k2_r1);

    while((tt2-tt1)>Math.PI){
        tt2 = tt2 -Math.PI;
    }
    k1_r1 = tt1;
    k2_r1 = tt2;

    var k1_r2 = (y_r2-b)/(x_r2-a);
    k1_r2 = Math.atan(k1_r2);
    if(k1_r2<0) {
        k1_r2 += 2*Math.PI;
    }

    var k2_r2 = (y_r2-d)/(x_r2-c);
    k2_r2 = Math.atan(k2_r2);
    if(k2_r2<0) {
        k2_r2 += 2*Math.PI;
    }

    tt1 = Math.min(k1_r2, k2_r2);
    tt2 = Math.max(k1_r2, k2_r2);

    while((tt2-tt1)>Math.PI){
        tt2 = tt2 -Math.PI;
    }
    k1_r2 = tt1;
    k2_r2 = tt2;


    return ([x_r1, y_r1, k1_r1, k2_r1, x_r2, y_r2, k1_r2, k2_r2 ,rad]);
};

/**
 * Возвращает 1, если a положительное, 0, если равно 0,<br/>
 * -1 если отрицательное
 */
function sign (a) {
    if(a>0) {
        return 1;
    }
    if (a<0){
        return -1;
    }
    if(a==0){
        return 0;
    }
    return 2;
};

/**
 * Координаты городов
 */
function cities(city_name){
    var saint_petersburg = [1191,195];
    var moskow = [1207, 230];
    var rome = [1082, 309];
    var paris = [1016, 262];
    var praha = [1095,257];
    var london = [993,244];
    var madrid = [972,318];
    var sofia = [1157,306];
    var kiev = [1210,259];
    var pekin = [1783,314];
    var shanghai = [1795,392];
    var tokio = [1933,346];
    var rio = [693,739];
    var bueno = [610,812];
    var new_york = [495,320];
    var washington = [472,341];
    var atlanta = [428,359];
    var sidney = [2001, 806]
    return(eval(city_name));
}
function city_id(idx){
    var directions = ['saint_petersburg','moskow','rome','paris','praha','london','madrid','sofia','kiev','pekin','shanghai','tokio','rio','bueno','new_york','washington','atlanta','sidney'];
    return directions[idx];
};
function city_name(idx){
    var citi_names = ['Санкт-Петербург','Москва','Рим','Париж','Прага','Лондон','Мадрид','София','Киев','Пекин','Шанхай','Токио','Рио-де-Жанейро','Буэнос-Айрес','Нью-Йорк','Вашингтон','Атланта','Сидней'];
    return citi_names[idx];
}
function getonecity(idx){
    if (!idx){
        idx = Math.round(Math.random()*17);
    }
    var id1 = city_id(idx); //Ставим первый город
    var txt1 = city_name(idx);

    if ($('#'+id1).length==0) {
        $('#main_box').append('"<div class="petra_city" id="'+id1+'"></div>"');
        var city_coord = cities(id1);
        var new_coords = remap_coords(city_coord);
        $($('#'+id1)).css({
            left: function(){
                return new_coords[0]
            },
            top: function(){
                return new_coords[1]
            }
        });
        $('#'+id1).css('display', 'none');

        $('#petra_animate_box').queue(function(){
            $('#'+id1).text(txt1);
            $(this).dequeue();
        });
        $('#petra_animate_box').queue(function(){
            $('#'+id1).fadeIn(500, function(){
                $('#'+id1).css('background-image', 'url(images/petra_city_light.png)');
            });
            $(this).dequeue();
        });
    } else {
        if($('#'+id1).css('display')=='none'){
            $('#petra_animate_box').queue(function(){
                $('#'+id1).fadeIn(500, function(){
                    $('#'+id1).css('background-image', 'url(images/petra_city_light.png)');
                });
                $(this).dequeue();
            });
        }
    }
    return $('#'+id1);
}

function citypairs() {
    
    if($('div.petra_city:visible').length>17) {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, 2000, 2000);
        $('div.petra_city').css('display','none');
        $('div.petra_city').css('background-image', 'none');
    }

    var fisrt_city = getonecity();
    var second_city = getonecity();

    while ($(fisrt_city).attr('id')==$(second_city).attr('id')){
        second_city = getonecity();
    }
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");

    var x1=removepx($(fisrt_city).css('left'))+9;
    var y1=removepx($(fisrt_city).css('top'))-$('#petra_main_menu_box').height()+9;
    var x2=removepx($(second_city).css('left'))+9;
    var y2=removepx($(second_city).css('top'))-$('#petra_main_menu_box').height()+9;

    var city_arс = projectarc(x1, y1, x2, y2);

    var xc = city_arс[4];
    var yc = city_arс[5];

    var t_start = Math.acos((2*(x1-xc))/(2*Math.sqrt((x1-xc)*(x1-xc)+(y1-yc)*(y1-yc))));

    if(y1<yc) {
        t_start =2*Math.PI-t_start;
    }

    var t_end = Math.acos((2*(x2-xc))/(2*Math.sqrt((x2-xc)*(x2-xc)+(y2-yc)*(y2-yc))));

    if(y2<yc) {
        t_end =2*Math.PI-t_end;
    }

    var rgb_arr = hsvToRgb(Math.round(Math.random()*360),90,90);

    ctx.strokeStyle = "rgba("+rgb_arr[0]+","+rgb_arr[1]+","+rgb_arr[2]+","+"0.5)";
    
    ctx.beginPath();
    if((Math.abs(t_start-t_end))>Math.PI){
        ctx.arc(city_arс[4], city_arс[5], city_arс[8],Math.max(t_start, t_end),Math.min(t_start, t_end), false);
    } else {
        ctx.arc(city_arс[4], city_arс[5], city_arс[8],Math.min(t_start, t_end),Math.max(t_start, t_end), false);
    }
    ctx.stroke();
    ctx.closePath();
}

/**
* Converts HSV to RGB value.
* @param {Integer} h Hue as a value between 0 - 360 degrees
* @param {Integer} s Saturation as a value between 0 - 100 %
* @param {Integer} v Value as a value between 0 - 100 %
* @returns {Array} The RGB values  EG: [r,g,b], [255,255,255]
*/
function hsvToRgb(h,s,v) {

    s = s / 100;
    v = v / 100;

    var hi = Math.floor((h/60) % 6);
    var f = (h / 60) - hi;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);

    var rgb = [];

    switch (hi) {
        case 0:
            rgb = [v,t,p];
            break;
        case 1:
            rgb = [q,v,p];
            break;
        case 2:
            rgb = [p,v,t];
            break;
        case 3:
            rgb = [p,q,v];
            break;
        case 4:
            rgb = [t,p,v];
            break;
        case 5:
            rgb = [v,p,q];
            break;
    }

    var r = Math.min(255, Math.round(rgb[0]*256)),
    g = Math.min(255, Math.round(rgb[1]*256)),
    b = Math.min(255, Math.round(rgb[2]*256));

    return [r,g,b];

}

/**
* Converts RGB to HSV value.
*
* @param {Integer} r Red value, 0-255
* @param {Integer} g Green value, 0-255
* @param {Integer} b Blue value, 0-255
* @returns {Array} The HSV values EG: [h,s,v], [0-360 degrees, 0-100%, 0-100%]
*/
function rgbToHsv(r, g, b) {

    r = (r / 255);
    g = (g / 255);
    b = (b / 255);

    var min = Math.min(Math.min(r, g), b),
    max = Math.max(Math.max(r, g), b),
    delta = max - min;

    var value = max,
    saturation,
    hue;
    // Hue
    if (max == min) {
        hue = 0;
    } else if (max == r) {
        hue = (60 * ((g-b) / (max-min))) % 360;
    } else if (max == g) {
        hue = 60 * ((b-r) / (max-min)) + 120;
    } else if (max == b) {
        hue = 60 * ((r-g) / (max-min)) + 240;
    }
    if (hue < 0) {
        hue += 360;
    }
    // Saturation
    if (max == 0) {
        saturation = 0;
    } else {
        saturation = 1 - (min/max);
    }
    return [Math.round(hue), Math.round(saturation * 100), Math.round(value * 100)];
}