var marginLeft = 0;
var regFrontWidth = 556;
var regBackWidth = 556;
var imagesDim = new Array();
//jQuery('#plate_type_name').val('standard');
imagesDim['standard'] = [657, 153, 657, 153];
imagesDim['st4x4'] = [519, 124, 295, 219];
imagesDim['stlarge'] = [616, 145, 630, 192];
imagesDim['moto'] = [0, 0, 428, 339];
imagesDim['im330x152'] = [344, 169, 344, 169];
imagesDim['im330x165'] = [319, 169, 319, 169];
imagesDim['im330x178'] = [297, 169, 297, 169];
imagesDim['im330x102'] = [263, 169, 263, 169];
imagesDim['st330x152'] = [612, 146, 397, 193];
imagesDim['st330x165'] = [586, 139, 379, 199];
imagesDim['st330x178'] = [560, 132, 363, 204];
imagesDim['st330x203'] = [517, 124, 335, 213];
imagesDim['others_astonmartin'] = [587, 138, 681, 195];
imagesDim['others_jaguarsaloon'] = [589, 127, 608, 183];
imagesDim['others_jaguar2004'] = [590, 128, 617, 148];
imagesDim['stlarge'] = [617, 145, 632, 192];

var regFrontWidthArray1 = [556, 418, 511, 243, 218, 196, 162, 511, 485, 459, 416, 486,488,514,489,516]; //for each width put in the array width-101
var regFrontWidthArray2 = [606, 468, 565, 293, 268, 246, 212, 561, 535, 509, 466, 536,538,564,539,566]; //for each width put in the array width-51
var regBackWidthArray1 = [556, 194, 529, 327, 243, 218, 196, 162, 296, 278, 262, 234, 580,507,516,531];
var regBackWidthArray2 = [606, 244, 579, 377, 293, 268, 246, 212, 346, 328, 312, 284, 630,557,566,581];

var plateType = '';
var othersImageName = '';
var sloganWidth = 0;
var badgeName = '';
var badgeColor = '';

function hide_badge() {
    // first plate
    jQuery('#front_badge').hide();
    if(jQuery('#front_right_border').is(':visible')) {
        jQuery('#front_left_border').show();
        setFrontAlignment(-51 + marginLeft, 610);
    }else {
        setFrontAlignment(0 + marginLeft, 610);
    }

    //second plate
    jQuery('#back_badge').hide();
    if(jQuery('#back_right_border').is(':visible')) {
        jQuery('#back_left_border').show();
        setBackAlignment(-51 + marginLeft, 610);
    }else {
        setBackAlignment(0 + marginLeft, 610);
    }

    //second plate
    jQuery('#others_back_badge').hide();
    jQuery('#text_div').css('float','none');
    setBackAlignment(-51 + marginLeft, 610);
}

function show_badge() {
    //first plate
    if(badgeName != '' && badgeName != 'transparent') {
        changeBadge('' + badgeName);
    }
    jQuery('#front_badge').show();
    jQuery('#front_left_border').hide();
    jQuery('#front_middle_border').css('padding-left', '0px');

    //second plate
    jQuery('#back_badge').show();
    jQuery('#back_left_border').hide();
    jQuery('#back_middle_border').css('padding-left', '0px');

    //second plate
    jQuery('#others_back_badge').show();
    jQuery('#text_div').css('float','left');
    appendDivsToContainer(50,12);

    setFrontAlignment(0 + marginLeft, 560);
    setBackAlignment(0 + marginLeft, 560);
}

function show_border(color) {
    //first plate
    if(!jQuery('#front_badge').is(":visible")) {
        jQuery('#front_left_border').show();
    }
    jQuery('#front_middle_border').css('border-color', color)
    jQuery('#front_right_border').show();
    if(jQuery('#front_badge').is(':visible')) {
        setFrontAlignment(0 + marginLeft, 560);
    } else {
        setFrontAlignment(-51 + marginLeft, 610);
    }
    if (plateType.substring(0, 6) == 'others') {
        jQuery('#others_back').css('background-image', 'url(\'images/plates/' + othersImageName + '_border.png\')');
    } else {
        //second plate
        if(!jQuery('#back_badge').is(":visible")) {
            jQuery('#back_left_border').show();
        }
        jQuery('#back_right_border').show();
        jQuery('#back_middle_border').css('border-color', color);
        if(jQuery('#back_badge').is(':visible')) {
            setBackAlignment(0 + marginLeft, 560);
        } else {
            setBackAlignment(-51 + marginLeft, 610);
        }
    }
}

function hide_border() {
    //first plate
    jQuery('#front_left_border').hide();
    jQuery('#front_middle_border').css('border-color', 'transparent');
    jQuery('#front_right_border').hide();
    setFrontAlignment(0 + marginLeft, 610);
    if (plateType.substring(0, 6) == 'others') {
        jQuery('#others_back').css('background-image', 'url(\'images/plates/' + othersImageName + '.png\')');
    } else {
        //second plate
        jQuery('#back_left_border').hide();
        jQuery('#back_middle_border').css('border-color', 'transparent');
        jQuery('#back_right_border').hide();

        setBackAlignment(0 + marginLeft, 610);
    }
}

function checkFrontBadgeVisibility() {
    if(jQuery('#front_badge').is(":visible")) {
        jQuery('#front_left_border').hide();
    }
}

function checkBackBadgeVisibility() {
    if(jQuery('#back_badge').is(":visible")) {
        jQuery('#back_left_border').hide();
    }
}

function setFrontAlignment(margin, width) {
    if(width == 560){
        if(jQuery.inArray(regFrontWidth, regFrontWidthArray2) != -1) {
            regFrontWidth -= 50;
        }
    } else {
        if(jQuery.inArray(regFrontWidth, regFrontWidthArray1) != -1) {
            regFrontWidth += 50;
        }
    }
    jQuery('#front_middle_border').css('margin-left', margin + 'px');
    jQuery('#front_middle_border').css('width', regFrontWidth + 4 + 'px');
    if(jQuery('#front_badge').is(":visible")) {
        jQuery('#front_plate_reg').css('width', regFrontWidth + 9 + 'px');
    } else {
        jQuery('#front_plate_reg').css('width', regFrontWidth + 18 + 'px');
    }
    if(margin == 0){
        jQuery('#front_plate_reg').css('margin-left', '0px');
    } else {
        jQuery('#front_plate_reg').css('margin-left', '-7px');
    }
}

function setBackAlignment(margin, width) {
    if(width == 560){
        if(jQuery.inArray(regBackWidth, regBackWidthArray2) != -1) {
            regBackWidth -= 50;
        }
    } else {
        if(jQuery.inArray(regBackWidth, regBackWidthArray1) != -1) {
            regBackWidth += 50;
        }
    }
    jQuery('#back_middle_border').css('margin-left', margin + 'px');
    jQuery('#back_middle_border').css('width', regBackWidth + 3 + 'px');
    if(jQuery('#back_badge').is(":visible")) {
        jQuery('#back_plate_reg').css('width', regBackWidth + 9 + 'px');
    } else {
        jQuery('#back_plate_reg').css('width', regBackWidth + 18 + 'px');
    }
    if(margin == 0){
        jQuery('#back_plate_reg').css('margin-left', '0px');
    } else {
        jQuery('#back_plate_reg').css('margin-left', '-7px');
    }
}

function regTypeShowHide (regType) {
    if(regType == 'pair') {
        jQuery('#plateF').show();
        jQuery('#plateB').show();
    } else if(regType == 'front') {
        jQuery('#plateF').show();
        jQuery('#plateB').hide();
    } else if(regType == 'back') {
        jQuery('#plateF').hide();
        jQuery('#plateB').show();
    }
}

function addFrontBrTag (regText) {
    var height = jQuery('#front_plate_reg').height();
    if(regText.length <= 4) {
        jQuery('#front_plate_reg').css('line-height', height + 'px');
    } else {
        jQuery('#front_plate_reg').css('line-height', Math.ceil(height/2) + 'px');
    }
    regText = regText.substring(0, 4) + '<br/>' + regText.substring(4,8);
    jQuery("#front_plate_reg").html(regText);
}

function addBackBrTag (regText) {
    var height = jQuery('#back_plate_reg').height();
    if(regText.length <= 4) {
        jQuery('#back_plate_reg').css('line-height', height + 'px');
    } else {
        jQuery('#back_plate_reg').css('line-height', Math.ceil(height/2) + 'px');
    }
    regText = regText.substring(0, 4) + '<br/>' + regText.substring(4,8);
    jQuery("#back_plate_reg").html(regText);
}

function removeFrontBrTag (regText) {
    if(jQuery("#front_plate_reg:contains('<br/>'")) {
        jQuery("#front_plate_reg").html(regText.replace('<br/>', ''));
    }
}

function removeBackBrTag (regText) {
    if(jQuery("#back_plate_reg:contains('<br/>'")) {
        jQuery("#back_plate_reg").html(regText.replace('<br/>', ''));
    }
}

function fontSize (type, regText) {
    var frontFontSize = '0px';
    var backFontSize = '0px';
    switch (type) {
        case 'standard':
            frontFontSize = '124px';
            backFontSize = '124px';
            removeFrontBrTag(regText);
            removeBackBrTag(regText);
            break;
        case 'st4x4':
            frontFontSize = '67pt';// '105pt';
            backFontSize = '67pt'; // '105pt';
            addBackBrTag(regText);
            break;
        case 'stlarge':
            frontFontSize = '110px';
            backFontSize = '119px';
            removeFrontBrTag(regText);
            removeBackBrTag(regText);
            break;
        case 'moto':
            backFontSize = '114pt';
            addBackBrTag(regText);
            break;
        case 'im330x152':
            frontFontSize = '86px'; //'80px';
            backFontSize = '86px'; //'80px';
            addFrontBrTag(regText);
            addBackBrTag(regText);
            break;
        case 'im330x165':
            frontFontSize = '86px';
            backFontSize = '86px';
            addFrontBrTag(regText);
            addBackBrTag(regText);
            break;
        case 'im330x178':
            frontFontSize = '86px';
            backFontSize = '86px';
            addFrontBrTag(regText);
            addBackBrTag(regText);
            break;
        case 'im330x203':
            frontFontSize = '75px';
            backFontSize = '74px';
            addFrontBrTag(regText);
            addBackBrTag(regText);
            break;
        case 'st330x152':
            frontFontSize = '88pt';
            backFontSize = '78pt';
            removeFrontBrTag(regText);
            addBackBrTag(regText);
            break;
        case 'st330x165':
            frontFontSize = '84pt';
            backFontSize = '81pt';
            removeFrontBrTag(regText);
            addBackBrTag(regText);
            break;
        case 'st330x178':
            frontFontSize = '79pt';
            backFontSize = '82pt';
            removeFrontBrTag(regText);
            addBackBrTag(regText);
            break;
        case 'st330x203':
            frontFontSize = '70pt';
            backFontSize = '79pt';
            removeFrontBrTag(regText);
            addBackBrTag(regText);
            break;
        case 'others_astonmartin':
            jQuery('#others_back_badge').css('margin-top','6px');
            jQuery('#others_back_badge').css('margin-left','50px');
            jQuery('#others_back_badge').css('height','152px');
            jQuery('#others_back_plate_reg').css('line-height','154px');
            jQuery('#others_back_plate_reg').css('height','154px');
            jQuery('#others_back_plate_reg').css('width','510px');
            jQuery('#others_back').css('width','662px');
            frontFontSize = '82pt';
            backFontSize = '85pt';
            removeFrontBrTag(regText);
            removeBackBrTag(regText);
            break;
        case 'others_jaguarsaloon':
            jQuery('#front_plate_reg').css('height','85px');
            jQuery('#front_plate_reg').css('font-size','87pt');
            frontFontSize = '82pt';
            jQuery('#others_back_badge').css('margin-top','7px');
            jQuery('#others_back_badge').css('margin-left','50px');
            jQuery('#others_back_badge').css('height','140px');
            jQuery('#others_back_plate_reg').css('line-height','154px');
            jQuery('#others_back_plate_reg').css('height','154px');
            jQuery('#others_back_plate_reg').css('width','500px');
            jQuery('#others_back').css('width','610px');
            backFontSize = '82pt';
            removeFrontBrTag(regText);
            removeBackBrTag(regText);
            break;
        case 'others_jaguar2004':
            jQuery('#front_plate_reg').css('height','88px');
            jQuery('#front_plate_reg').css('font-size','88pt');
            frontFontSize = '82pt';
            jQuery('#others_back_badge').css('margin-top','9px');
            jQuery('#others_back_badge').css('margin-left','50px');
            jQuery('#others_back_badge').css('height','139px');
            jQuery('#others_back_plate_reg').css('line-height','153px');
            jQuery('#others_back_plate_reg').css('height','153px');
            jQuery('#others_back_plate_reg').css('width','480px');
            jQuery('#others_back').css('width','618px');
            backFontSize = '80pt';
            removeFrontBrTag(regText);
            removeBackBrTag(regText);
            break;
        case 'others_rangeroverhse':
            frontFontSize = '130pt';
            backFontSize = '130pt';
            removeFrontBrTag(regText);
            removeBackBrTag(regText);
            break;
        default:
            frontFontSize = '124px';
            backFontSize = '124px';
            removeFrontBrTag(regText);
            removeBackBrTag(regText);
    }
    jQuery('#front_plate_reg').css('font-size', frontFontSize);
    
    jQuery('#back_plate_reg').css('font-size', backFontSize);
    jQuery('#others_back_plate_reg').css('font-size', backFontSize);
}

function changeSize(type, width1, height1, width2, height2, regType, frontfilename, backfilename, pic_index) { //regType specify : pair, front or back
    plateType = type;
	jQuery('#regType').val(regType);
    jQuery('#plate_type_name').val(type);
    jQuery('#plate_type_file').val(frontfilename);
    jQuery('#plate_pic_index').val(pic_index);
    jQuery('#plate_type_file_back').val(backfilename);
    jQuery('#plate_type_dimensions').val('front: '+width1+'x'+height1+', back:'+width2+'x'+ height2);
    //regTypeShowHide(regType);
    if(type == 'moto') {
        jQuery('#plateF').hide();
    } else {
//        jQuery('#plateF').show();
        jQuery('#plateB').show();
//        if(regType != 'back') {
//            jQuery('#plateF').show();
//        }
        
    }
	load_image('size', true);


    //var regText = jQuery.trim(jQuery("#back_plate_reg").text());
    //fontSize(type, regText);

    //functionToCall = 'changeSize(\'' + type + '\',' + width1 + ',' + height1 + ',' + width2 + ',' + height2 + ',\'' + regType + '\');';
    //savePlateType(functionToCall);
}

function appendDivsToContainer (width, height) {
    jQuery("#container_splitted").empty();
    //if (jQuery("#container_splitted:has('div')").length == 0) {
    if(plateType == 'others_astonmartin') {
        var divHtml = '<div class="tiny_div"><div>';
        var increment = 1;
        for (var i = 0; i < height; i++) {
            for (var j = 0; j < width; j++) {
                //if ((i >= j) || (i>height-3 && i<j+1 && j < width-20) || (j>3 && i<j-10)) {
                if ((i >= j) && (j < width-20)) {
                    divHtml = '<div class="tiny_div" style="background-color: transparent;"><div>';
                } /*else if (i>5 && j>i && j<=i+increment && j < width-20) {
                    divHtml = '<div class="tiny_div" style="background-color: transparent;"><div>';
                } */ else if (i==3 && j==4 || i==4 && j==5 || i==5 && j>=6 && j<=8 || i==6 && j>=7 && j<=9 || i==7 && j>=8 && j<=12 || i==8 && j>=9 && j<=15 || i==9 && j>=10 && j<=18 || i==10 && j>=11 && j<=21 || i==11 && j>=12 && j<=26 || i==12 && j>=13 && j<=29) {
                    divHtml = '<div class="tiny_div" style="background-color: transparent;"><div>';
                } else {
                    divHtml = '<div class="tiny_div" style="background-color:' + badgeColor + ';"><div>';
                }
                jQuery('#container_splitted').append(divHtml);
            }
            //increment += 0.7;
        }
    //}
    } else {
         var divHtml = '<div class="tiny_div"><div>';
        var increment = 1;
        for (var i = 0; i < height+2; i++) {
            for (var j = 0; j < width; j++) {
                //if ((i >= j) || (i>height-3 && i<j+1 && j < width-20) || (j>3 && i<j-10)) {
                if ((i >= j) && (j < width-20)) {
                    divHtml = '<div class="tiny_div" style="background-color: transparent;"><div>';
                } /*else if (i>5 && j>i && j<=i+increment && j < width-20) {
                    divHtml = '<div class="tiny_div" style="background-color: transparent;"><div>';
                } */ else if (i==3 && j==4 || i==4 && j==5 || i==5 && j>=6 && j<=8 || i==6 && j>=7 && j<=9 || i==7 && j>=8 && j<=12 || i==8 && j>=9 && j<=15 || i==9 && j>=10 && j<=18 || i==10 && j>=11 && j<=21 || i==11 && j>=12 && j<=26 || i==12 && j>=13 && j<=29 || i==13 && j>=14 && j<=31 || i==14 && j>=15 && j<=34) {
                    divHtml = '<div class="tiny_div" style="background-color: transparent;"><div>';
                } else {
                    divHtml = '<div class="tiny_div" style="background-color:' + badgeColor + ';"><div>';
                }
                jQuery('#container_splitted').append(divHtml);
            }
            //increment += 0.7;
        }
    }
}

function othersback (width2, height2) {
    //hide_badge();
    //hide_border();
    appendDivsToContainer(50,12);
    jQuery('#plate2').hide();
    jQuery('#others_back').show();
    othersImageName = plateType + '_' + width2 + 'x' + height2 + '_plate_back';
    jQuery('#others_back').css('background-image', 'url(\'images/plates/' + othersImageName + '.png\')');
    if (jQuery('#others_back').css('background-color') != '' && jQuery('#others_back').css('background-color') != 'transparent') {
        jQuery('#others_back').css('background-image', 'url(\'images/plates/' + othersImageName + '_border.png\')');
    }
    /*jQuery('#others_back').css('width', width2 + 'px');
    jQuery('#others_back').css('height', height2 + 'px');*/
    if(regBackWidth != width2-101 && regBackWidth != width2-51){
        if(jQuery('#others_back_badge').is(":visible")) {
            regBackWidth = width2-101;
        } else {
            regBackWidth = width2-51;
        }
    }
    //jQuery('#others_back_plate_reg').css('width', regBackWidth - 100 + 'px');
    //jQuery('#others_back_plate_reg').css('height', height2-43 + 'px');

    jQuery('#others_back_badge_image').css('margin-top', Math.round((height2-150)/2) + 'px');


    //jQuery('#others_back_plate_reg').css('line-height', height2-43 + 'px');
    //jQuery('#back_plate_reg').css('font-size', Math.round(width2/6) - 9 + 'px');

    jQuery('#others_back_badge_center').css('height', height2-43 + 'px');
}

function savePlateType (functionToCall) {
    jQuery.ajax({
       type: 	'POST',
       url: 	root_address + 'plate_type.php',
       data: 	'plateType=' + functionToCall,
       success: function(msg){
         //jQuery('#green_step_container').html(msg);
       }
    });
}

var badgeFunc;
var borderFunc;

function changeBadge (imageName) {
    jQuery('#badge_name').val(imageName);
    var src = 'images/badge/png/' + imageName + '.png';
    jQuery('#front_badge_image').attr("src", src);
    jQuery('#back_badge_image').attr("src", src);
    jQuery('#others_back_badge_image').attr("src", src);
    badgeName = imageName;
	load_image('badge', true);
}

function load_picker (isBadge) {
  if(isBadge){
      jQuery('#color_picker_container').empty().addColorPicker({
        clickCallback: badgeFunc = function(c) {
            //set color on hidden input
            if(c == 'transparent') {
                jQuery('#badge_name').val(c);
            }
            jQuery('#badge_color').val(c);
            // set color on firts badge
            jQuery('#front_badge_top').css('background-color',c);
            jQuery('#front_badge_center').css('background-color',c);
            jQuery('#front_badge_bottom').css('background-color',c);

            // set color on second badge
            jQuery('#back_badge_top').css('background-color',c);
            jQuery('#back_badge_center').css('background-color',c);
            jQuery('#back_badge_bottom').css('background-color',c);

            jQuery('#others_back_badge').css('background-color',c);
            //jQuery('.tiny_div').css('background-color',c);
            badgeColor = c;
			load_image('badge', true);
        }
      });
            
  } else {
	jQuery('#border_color_picker_container').empty().addBorderColorPicker({
            clickCallback: borderFunc = function(c) {
                //set color on hidden input
                jQuery('#border_color').val(c);

                //first plate
                //set color on left border
                jQuery('#front_left_border_top_l').css('background-color',c);
                jQuery('#front_left_border_top_r').css('border-color',c);
                jQuery('#front_left_border_center').css('border-color',c);
                jQuery('#front_left_border_bottom_l').css('background-color',c);
                jQuery('#front_left_border_bottom_r').css('border-color',c);

                //set color on middle border
                jQuery('#front_middle_border').css('border-color',c);

                //set color on bottom border
                jQuery('#front_right_border_top').css('background-color',c);
                jQuery('#front_right_border_center').css('border-color',c);
                jQuery('#front_right_border_bottom').css('background-color',c);

                //second plate
                //set color on left border
                jQuery('#back_left_border_top_l').css('background-color',c);
                jQuery('#back_left_border_top_r').css('border-color',c);
                jQuery('#back_left_border_center').css('border-color',c);
                jQuery('#back_left_border_bottom_l').css('background-color',c);
                jQuery('#back_left_border_bottom_r').css('border-color',c);

                //set color on middle border
                jQuery('#back_middle_border').css('border-color',c);

                //set color on bottom border
                jQuery('#back_right_border_top').css('background-color',c);
                jQuery('#back_right_border_center').css('border-color',c);
                jQuery('#back_right_border_bottom').css('background-color',c);

                jQuery('#others_back').css('background-color',c);
                if (c == 'transparent') {
                    jQuery('#others_back').css('background-image', 'url(\'images/plates/' + othersImageName + '.png\')');
                }
			    load_image('border', true);
            }
	});
  }
    }