hasWebkit = true;
scWidth = new Array();
useArr = new Array();
diff = 0;

visiContainer = 0;
picHeight = 0;

nowX = 0;

 // after generating and recieving last
// do some measurings
boxWidth = 0;
tableWidth = 0;
// need redundent first pic for simulating roundtrip

//box
wkParent = 'box'; 

wkContainer = 'scrollbox';
wkTable = 'scrollTable';

playSnd = 1;
playingSnd = '';

// manage timeouts and moving
actTablePos = 0;
nxtTablePos = 0;
actMousePos = 0;
tblPos = 0;
checkPos = false;

//________________________
// G E N E R A T E  H T M L
// INITIATE PRIMARY HTML CONTAINER
function initPics()
{
	origLen = imgArr.length-1;
	 // gen dynamic styleblock
	// for later purpose
	var head=document.getElementsByTagName('head')[0];
	var style=document.createElement('style');
	style.type='text/css';
	head.appendChild(style);
	
	
	divParams = new Array();
    divParams[0] = new Array('id',wkContainer);
    genElem(wkParent,"div",divParams);
	
	sndParams = new Array();
    sndParams[0] = new Array('id','volCtl');
    genElem(wkParent,"div",sndParams);
    
    ctlParams = new Array();
    ctlParams[0] = new Array('class','on');
    ctlParams[1] = new Array('id','ctlbut');
    ctlParams[2] = new Array('href','javascript:changeSnd("ctlbut")');
    genElem('volCtl',"a",ctlParams);
	
	var tbl = document.getElementById(wkContainer);
	boxWidth = tbl.clientWidth;
	
	// MOVE ACTIONS IN COMP AN SLATE/PAD/PHONE
	//
	if(TouchClient == false) tbl.onmousemove = mvTable;
	else 
	{
		// tbl.onmouseup = touchTable;
		// tbl.onmousedown = touchTable;
		// tbl.onclick = touchTable; 
			// onclick,onmousedown,onmouseup:
			// längerer down 
			// schiesst aber erst auf UP
		
    	//tbl.addEventListener("touchstart", this, false);
    	
		var sliderObj = new Slider(document.getElementById(wkContainer), 0, boxWidth);

	}
	if(document.getElementById(wkContainer))
	{
		objImage = new Array()
		boxWidth = document.getElementById(wkContainer).clientWidth;

		for(i=0;i<imgArr.length;i++)
		{
			if(!scWidth[i]) scWidth[i] = 0;
			preloadIMG(i);
		}
	}
    
}

// MOUSE CONTROLLER
function mvTable(evt) 
{
    evt = (evt) ? evt : ((window.event) ? window.event : "");
    var elem = (evt.target) ? evt.target : evt.srcElement;
    /*
    // Ereignis					evt.type 
    // HTML-Element 			elem.tagName
    // Maustaste (button) 		evt.button 
    // Maustaste (which)		evt.which 
    // ctrlKey					evt.ctrlKey 
    // shiftKey					evt.shiftKey 
    // altKey					evt.altKey 
    // keyCode					evt.keyCode 
    // clientX/clientY			evt.clientX / evt.clientY 
    // pageX/pageY				evt.pageX 	/ evt.pageY 
    // screenX/screenY			evt.screenX / evt.screenY 
    // Position (x/y)			evt.x 		/ evt.y
    */
    
    doMedia(elem.id)
    
	actMousePos = evt.x;
	
	// CHECK FOR FUTURE POS
	var scrollL = (tableWidth-boxWidth)+100;
	var mouseP = evt.x / (boxWidth);
	
	nPos = Math.round(scrollL * mouseP *-1);
	
	add = Math.round(nPos/3);
	
	//if(nPos < (scrollL/2)) nxPos = nPos + add;
	//else nxPos = nPos - add;

	nxtTablePos = nPos
	
	if(actTablePos != nxtTablePos && checkPos == false)
	{
		// CALL MOVING FUNC
		// FOR NON-TOUCHPANEL - CLIENTS
		movePics();
	}
}
function doMedia(elem)
{
	var pic_det = elem.split("_");
    var pic_num = parseInt(pic_det[1]);
    
    if(imgArr[pic_num])
    {
		var snd = sndArr[pic_num];
		var txt = txtArr[pic_num];
	}
	else
	{
		txt = welcomeText;
		snd = '';
	}
	
	// neue texte für alle overs
	document.getElementById('welcome_text').innerHTML = txt;
	
	player = document.getElementById('snd');
	// sound erlaubt und sound noch aus oder bereits anderer 
	if(playSnd == true && (playingSnd =='' || playingSnd != snd))
	{
		player.src = snd;
		player.load();
    	player.play();
    	playingSnd = snd;
    }
}
// MOVMENT CONTROLLER
function movePicsOnTouch(ePos)
{
	// move this to Moving-Function
	// MOVE  PICS FOR TOUCHPANEL-DEVICES
	max = 0;
	min = (boxWidth - tableWidth) // * -1
	
	ePos += diff;
	
	if(ePos > max) ePos = max;
	if(ePos < min) ePos = min;
	
	//addMSG('<p>mv: '+ePos+'</p>','secretc');
	/* SPEED */
	//if(ePos > 0 && ePos > eSpeed) eSpeed+=1;
	//else if(ePos < 0 && ePos < eSpeed) eSpeed -=1;
	
	if(ePos != 0)
	{
		//actTablePos += eSpeed;
		document.getElementById(wkTable).style.marginLeft = ePos;
	}
	tblPos = ePos;
	window.setTimeout("movePicsOnTouch("+ePos+")", 10);
}
function movePics()
{
	// move this to Moving-Function
	// ZIEL AUSRECHNEN
	checkPos = true;
	
	xstep = Math.round((nxtTablePos - actTablePos)/18);
	actTablePos += xstep;
	
	document.getElementById(wkTable).style.marginLeft = actTablePos;
	
	//addMSG('mv: '+actTablePos,'secretc');
	
	if(actTablePos != nxtTablePos) window.setTimeout("movePics()", 12);
	else checkPos = false;
	
}
// SOUND CONTROLLER
function changeSnd(id)
{
	player = document.getElementById('snd')
	if(playSnd == 1) 
	{
		playSnd = 0;
		if(player.src) player.pause();
	}
	else 
	{
		playSnd = 1;
		if(playingSnd != '') player.play();
	}
	var sndButcss = new Array('off','on');
	window.status = id+'.'+sndButcss[playSnd];
	document.getElementById(id).className = sndButcss[playSnd];
}

function preloadIMG(i)
{
    // hidden Boxes FOR PRELOADING IMGS
    // PARAMS TO HTML TAG: PAIR LIKE ARTTRIB,VALUE
    divParams = new Array();
    divParams[0] = new Array('id','testdiv_'+i);
    divParams[1] = new Array('class','tdBoxBlnd');
    genElem('body',"div",divParams);

    // create an image object
    objImage[i] = new Image();
    // set what happens once the image has loaded
    objImage[i].onLoad=measurePic(i);
    // preload the image file
    objImage[i].src=imgArr[i];
}
// TRIGGERED EVENT ON LOADING
// FIND OUT COMPETE WIDTH OF TABLE 
// CONTAINING ALL PICs
function measurePic(id)
{
    // DO THIS FOR EACH ONLOAD EVENT
    if(id<imgArr.length)
    {
         // G E N E R A T E  H T M L
        // hidden Preload box
        imgParams = new Array();
        imgParams[0] = new Array('id','testpic_'+id);
        imgParams[1] = new Array('src',imgArr[id]);
        genElem('testdiv_'+id,'img',imgParams);
        
        useArr[id] = imgArr[id];
    }
	// CHECK IF ALL LOADED ARE AVAILIBLE  
    numOfEmpty = imgArr.length;
    for(o=0; o<imgArr.length;o++)
    {
        if(scWidth[o] == 0)
        {
            // TRY GET PIC-WIDTH IF WAS NOT MEASURED TILL NOW
            scWidth[o] = parseInt(document.getElementById('testpic_'+o).clientWidth);
            h = parseInt(document.getElementById('testpic_'+o).clientHeight)
            if(h > picHeight) picHeight = h;
        }
        else
        {
            // IS ALLREADY LOADED AND MEASURED
            numOfEmpty--;
            if(document.getElementById('testdiv_'+o))
            {
                // remove preloadimg box
                testdiv = document.getElementById('testdiv_'+o);
                document.getElementsByTagName('body')[0].removeChild(testdiv);
            }
        
        }
    }
   // IF ALL ONLOAD EVENTS ARE DONE =>
   if(id >= imgArr.length-1)
   {
        // BUT NOT ALL VALUES FOR WIDTH GATHERED
        // DO RECALL THIS
        if(numOfEmpty>0) window.setTimeout("measurePic("+(id+1)+")", imgArr.length)
        else
        {
            for(k=0; k<scWidth.length; k++)
            {
                // inrcrement width of picture table
                tableWidth += scWidth[k];
            }
            // MOVE ON GENERATE SCROLLING PIC-TABLE
            preparebox(tableWidth);
        }
    }
}
// GENERATE HTML FOR SLIDING TABLE
// G E N E R A T E  H T M L
function preparebox(tableWidth)
{
    // generate HTML-Containments
    needTransition = false;
    
    // table in PicBox forcing pics in one line
    tblParams = new Array();
    tblParams[0] = new Array('id',wkTable);
    tblParams[1] = new Array('cellspacing',0);
    tblParams[2] = new Array('cellpadding',0);
    genElem(wkContainer,"table",tblParams);

    // tableRow
    rowParams = new Array()
    rowParams[0] = new Array('id','scrollRow');
    genElem(wkTable,"tr",rowParams);

    for(m=0; m<useArr.length; m++)
    {
    	// do X-PAram for Pic
    	thisX = 0;
    	for(i=0;i<=m;i++)
    	{
    		thisX += scWidth[i];
    	}
        // TD
        tdParams = new Array();
        tdParams[0] = new Array('id','td_'+m);
        tdParams[1] = new Array('class','tdBox');
        genElem('scrollRow',"td",tdParams);
        
        // BOX with BG-IMG
        w = scWidth[m];
        imgParams = new Array();
        imgParams[0] = new Array('id','pic_'+m);
        //imgParams[1] = new Array('src','javascript:doMedia(\'pic_'+m+'\')');
        imgParams[1] = new Array('style','display:inline-block; width:'+w+'px; height:'+picHeight+'px; background-image:url('+useArr[m]+')');
        genElem('td_'+m,'div',imgParams);
        
        // 
        picbox = document.getElementById('pic_'+m)
        //var picObj = new Pic(picbox);
        
        // DEBUGBOX
        //pParams = new Array();
        //pParams[0] = new Array('id','p_'+m);
        //genElem('td_'+m,'p',pParams);

        makeVisi('pic_'+m)
    }
    tableWidth = document.getElementById(wkTable).clientWidth;
    if(TouchClient == true) movePicsOnTouch(0,0);
}

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 /* GENERATE CSS */
// GENERATE CSS-TRANSITIONS
function makeVisi(elem)
{
    //addMSG(elem)
    document.getElementById(elem).style.webkitAnimationName = 'x-fadeIn';
    document.getElementById(elem).style.webkitAnimationDuration = '2s'
    document.getElementById(elem).style.webkitAnimationIterationCount = '1';
    document.getElementById(elem).style.webkitAnimationTimingFunction= 'linear';

    document.getElementById(elem).addEventListener( 'webkitTransformEnd', stayVisi(elem), false );
}
function makeUnVisi(elem)
{
    //addMSG(elem)
    document.getElementById(elem).style.webkitAnimationName = 'x-fadeOut';
    document.getElementById(elem).style.webkitAnimationDuration = '2s'
    document.getElementById(elem).style.webkitAnimationIterationCount = '1';
    document.getElementById(elem).style.webkitAnimationTimingFunction= 'linear';

    document.getElementById(elem).addEventListener( 'webkitTransformEnd', stayUnVisi(elem), false );
}
function stayVisi(elem)
{
    document.getElementById(elem).style.opacity = 1;
}
function stayUnVisi(elem)
{
    document.getElementById(elem).style.opacity = 0;
}
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 /* GENERATE HTML */
// GENERATE HTML-OBJECTS
function genElem(par,elemType,params)
{
       // REMEIND ! ! ! ! ! ! ! !
      // ON ADDING ELEMENTS TO BODY WHO PROBABLY LACKS HTML-ID
     // IT IS ALLOWED TO PASS HTML-TAGS AS PARENT-OBJECTS
    // BUT WE USE THE FIRST APPERANCE OF GIVEN TAG AS PARENTBOX
    newELEM = document.createElement(elemType);
    id = elemType;
    for(l=0;l<params.length;l++)
    {
        param = params[l];
        addAttrib(param[0],param[1],newELEM);
        if(param[0] == 'id') id = param[1];
    }
    if(document.getElementById(par))
    {
        document.getElementById(par).appendChild(newELEM);
        //addMSG(' ID '+id+'->'+par)
    }
    else if(document.getElementsByTagName(par)[0])
    {
        document.getElementsByTagName(par)[0].appendChild(newELEM);
        //addMSG(' TAG '+id+'->'+par)
    }
   // else addMSG(' - NO NO '+id+'->'+par,'secretc')
}
// GENERATE HTML-OBJ-ATTRIBUTES
function addAttrib(att,val,par)
{
    var nAttrib = document.createAttribute(att);
    nAttrib.nodeValue = val;
    par.setAttributeNode(nAttrib);
}
// BEING VERBOSE
function addMSG(value,mbox)
{
    nid = Math.round(Math.random()*100000)
    pid = 'p_'+nid;

    newP = document.createElement("span");
    addAttrib('id',pid,newP);
    addAttrib('style','display:inline-block; margin-left:12px; border:1px solid grey; background-color:#eaeaea; padding:3px;',newP);
    document.getElementById(mbox).appendChild(newP);

    if(document.getElementById(pid))
    {
        document.getElementById(pid).innerHTML = value;
    }
}