function timeLine(){
this.emptyYears = 1;//показывать пустые года
this.tenYears = 0;//показывать таймлайн в режиме десятков
this.timelineWidth = '100%';//ширина таймлайна(поля с точками)
this.timelineBorder = '0';//бордюр для таймлайна
this.timelineSpacing = '2px';//расстояние между полоской годов, блоком названий категорий и блоком ячеек
this.groupWidth = '160px';//ширина блока названий категорий
this.groupHeight = '86px';//высота "ячеек" таймлайна
this.yearWidth = '40px';//ширина колонки года
this.yearBackgroundColor = 'silver';//фоновый цвет полоски годов
this.yearForegroundColor = 'gray';//цвет шрифта годов
this.yearFont = 'bold 10px Arial';//шрифт годов
this.yearArrowsColor = 'gray';//цвет стрелок в полоске годов
this.yearArrowsOpacity = '70';//степень прозрачности у стрелок годов
this.yearArrowsHoverColor = 'white';//цвет стрелок в полоске годов при наведении
this.yearArrowsHoverOpacity = '100';//степень прозрачности у стрелок годов при наведении
this.pointWidth = '6px';//ширина точек
this.pointHeight = '6px';//высота точек
this.pointBackground = 'transparent url(/images/points.gif) no-repeat center 0px';//фоновый рисунок у точек
this.pointHoverBackground = 'transparent url(/images/points.gif) no-repeat center -6px';//фоновый рисунок у точек при наведении курсора
this.pointPadding = '0px';//отступ точек от границ года
this.pointMargin = '1px';//отступ у точек
this.crosshairColor = 'white';//цвет целеуказателя
this.crosshairHoverColor = 'white';//цвет целеуказателя при наведении на точку
this.crosshairOpacity = '50';//степень прозрачности целеуказателя
this.crosshairSize = '1px';//ширина линий целеуказателя
this.crosshairHoverSize = '3px';//ширина линий целеуказателя при наведении на точку
this.helpDelay = 25;//время появления подсказки
this.helpBorderColor = '#3c3c3c';//цвет бордюра у подсказок
this.helpBackgroundColor = 'white';//фоновый цвет подсказок
this.helpShadowOffsetX = '3px';//смещение тени подсказки по x-координате
this.helpShadowOffsetY = '3px';//смещение тени подсказки по y-координате
this.helpShadowColor = '#3c3c3c';//цвет тени
this.helpShadowOpacity = '40';//прозрачность тени
/*1.цвет для основы построениия градиентного фона для категории
2.цвет шрифта у названий категорий
3.цвет нечетных ячеек
4.цвет четных ячеек*/
this.group=[
'',
'black white #E0E0E0 #F2F2F2',
'red white #FFA4A4 #FFD9D9',
'#0066CC white #7AAACD #B8D1E4',
'#009933 white #98D8AB #C2E7C9',
'#FF9900 white #FFCE84 #FAE0C7',
'#663399 white #C5A8E1 #DDCCEE',
'#FF33CC white #FFB3EC #FFD5F4'
];
this.id='tl';
for(var i=0;i<16;i++){this.id+=parseInt(Math.random()*16).toString(16)}
var id=this.id;
this.transGradient=function(color){
color=color||'black';var g;
if(!window.stop){
g=document.createElement('div');
g.style.background=color;
g.style.filter='alpha(style=1,opacity=0,finishOpacity=100)';
}
else{
g=document.createElement('canvas');
if(g&&g.getContext){
g.style.background='transparent';
var gc=g.getContext('2d');
var gr=window.opera?gc.createLinearGradient(300,0,-70,0):window.console&&!window.dump?gc.createLinearGradient(300,0,0,0):gc.createLinearGradient(270,0,-30,0);
gr.addColorStop(0,color);
gr.addColorStop(1,'rgba(255,255,255,0)');
gc.fillStyle=gr;
gc.fillRect(0,0,300,300);
}
}
g.className='canvas';
return g
};
//создаем ноду таймлайна
this.node=document.createElement('div');
if(window.opera&&window.setDocument){
if(!document.getElementById('invisibleFix4OP9')){
var tmp=document.createElement('div');
tmp.style.display='none';
var head=document.getElementsByTagName('head')[0];
head.insertBefore(tmp,head.firstChild);
tmp.id='invisibleFix4OP9'
}
document.getElementById('invisibleFix4OP9').appendChild(this.node)
}
this.node.className=id;
this.node.innerHTML='';
var cH=50,cW=50,helptime=(!window.stop&&window.Element?12:24),offX,cS=0;
this.create=function(){
offX=parseInt(this.helpShadowOffsetX);
cH=parseInt(this.groupHeight);
cW=parseInt(this.yearWidth);
cS=Math.floor(parseInt(this.crosshairSize)/2);
helptime=parseInt(this.helpDelay);
if(!window.stop&&window.Element){helptime/=helptime}
this.style='';
for(var i=1,tmp,gl=this.group.length;i-1?-1:1;
function scroll_go(){
if(timeLine.SCROLL){
ys.parentNode.scrollLeft+=20*way;
timeLine.scrolltimer=setTimeout(scroll_go,100);
}
else{timeLine.SCROLL_CLOSE();clearTimeout(timeLine.scrolltimer);timeLine.scrolltimer=null}
}
timeLine.SCROLL=1;scroll_go();
return!1
};
a_l.onclick=a_r.onclick=function(){return!1};//IEfix
var ps=this.node.getElementsByTagName('table')[0],
t_l=ps.nextSibling,t_t=t_l.nextSibling,t_r=t_t.nextSibling,t_b=t_r.nextSibling,
WK=window.console&&!window.dump&&window.stop&&!window.opera,ng=!WK;
ps.tW=ps.offsetWidth;ps.tH=ps.offsetHeight;//fix4IE8
ps.onmouseover=function(e){
this.tW=this.offsetWidth;this.tH=this.offsetHeight
};//fix4IE8
var max=Math.max;//fix4IE8
ps.onmousemove=function(e){
e=e||event;
var eT=e.target||e.srcElement,eTN=(eT.tagName||'').toLowerCase();
var eX=(e.layerX||e.offsetX||0),eY=(e.layerY||e.offsetY||0);
if(eTN!='td'){
eX=eX+eT.offsetLeft+(ng?0:eT.offsetParent.offsetLeft);eY=eY+eT.offsetTop+(ng?0:eT.offsetParent.offsetTop);
eT=eT.parentNode.parentNode;
}
else if(WK){eX+=(WK?this.parentNode.scrollLeft:0)}
var eX2=max(eX+(ng?eT.cellIndex*cW:0),0),eY2=max(eY+(ng&&eT.parentNode?eT.parentNode.rowIndex*cH:0),0);
t_l.className=t_r.className=t_b.className=t_t.className=eTN!='td'?'target_hover':'target'
t_l.style.width=max(eX2-12,0)+'px';
t_r.style.top=t_l.style.top=(eY2-cS)+'px';
t_r.style.left=(eX2+12)+'px';
t_r.style.width=max(this.tW-(eX2+12),0)+'px';
t_b.style.left=t_t.style.left=(eX2-cS)+'px';
t_t.style.height=max(eY2-12,0)+'px';
t_b.style.top=(eY2+12)+'px';
t_b.style.height=max(this.tH-(eY2+12),0)+'px';
t_t.style.visibility=t_l.style.visibility=t_r.style.visibility=t_b.style.visibility='visible';
};
ps.onmouseout=function(e){
e=e||event;e.trg=e.toElement;
//fix4IE8
this.tW=this.offsetWidth;this.tH=this.offsetHeight;
//fix4IE8
if(!window.stop&&window.Element&&e.trg&&e.trg.className=='point'){return}
t_l.style.visibility=t_t.style.visibility=t_r.style.visibility=t_b.style.visibility='hidden';
};
this.categories={};//категории и их порядковый номер {'Mix':1,'New':2}
this.categoriesCount=0;//кол-во категорий в таймлайне
this.years={};//года {1980:{},'-1':{}};
this.startYear=null;
//добавление новой категоии, x - название категории
this.addCategory=function(x,y){
//если категория уже существует выходим из ф-ции
if(this.categories[x]){return}
//добавляем новую строку в таблицу пойнтов
var tb=this.node.getElementsByTagName('table')[0].tBodies[0];
var newRow=tb.insertRow(tb.rows.length);
//если уже есть категории заполянем пустыми ячейками новую строку, чтоб в ней их было столько же сколько в других строках
if(tb.rows.length>1){
for(var i=0,cl=tb.rows[0].cells;cl[i];i++){
var tmp=newRow.insertCell(i);
if(cl[i].className=='ev'){tmp.className='ev'}
tmp.innerHTML=''
}
}
//добавляем новую категорию в список
var newCat=this.node.getElementsByTagName('ul')[0];
newCat=newCat.insertBefore(document.createElement('li'),newCat.lastChild)
newCat.innerHTML=''+x+'';
//назначаем нужные классы
newRow.className=newCat.className='c'+(++this.categoriesCount);
//создаем полупрозрачный градиент
var groupColors=this.group[this.categoriesCount]||this.group[1];
var g=this.transGradient(groupColors.split(' ')[0]);
newCat.appendChild(g);
this.categories[x]=this.categoriesCount;
//если категории заданы, то показываем блок категорий
if(this.categoriesCount>1||!this.categories['other']){
this.node.getElementsByTagName('ul')[0].style.display='block';
var ls=this.node.lastChild.style;
ls.paddingLeft=(parseInt(this.groupWidth)+parseInt(this.timelineSpacing))+'px';
ls.marginLeft=parseInt(this.groupWidth)*-1+'px'
}
};
//добавление нового года, х - год из 4-цифр, можно номером или строкой
this.addYear=function(x){
x=parseInt(x);//переводим строку в числовой тип
if(this.years[x+'']){return this.years[x+'']}//если такой год уже есть, выходим
//делаем рекурсивные запуски, чтоб создать промежуточные годы
if(this.emptyYears&&this.startYear!==null){this.addYear(x';
if(ty.even){nCY.className='ev'}
return this.years[x+'']
};
this.catyear={};
//добавление нового события, x - дата в формате 'гггг.мм.дд', y - описание события(html-строка), z - категория
this.addPoint=function(x,y,z,f){
z=z||'other';x=x||'';f=(f||x||'');
//если задана несуществующая категория, создаем ее
if(!this.categories[z]){this.addCategory(z)}
//преобразовываем дату, если она пришла из ф-ции парсинга
if(f){
var dR=Math.floor(Math.random()*30)||1;
var mR=Math.floor(Math.random()*12)||1;
x=f.replace(/\s+/g,'').replace(/[^\d\.]/,'-');
//11–12.2000->1.11.2000
x=x.replace(/^(\d{1,2})\-\d{1,2}\.(\d{4})$/,dR+'.$1.$2');
//2000-2002 -> 1.1.2000
x=x.replace(/^(\d{4})(\-\d{4}|.{0})$/,dR+'.'+mR+'.$1');
//12.2000 | 12.2000-12.2002 | 12.2000-2002 -> 1.12.2000
x=x.replace(/^(\d{1,2}\.\d{4})((\-(\d{1,2}\.|.{0})\d{4})|.{0})$/,dR+'.$1');
//30–31.12.2000->30.12.2000
x=x.replace(/^(\d{1,2})\-\d{1,2}\.(\d{1,2}\.\d{4})$/,'$1.$2');
//30.12–31.12.2000->30.12.2000
x=x.replace(/^(\d{1,2}\.\d{1,2})\-\d{1,2}\.\d{1,2}\.(\d{4})$/,'$1.$2');
//30.12.2000-30.12.2002->30.12.2000
x=x.replace(/^(\d{1,2}\.\d{1,2}\.\d{4})((\-\d{1,2}\.\d{1,2}\.\d{4})|.{0})$/,'$1');
//30.12.2000->2000.12.30
//alert(f+'\n'+x)
}
if(f){x=x.replace(/^(.*)\.(\d{1,2})\.(\d{4})$/,'$3.$2.$1')}
var date=x.split('.');
if(!date||!date.join||date.length!==3){alert('Date Format Error!')}
//создаем пойнт
nP=document.createElement('a');
if(!WK){nP.href='#'}
nP.className='point';
//преобразуем диапазон чисел в четкое число
if(date[2].indexOf('-')>0){
date[2]=date[2].split('-');
date[2]=parseInt(date[2][0])+Math.round(Math.abs(date[2][1]-date[2][0])/2)
}
if(!this.catyear[z+'-'+date[0]]){this.catyear[z+'-'+date[0]]={top:[],left:[]}}
var dt=date[2];
while(this.catyear[z+'-'+date[0]].top[dt]){date[2]>15?dt--:dt++}
this.catyear[z+'-'+date[0]].top[dt]=1;
var dl=date[1];
while(this.catyear[z+'-'+date[0]].left[dl]){date[1]>6?dl--:dl++}
this.catyear[z+'-'+date[0]].left[dl]=1;
nP.style.top=(dt==1?dt:dt*2.5)+'px';
nP.style.left=(dl==1?dl:dl*2.5)+'px';
//создаем к пойнту подсказку
var hlp=document.createElement('div');
hlp.className=id+'_help';
hlp.style.visibility='hidden';
hlp.innerHTML='';
document.body.appendChild(hlp);
nP.help=hlp;
hlp.lastChild.firstChild.onmouseover=function(e){
if(timeLine.timer){clearTimeout(timeLine.timer);timeLine.timer=null}
};
this.cellIndex=function(t){
var i=0;
while(t&&(t=t.previousSibling)){i++}
return i
};
//открытие подсказки
nP.onmouseover=function(e){
e=e||event;
var hlp=this.help;
//если кликнули по этому же пойнту, выходим
//if(hlp==timeLine.HELP){return};
timeLine.HELP_CLOSE();//закрываем старую, если открыта
hlp.lastChild.firstChild.onmouseover();
timeLine.HELP=hlp;
var sY=document.body.scrollTop||document.documentElement.scrollTop,sX=document.body.scrollLeft||document.documentElement.scrollLeft;
//получаем координаты клика относительно страницы
e.X=e.pageX||e.clientX+sX;e.Y=e.pageY||e.clientY+sY;
var H=hlp.offsetHeight;
var shadow=hlp.firstChild,block=hlp.lastChild,shadow_arrow=shadow.lastChild.previousSibling,block_arrow=block.lastChild;
var where=((e.Y-sY)-H)<0?'top':'bottom';
shadow.className=id+'_help_shadow '+id+'_help_'+where;
block.className=id+'_help_block '+id+'_help_'+where;
shadow_arrow.style.left=block_arrow.style.left=block_arrow.previousSibling.style.left=(((e.X-sX)-hlp.offsetWidth/2)<0?10:hlp.offsetWidth/2-8)+'px';
//открываем подсказку внизу если вверху она будет обрезана окном браузера, иначе открываем вверху подсказку
hlp.style.top=(where=='top'?e.Y+10:(e.Y-H)-10)+'px';
//открываем подсказку слева по центру если, справа она будет обрезана окном браузера, иначе открываем справа подсказку
hlp.style.left=(((e.X-sX)-hlp.offsetWidth/2)<0?e.X-16:e.X-hlp.offsetWidth/2)+'px';
hlp.style.visibility='visible';
hlp.style.overflow='hidden';
hlp.style.height='20px';
hlp.style.width=hlp.offsetWidth+offX+'px';
function help_open(){
if(hlp.offsetHeight/ig,'');
arr=arr.replace(/\s+/ig,' ').match(/]*>(.*?)<\/div>/ig);
if(arr[0]){
for(var i=arr.length;i--;){
arr[i]=arr[i].replace(/(]*>\s*(\s*[\d\.]*(\s*\W\s*|.{0})[\d\.]+\s+|.{0})(.*)<\/h[1-6]>(.*)<\/div>)/i,'this.addPoint(\'$3\',\'$1\',\'$4\',\'$5\');')
}
eval(arr.join(''))
}
if(this.tenYears){this.tens()}
};
this.background=function(x,y){
for(var rl=ps.rows.length,i=0;i0){
var pre=ar[i-1],pref=pre.firstChild,ten1=slf.innerHTML*1,ten2=pref.innerHTML*1;
ten1=ten1-ten1%10;ten2=ten2-ten2%10;
if(ten1!==ten2){
slf.innerHTML=ten1
}
else{slf.innerHTML=''}
}
else{
slf.innerHTML=''
}
}
this.background(ar[i].cellIndex||this.cellIndex(ar[i]),ev)
if(parseInt(slf.innerHTML)%10==0){
if(!window.stop&&!window.Element){
slf.style.position='absolute';
slf.style.marginTop='2px';
}
slf.style.marginLeft='-12px';
ev=ev=='ev'?'':'ev';
}
}
};
return this
};
timeLine.HELP=timeLine.SCROLL='';
timeLine.addEvent=function(tt,ev,fu){
if(tt.addEventListener){tt.addEventListener(ev,fu,!1)}
else if(tt.attachEvent){tt.attachEvent('on'+ev,fu)}
};
//при клике на документ последняя открытая подсказка должна закрыться
timeLine.HELP_CLOSE=function(e){if(timeLine.HELP){var hlp=timeLine.HELP;hlp.style.visibility='hidden';hlp.style.top=hlp.style.left='-5000px';timeLine.HELP=null}};
timeLine.SCROLL_CLOSE=function(e){if(timeLine.SCROLL){timeLine.SCROLL=null}};
timeLine.addEvent(document,'mouseup',timeLine.SCROLL_CLOSE);