Cufon.replace('.line',{fontFamily:'HeliosCondC',hover:true});
/* Cufon.replace('.line',{fontFamily:'HeliosCondBlackC',hover:true}); */

$(document).ready(function(){

    $(".image2").fadeTo(0, 0);
    $(".line1_2").fadeTo(0, 0);
    $(".line2_2").fadeTo(0, 0);
    $(".line3_2").fadeTo(0, 0);
        
    $.getJSON('/2d/js/scenario.json', function($scenario) {
        var $fState = 0;
        var $currentPosition = 0;

        function nextStep(p) {
            p++;
            if (p > $scenario['count']) {
                p = 1;
            }
            
            return p;
        }
        
        function fadeLine(line_id, $position) {
            var $line1From;
            var $line1To;
            if ($position==0) {
                $line1To = $scenario[1]['line'][line_id-1];
            } else {
                $line1From = $scenario[$position]['line'][line_id-1];
                $line1To = $scenario[nextStep($position)]['line'][line_id-1];
            }
            
//            addToLog($position+"|"+$line1From+"|"+$line1To);
            if ($line1From!=$line1To) { 
                if ($fState%2==0) {
                    $(".line"+line_id+"_2").css("left", "500px");
                    $(".line"+line_id+"_1").css('z-index', '0');
                    $(".line"+line_id+"_2").css('z-index', '100');

                    $(".line"+line_id+"_1").html($line1From);
                    $(".line"+line_id+"_2").html($line1To);
                    Cufon.replace('.line'+line_id,{fontFamily:'HeliosCondC',hover:true});
                    
                    $(".line"+line_id+"_1").fadeTo(500, 0);
                    
                    $(".line"+line_id+"_2").fadeTo(500, 1);
                    $(".line"+line_id+"_2").animate({left: "0px"}, 600 );
                }
                else {
                    $(".line"+line_id+"_1").css("left", "500px");
                    
                    $(".line"+line_id+"_1").css('z-index', '100');
                    $(".line"+line_id+"_2").css('z-index', '0');

                    $(".line"+line_id+"_1").html($line1To);
                    $(".line"+line_id+"_2").html($line1From);
                    Cufon.replace('.line'+line_id,{fontFamily:'HeliosCondC',hover:true});
        
                    $(".line"+line_id+"_1").fadeTo(500, 1);
                    $(".line"+line_id+"_1").animate({left: "0px"}, 600 );
                    
                    $(".line"+line_id+"_2").fadeTo(500, 0);
                    
                }
            }
            
        }
        
        function fadeImage($position) {
            var $imageFrom;
            var $imageTo;

            if ($position==0) {
                $imageTo = $scenario[1]['image'];
            } else {
                $imageFrom = $scenario[$position]['image'];
                $imageTo = $scenario[nextStep($position)]['image'];
            }
            
            if ($imageFrom!=$imageTo) {
                if ($fState%2==0) {
                    $(".image1").css('background-image', 'url('+$imageFrom+')');
                    $(".image2").css('background-image', 'url('+$imageTo+')');

                    $(".image1").fadeTo(1500, 0);
                    $(".image2").fadeTo(1500, 1);
                }
                else {
                    $(".image1").css('background-image', 'url('+$imageTo+')');
                    $(".image2").css('background-image', 'url('+$imageFrom+')');
        
                    $(".image1").fadeTo(1500, 1);
                    $(".image2").fadeTo(1500, 0);
                }
            }
        }
        
        function initSlider() {
            fadeImage(0, 0);
            
            fadeLine(1, 0);

            $("#slider").oneTime(500, function(i) {
                fadeLine(2, 0);

                $("#slider").oneTime(500, function(i) {
                    fadeLine(3, 0);
                });

            });
            
            $fState++;
            $currentPosition=1;
            start();
        }


       
        
        function start() {
            $("#slider").everyTime($scenario['delay'], function(i) {
                fadeLine(1, $currentPosition);
    
                $("#slider").oneTime(500, function(i) {
                    fadeLine(2, $currentPosition);
    
                    $("#slider").oneTime(500, function(i) {
                        fadeImage($currentPosition);           
                        fadeLine(3, $currentPosition);

                        $fState++;
                        $currentPosition=nextStep($currentPosition);
                        
                    });
    
                });
    
    
            });
        }
        
        
        initSlider(); 
        
        
        function addToLog(text) {
            $("#extra").append("<br/>"+text);
        } 



    });
    
});