Calendrier JS

Bonjour, bonjour!!!

Alors voilà... je suis en train de faire un calendrier js basé sur la librairie jquery... je sais je sais, il en existe déjà des centaines.... Bref c'est toujours bien d'apprendre à en faire non?! d'ailleurs je débute, alors on n'se moque pas :D

Celui-ci à l'avantage de mettre à jour autant de forme qu'on le souhaite (2 actuellement, mais pas compliqué d'en rajouter +)

Donc il est pas tout à fait terminé, me manque pas grand chose, juste quelques trucs, du style qu'actuellement il commence toujours par lundi :D
En fait ma question, c'est qu'en pensez-vous pour les dignes courageux qui oseront essayer de le comprendre...
Car il me semble que c'est une usine à gaz.... donc est-ce que mon impression est bonne, et surtout; dois-je continuer plus loin, ou pas :D

Donc le formulaire :

<tr>
<td class='title'>Start date :</td><td><input id='input_start_date' type='text' name='start_date' maxlength='7' value='' onclick="open_calendar(this)">    <img id='img_start_date' src='image/calendar.gif' onclick="open_calendar(this)">
</td>
</tr>
<tr>
<td class='title'>End date :</td><td><input id='input_end_date' type='text' name='end_date' maxlength='7' value='' onclick="open_calendar(this)">    <img id='img_end_date'src='image/calendar.gif' onclick="open_calendar(this)">
</td>
</tr>



Et le calendrier.js

function open_calendar(strthis)
{
var element_clicked = strthis.id;//On récupère dans la variable "element_clicked" l'ID de l'image ou du form où l'utilisateur a clické, afin de définir plus tard quel champ remplir (start_date ou end_date)

empty_calendar();//On vide le calendrier.
calendar(element_clicked);//On créer le contenu du calendrier.
animate_calendar(element_clicked);//Puis on affiche l'apparition du calendrier.
}

/*******************************************/
/*****************DEFINE********************/
/*******************************************/

function calendar(element_clicked)
{
var today = new Date();//Ouvre l'objet date, avec la date du jour.
var today_date = today.getDate();//Retourne le jour sur 2 chiffres.
var today_year = today.getYear();//Retourne l'année sur 4 chiffres.
var today_month = today.getMonth();//Retourne un nombre compris entre 1 et 12.
var previous_or_next_month = 0;//Variable qui contiendra "less" ou "more", quand on click sur - ou sur + pour changer les mois. Au lancement du calendrier elle vaut 0.

display_calendar /***TODAY MONTH + YEAR***//********DAY GRID*******/
(
element_clicked,
month
(
previous_or_next_month,
today_month
),
year
(
previous_or_next_month,
today_month,
today_year
),
display_day_grid_tr
(
element_clicked,
month
(
previous_or_next_month,
today_month
),
year
(
previous_or_next_month,
today_month,
today_year
),
nb_days
(
month
(
previous_or_next_month,
today_month
),
year
(
previous_or_next_month,
today_month,
today_year
)
)
)
);

display_day_list(); /********DAY LIST********/
display_today(element_clicked,today_date,today_month,today_year);/*********TODAY*********/
}

//Quand le user a fait son choix, inscription du choix dans le bon formulaire et fermeture du calendrier.
//STRTHIS est la variable qui contient une chaine de caractère ||date choisi de l'utilisateur + : + formulaire à remplir||
//La chaine est splité au ":" puis envoyé dans une série de test.
function define_input(strthis)
{
var temp = strthis.id.split(":");//On split la chaine, an récupère la date dans la 1ère case et l'élément clické dans la seconde.

if((temp[1]=="input_start_date") || (temp[1]=="img_start_date"))
{
$("#input_start_date").empty();
$("#input_start_date").val(temp[0]);//Si c'est start_date, on insère la date dans le bon form....
}
else
{
$("#input_end_date").empty();
$("#input_end_date").val(temp[0]);
}

close_calendar();//Fermeture du calendrier.
}

/*******************************************/
/*****************DISPLAY*******************/
/*******************************************/

//On affiche la première ligne du calendrier : Mois en cours + Année.
function display_calendar(element_clicked,today_month,today_year)
{
var months_list = ['January','February','March','April','May','June','July','August','September','October','November','December'];

if((element_clicked=="input_start_date") || (element_clicked=="img_start_date") || (element_clicked=="input_end_date") || (element_clicked=="img_end_date")) element_clicked = element_clicked;
else element_clicked = element_clicked.id;

$("#calendar_month").empty();//Bon courage pour la ligne du dessous, personnellement j'en ai pas pour la commenter :-D Se reporter à la fonction "calendar" et regarder la structure de la fonction appelée "display_calendar"....
$("#calendar_month").append("<table><tr><td id='align_less'><img id='less' src='image/less.png' onclick='display_calendar("+element_clicked+",month(this,"+today_month+"),year(this,"+today_month+","+today_year+"),display_day_grid_tr("+element_clicked+","+today_month+","+today_year+",nb_days(month(this,"+today_month+"),year(this,"+today_month+","+today_year+"))))'></td><td id='align_month'><b>"+months_list[today_month]+"</b></td><td id='align_year'><b>"+today_year+"</b></td><td id='align_more'><img id='more' src='image/more.png' onclick='display_calendar("+element_clicked+",month(this,"+today_month+"),year(this,"+today_month+","+today_year+"),display_day_grid_tr("+element_clicked+","+today_month+","+today_year+",nb_days(month(this,"+today_month+"),year(this,"+today_month+","+today_year+"))))'></td></tr></table>");
}

//On affiche la seconde ligne, qui contient la liste des jours 'Mon','Tue','Wen','Thu','Fry','Sat','Sun'
function display_day_list()
{
var days = ['Mon','Tue','Wen','Thu','Fry','Sat','Sun'];

//On créer la seconde ligne; soit un tableau avec une ligne ayant pour id 'tr_day'
$("#calendar_day_list").append("<table><tr id='tr_day'></tr></table>");

//On créé le contenu de la seconde ligne; soit 7 colonnes qui contiennent les jours (Mon, Tue, Wen, Thu, Fry, Sat, Sun).
for(i=0;i<7;i++) $("#tr_day").append("<td><b>"+days[i]+"</b></td>");
}

//On créer la grille des jours... La fonction display_day_grid_tr sert à créer les lignes du tableau
//Ensuite on appelle la fonction display_day_grid_td qui sert à créer les colonnes (cases) du tableau
function display_day_grid_tr(element_clicked,get_month,get_year,nb_days)
{
$("#calendar_day_grid").empty();
var i=0;//Lignes
var x=1;//Colonnes,
var y=7;//Cases maximum par lignes.

if((element_clicked=="input_start_date") || (element_clicked=="img_start_date") || (element_clicked=="input_end_date") || (element_clicked=="img_end_date")) element_clicked = element_clicked;
else element_clicked = element_clicked.id;

//On créer un tableau ayant pour id 'table_grid' qui contiendra 35 cases.
$("#calendar_day_grid").append("<table id='table_grid'></table>");

for(i=0;i<5;i++)//Pour les lignes
{
$("#table_grid").append("<tr id='tr_grid_"+i+"'></tr>");//On créer 5 lignes.

display_day_grid_td(i,x,y,element_clicked,get_month,get_year,nb_days,start_day());//Pour les colonnes

x+=7;
y+=7;
}
}

function display_day_grid_td(i,x,y,element_clicked,get_month,get_year,get_nb_days,get_start_day)
{
var today = new Date();//Ouvre l'objet date, avec la date du jour.
var today_date = today.getDate();//Retourne le jour sur 2 chiffres.
var today_month = today.getMonth();//Retourne un nombre compris entre 1 et 12.

get_month++;

//Pour chaque ligne (i), on créer des colonnes (x), jusqu'à atteindre le nombre de jours maximum(y);
for(x=x;x<=y;x++)//Pour les colonnes
{
if(x>get_nb_days)
{
y=35-get_nb_days;
for(x=1;x<=y;x++) $("#tr_grid_"+i).append("<td class='td_grid_off'>"+x+"</td>");//Si on a atteint le nombre de jours dans le mois, on repasse à 1 et on passe en gris foncé les cases du mois suivant.
}
else if(x<get_start_day) $("#tr_grid_"+i).append("<td class='td_grid_off'>"+x+"</td>");
else if(x==today_date) $("#tr_grid_"+i).append("<td id='"+x+"/"+get_month+"/"+get_year+":"+element_clicked+"' class='td_grid_today' onclick='define_input(this)'>"+x+"</td>");//Si c'est le jour d'aujourd'hui, la classe CSS est différente (la case sera en orange)
else $("#tr_grid_"+i).append("<td id='"+x+"/"+get_month+"/"+get_year+":"+element_clicked+"' class='td_grid' onclick='define_input(this)'>"+x+"</td>");//Sinon les cases sont en gris clair.
}
}

function display_today(element_clicked,today_date,today_month,today_year)
{
today_month++;//On incrémente le mois (tableau commence à 0, janvier est = à 1) avant de l'inscrire dans le formulaire.

//On créer la dernière ligne, qui contient le mot 'today' et qui, sur un onclick, inscrit dans l'input la date du jour.
$("#calendar_today").append("<table><tr><td id='"+today_date+"/"+today_month+"/"+today_year+":"+element_clicked+"' class='td_today' onclick='define_input(this)'><b>Today</b></td></tr></table>");
}

/*******************************************/
/****************ANIMATE*******************/
/*******************************************/

function hide_calendar()//On cache le calendrier.
{
$("#calendar").hide();
}

function empty_calendar()//On vide le calendrier.
{
$("#calendar_month").empty();
$("#calendar_day_list").empty();
$("#calendar_day_grid").empty();
$("#calendar_today").empty();
}

function animate_calendar(element_clicked)//Animation d'ouverture du calendrier,
{
if((element_clicked=="input_start_date") || (element_clicked=="img_start_date")) $("#calendar").animate({top: 318, left: 842, opacity: 'show'}, 600);
else if((element_clicked=="input_end_date") || (element_clicked=="img_end_date")) $("#calendar").animate({top: 345, left: 842, opacity: 'show'}, 600);
}

function close_calendar()//Animation de fermeture du calendrier.
{
$("#calendar").animate({left: 0, top: 0, opacity: 'hide' }, 600);
}

/*******************************************/
/*******************************************/
/*******************************************/

function month(previous_or_next_month,today_month)
{
if((previous_or_next_month.id=="more") && (today_month==11)) today_month=0; //Si on click sur + et que le mois est décembre, on passe à janvier.
else if((previous_or_next_month.id=="less") && (today_month==0)) today_month=11; //Sinon si on click sur - et que le mois est janvier, on passe à décembre.
else if(previous_or_next_month.id=="more") today_month++; //Sinon si on click sur + on passe au mois suivant.
else if(previous_or_next_month.id=="less") today_month--; //Sinon si on click sur - on passe au mois précédent.

return today_month;
}

function year(previous_or_next_month,today_month,today_year)
{
if((previous_or_next_month.id=="more") && (today_month==11)) today_year++; //Si on click sur + et que le mois est décembre, on passe à l'année suivante.
else if((previous_or_next_month.id=="less") && (today_month==0)) today_year--; //Sinon si on click sur - et que le mois est janvier, on passe à l'année précédente.

return today_year;
}

function nb_days(get_month,get_year)
{
var nb_days_list = [31,28,31,30,31,30,31,31,30,31,30,31];

if(((get_year % 4 == 0) && (get_year % 100 != 0)) || (get_year % 400 == 0)) nb_days_list[1] = 29; //Calcul des années bissextiles.

var nb_days = nb_days_list[get_month];

return nb_days;
}

function start_day()
{
var today = new Date();//Ouvre l'objet date, avec la date du jour.
var today_day = today.getDay();//Retourne le jour sur 1 chiffre qui correspond au jour en cours ('Mon','Tue','Wen','Thu','Fry','Sat','Sun')
var today_date = today.getDate();//Retourne le jour sur 2 chiffres.
var days = ['Mon','Tue','Wen','Thu','Fry','Sat','Sun'];
var start_day;

for(i=today_date;i!=0;i--)
{
if(i==today_date) days[i] = [today_day-1]; //On initialise le tableau days avec le jour en cours.
if(days[i]==days[0]) days[i]==days[6];
start_day=days[i-1];
}

return start_day;
}

pour l'indentation je ne sais pas comment ça marche sur "comment ça marche", donc si vous voulez le fichier bien indenté je peux toujours le laisser...

Merci à vous, et surtout aux plus courageux :)