$(document).ready(function(){

   /* SET PANEL APPEARANCE */
    $('.imgColor').hide();
    $('.yearBG').css({'opacity':'0'}, 0);
    $('#infoPanel').css({'opacity' : '0.7'});
    $('#infoText').children().hide().filter('#text_UD').show();

    /* DECLARE VARIABLES */
   var saSeries = ['CSI', 'V2C', 'CxB', 'nxt'];
   var saCities = ['NY', 'SP', 'LS', 'TSD', 'SHK', 'BK'];
   var oEdition;
   var oSerie;
   var oCity;
   var nColumnWidth = 190;
   var nRowHeight = 75;
   var nSpeed = 650;

    var showLogo = function(target){
        target.find('.imgColor').show();
    };
    var hideLogo = function(target){
        target.find('.imgColor').hide();
    };

    var moveSerie = function(target, dist){
        //target.find('.imgColor').stop().animate({
        target.stop().animate({
            top: dist
        }, nSpeed);
    };
    var moveCity = function(target, dist){
        target.stop().animate({
            right: dist
        }, nSpeed);
    };

    var fadeBG = function (target, value, factor){
        target.find('.yearBG').stop().animate({
            'opacity' : value
        },(nSpeed*factor));
    }

    var showInfo = function (infoID){
        $('#infoText').children().hide();
        $('#text_' + infoID).show();
    }

   /* EDITIONS */
   for (var i=0; i<saSeries.length; i++){
       for (var j=0; j<saCities.length; j++){

            //console.log('i = ' + i + ' , j = ' + j);

            // compile edition id
            oEdition = $('#' + saSeries[i] + '-' + saCities[j]);
            oYearImg = $('#y_' + saSeries[i] + '-' + saCities[j]);
            // only continue if the edition exists:
            if(!oEdition.css('color')){
                //break;
            }

            // store serieID and cityID in edition:
            oEdition.data('serieID', i);
            oEdition.data('cityID', j);
            oEdition.data('yearID', oYearImg);
            //console.log('serieID = ' + oEdition.data('serieID') + ', cityID = ' + oEdition.data('cityID'));

            // define initial position:
            oYearImg.css({
                'left': (i*nColumnWidth),
                'top':  (j*nRowHeight)
            });
            oEdition.css({
                'left': (i*nColumnWidth),
                'top':  (j*nRowHeight)
            });

            // on hover: highlight + show info
            oEdition.hover(function(){
                var sSerieID = $(this).data('serieID');
                var sCityID = $(this).data('cityID');
                showLogo($('#' + saSeries[sSerieID]));
                showLogo($('#' + saCities[sCityID]));
                moveSerie($('#' + saSeries[sSerieID]), (sCityID*nRowHeight+60));
                moveCity($('#' + saCities[sCityID]), (680-sSerieID*nColumnWidth));
                fadeBG($(this).data('yearID'), 0.7, 2.5);
                showInfo(saSeries[sSerieID] + '-' + saCities[sCityID]);
            } , function(){
                var sSerieID = $(this).data('serieID');
                var sCityID = $(this).data('cityID');
                hideLogo($('#' + saSeries[sSerieID]));
                hideLogo($('#' + saCities[sCityID]));
                moveSerie($('#' + saSeries[sSerieID]), 0);
                moveCity($('#' + saCities[sCityID]), 0);
                fadeBG($(this).data('yearID'), 0, .3);
            });

       }
    }

    /* SERIES */
    for (var i=0; i<saSeries.length; i++){
        // compile serie id:
        oSerie = $('#' + saSeries[i]);
        oSerie.data('serieID', i);
        // postion:
        oSerie.css({
            'left': (i*nColumnWidth+20)
        });
        // highlight on hover:
        oSerie.hover(function(){
           var serieID = $(this).data('serieID');
           showLogo($(this));
           showInfo(saSeries[serieID]);
        }, function(){
           hideLogo($(this));
        });
    }

    /* CITIES */
    for (var j=0; j<saCities.length; j++){
        // compile city id:
        oCity = $('#' + saCities[j]);
        // postion:
        oCity.css({
            'top': (j*nRowHeight+10)
        });
        // highlight on hover:
        oCity.hover(function(){
           showLogo($(this));
        }, function(){
           hideLogo($(this));
        });
    }

    /* UD HOME */
    $('#bannerLogo').hover(function(){
        showInfo('UD');
    });
	
});