$(document).ready(function(){
						   
var pic_id = 0;
var prevpic = 2;
var curpic = 1;
var nextpic = 0;
var buf_pic;
//
  var eng = false;
//

function htmlReplace(str){
	var quote = /«/g;
	str = str.replace(quote, '«');
	quote = /»/g;
	str = str.replace(quote, '»');
	quote = /&/;
	str = str.replace(quote, '&');
	quote = /"/g;
	str = str.replace(quote, '"');
	quote = /'/g;
	str = str.replace(quote, '\'');
	quote = /</g;
	str = str.replace(quote, '<');
	quote = /&gt;/g;
	str = str.replace(quote, '>');
	return(str);
}

function setBufPic(pic){
	var bg = 'url(' + buf_pic + ') top right no-repeat';
  	$('div.buffpi').css('background', bg);
}

function setPic(pic, pics){
	var bg = 'url(' + pics[pic]['url'] + ') top right no-repeat';
		$('div.fpi').hide(10, function(){
			$('img.subpic').remove();
			$('div.fpi_link').empty();
			$('div.imgtxt').hide();
			$('div.imgtxt span.title').empty();
			$('div.imgtxt span.sub').empty();
			$('div.imgtxt span.sub_gr').empty();
      //square
      var w = $('div.imgtxt').width();
      var h = $('div.imgtxt').height();
	  var l = 200;
      var nl = parseInt($('div.imgtxt_bg').css('left'));
      if(!nl.isNaN){
         l = nl + w/2 - h/2;
      }
	  if(h <= 37){
        h = 45;
     }
      //square loader coordinates
      var t = (h-37)/2;

      $('div.imgtxt_bg').animate({
            width: h,
            height: h,
            left: l
          }, 'slow', 'linear', function(){
              //change picture
              $("#txtloader").css({
                top: t,
                left: t
              });
              $("#txtloader").show();
              $('div.fpi').css('background', bg);
        			$('div.fpi').show(10, function(){
       				$('div.imgtxt').css(
        					{
        						width: pics[pic]['width'],
        						height: pics[pic]['height'],
        						top: pics[pic]['top'],
        						left: pics[pic]['left']
        					}
        				);
        				if(eng){

        					$('div.imgtxt span.title').html(pics[pic]['title_en']);
        					$('div.imgtxt span.sub_gr').html(pics[pic]['subtitle_green_en']);
        					$('div.imgtxt span.sub').html(pics[pic]['subtitle_en']);
if(pics[pic]['imglink'] != '') {         					
$('div.fpi_link').append('<a href="' + pics[pic]['imglink'] + '" title="' + pics[pic]['imglinktitle_en'] + '"><div class="img_link"></div></a>');
}        					
var nexttitle = htmlReplace(pics[nextpic]['title_en']);
        					var prevtitle = htmlReplace(pics[prevpic]['title_en']);
        					$('div.imgtxt span.left').attr('title', prevtitle);
        					$('div.imgtxt span.right').attr('title', nexttitle);
        				} else {
        					$('div.imgtxt span.title').html(pics[pic]['title']);
        					$('div.imgtxt span.sub_gr').html(pics[pic]['subtitle_green']);
        					$('div.imgtxt span.sub').html(pics[pic]['subtitle']);
if(pics[pic]['imglink'] != '') {         					
$('div.fpi_link').append('<a href="' + pics[pic]['imglink'] + '" title="' + pics[pic]['imglinktitle'] + '"><div class="img_link"></div></a>');
}        					
var nexttitle = htmlReplace(pics[nextpic]['title']);
        					var prevtitle = htmlReplace(pics[prevpic]['title']);
							$('div.imgtxt span.left').attr('title', prevtitle);
        					$('div.imgtxt span.right').attr('title', nexttitle);
        				}
        				$('div.imgtxt_bg').show();
        				setTimeout(function(){
        				  $("#txtloader").hide();
        				  $('div.imgtxt_bg').animate({
                    		width: pics[pic]['width'],
          					height: pics[pic]['height'],
          					top: pics[pic]['top'],
          					left: pics[pic]['left']
                  		}, 'slow', 'linear', function(){
                   			$('div.imgtxt').show();
                  		});
				
	               	}, 500);
	
							if(pics[pic]['subpics'] !== undefined){
				  			//add sub-pictures
							for(i=0; i<pics[pic]['subpics'].length; i++){
								if(pics[pic]['subpics'][i]['url'] !== undefined){
									//set default values if necessary
									if(pics[pic]['subpics'][i]['top'] == undefined){
										pics[pic]['subpics'][i]['top'] = '0px';
									}
									if(pics[pic]['subpics'][i]['left'] == undefined){
										pics[pic]['subpics'][i]['left'] = '0px';
									}
									if(pics[pic]['subpics'][i]['width'] == undefined){
										pics[pic]['subpics'][i]['width'] = '10px';
									}
									if(pics[pic]['subpics'][i]['height'] == undefined){
										pics[pic]['subpics'][i]['height'] = '10px';
									}
									$('div.image').append('<img class="subpic" src="' + pics[pic]['subpics'][i]['url'] + '" style="position:relative; width:' + pics[pic]['subpics'][i]['width'] +'; height:' + pics[pic]['subpics'][i]['height'] + '; top:' + pics[pic]['subpics'][i]['top'] + '; left:' + pics[pic]['subpics'][i]['left'] +';"/>');
								}
							}
						}
						
        			});//show()

          });   //animate img title

		}); //hide()
		
}; //setPic()

function getPicsJSON(id){
  //$.getJSON('/fileadmin/template2008/testjson.php?id=' + id, function(data){
  $.getJSON('/typo3/ext/a32frontpic/getpics.php?id=' + id, function(data){
   var pics = new Array();
    for(i=0; i<data.length; i++){
      		var pic_info = new Array();
			pic_info['url'] = data[i].url;
			pic_info['imglink'] = data[i].imglink;
			pic_info['imglinktitle'] = data[i].imglinktitle;
			pic_info['title'] = data[i].title;
      		pic_info['subtitle_green'] = data[i].subt_green + '&nbsp;';
			pic_info['subtitle'] = data[i].subt;
			pic_info['imglinktitle_en'] = data[i].imglinktitle_en;
			pic_info['title_en'] = data[i].title_en;
			pic_info['subtitle_green_en'] = data[i].subt_green_en;
			pic_info['subtitle_en'] = data[i].subt_en;
			pic_info['top'] = data[i].top;
			pic_info['left'] = data[i].left;
			pic_info['width'] = data[i].width;
			pic_info['height'] = data[i].height;
			if((eng && pic_info['title_en']=='' && pic_info['subtitle_green_en']=='' && pic_info['subtitle_en']=='') || (!eng && pic_info['title']=='' && pic_info['subtitle_green']=='' && pic_info['subtitle']=='')){
				pic_info['width'] = '60px';
				pic_info['height'] = '20px';
			}
			if(data[i].pics !== undefined){
				pic_info['subpics'] = new Array();
				for(j=0; j<data[i].pics.length; j++){
					pic_info['subpics'][j] = new Array();
					pic_info['subpics'][j]['url'] = data[i].pics[j].url;
					pic_info['subpics'][j]['width'] = data[i].pics[j].w;
					pic_info['subpics'][j]['height'] = data[i].pics[j].h;
					pic_info['subpics'][j]['top'] = data[i].pics[j].y;
					pic_info['subpics'][j]['left'] = data[i].pics[j].x;
				}
			}
			pics[pics.length] = pic_info;
    }
    buf_pic = pics[curpic]['url'];
    setPic(curpic, pics);
	});
}//getPicsJSON()
  
	getPicsJSON(pic_id);
	
	$('span.right').click(
		function(){
		  	setBufPic();
      		getPicsJSON(--pic_id);
		}
	);
	$('span.left').click(
		function(){
		  	setBufPic();
			getPicsJSON(++pic_id);
		}
	);
});