AndrewDryga/header.tpl

## header.tpl
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>{{$title}}</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="{{$description}}" />
    <link rel="shortcut icon" href="/images/favicon.ico" />
	<link rel="stylesheet" type="text/css" href="/css/main.css" />
    {{IF $videos}}<link rel="stylesheet" type="text/css" href="/css/videos.css" />{{END}}
    <meta name="google-site-verification" content="ylXpLfTMpsYwjaB0uSkVsYLbXFaywL7wsa7xqJl6tDw" />
    <script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    <script type="text/javascript" language="javascript" src="/scripts/scripts.js"></script>
</head>
<body>
<div id="header-container">
    <h1><a href="/">oStudy</a></h1>
    <ul>
        <li{{IF $index}} class="active"{{END}}><a href="/">{{$lang_about}}</a></li>
        <li{{IF $videos}} class="active"{{END}}><a href="/videos/list.html">{{$lang_videos}}</a></li>
        <li{{IF $faq}} class="active"{{END}}><a href="/faq.html">{{$lang_help}}</a></li>
        <li{{IF $contacts}} class="active"{{END}}><a href="/contacts.html">{{$lang_contacts}}</a></li>
        <li class="language-selector">
            <a id="language"><img src="{{$current_language_flag}}" width="16" height="11" /> {{$current_language_name}}</a>
            <ul>
                {{BEGIN optional_language}}<li><a href="/language_{{$id}}.html"><img src="{{$flag}}" width="16" height="11" /> {{$name}}</a></li>{{END}}
            </ul>
        </li>
    </ul>
</div>

## scripts.js
/**
 * Creates auto-scrollable div based on YouTube video player current time.
 *
 * Div is scrolled to link anchor, that keeps a timestamp in a href value, which will be used as scroll target.
 * Example of anchors:
 * <a href="#1">0:01</a>
 * <a href="#31">0:31</a>
 * <a href="#71">1:11</a>
 *
 * @author Andrew Dryga <http://go.dryga.com/email>
 * @param playerContainerSelector Selector for video container (element that holds player)
 * @param scrollableContainerSelector Selector for scrollable container (for ex. div with overflow-y: scroll)
 */
var YouTubeAutoScrolledSubtitles = function(playerContainerSelector, scrollableContainerSelector) {
    // Link to player container
    var player = $(playerContainerSelector).get(0);
    // Selector for continer that will be scrolled
    var containerSelector = scrollableContainerSelector;
    // Link to continer that will be scrolled
    var container = $(containerSelector);
    // Sive current point to dont call scroll several times
    var scrollToTimePosition;

    // This function scrolls container to current position
    var scroller = function() {
        var time = Math.round(player.getCurrentTime());

        if (time > 0 && scrollToTimePosition != time) {
            var anchor = $(containerSelector + " > a[name=" + time + "]");
            if (anchor.length) {
                scrollToTimePosition = time;
                container.animate({
                    scrollTop: anchor.data('absoluteDistanceFromTop') - container.offset().top
                }, 1000);
            }
        }
    }

    // Preparing data for scroll, savind absolute anchors position from top
    var prepareAnchors = function() {
        $(containerSelector + " > a").each(function() {
            $(this).data('absoluteDistanceFromTop', $(this).offset().top);
        });
    };

    // Start scrolling
    var scroll = function () {
        var scrollerInterval = setInterval(function() {
            if (player.getPlayerState() == 1) {
                scroller();
            }
        }, 500);
    }

    // Starting scroller
    prepareAnchors();
    // Start scroll
    scroll();

};

## video.tpl
{{include('../private/Templates/header.tpl')}}

<script type="text/javascript" type="text/javascript">
	// YouTube API Required function
	function onYouTubePlayerReady() {
		YouTubeAutoScrolledSubtitles("#video-container", "#text-container");
	}

	// document.onReady
	$(document).ready(function() {
		var params = {
			allowScriptAccess: "always",
			bgcolor: "#FFF",
			'wmode': 'opaque',
			allowFullScreen: "true"
		};
		swfobject.embedSWF("http://www.youtube.com/v/{{$video_id}}?modestbranding=1&enablejsapi=1&fs=1&showsearch=0&showinfo=0&iv_load_policy=3", "video-container", "500", "375", "8", null, null, params, null);
	});
</script>

<div id="content-container">
    <div class="column">
        <h3><a href="/videos/list.html">{{$lang_video}}</a> / {{$title}}</h3>
        <div id="video-container">{{$lang_noplayer}}. {{$lang_directlink}} <a href="http://www.youtube.com/watch?v={{$video_id}}">YouTube</a>.</div>
    </div>

    <div class="column last">
        <h3>{{$lang_subtitles}}</h3>

        <div id="text-container">
            <div>
				{{$video_description}}
            </div>

            {{BEGIN subtitles}}
			<a name="{{$seconds}}">{{$timestamp}}</a>
            <div>
				{{$text}}
            </div>
            {{END}}
        </div>
    </div>
</div>

{{include('../private/Templates/footer.tpl')}}
	/**
	* Creates auto-scrollable div based on YouTube video player current time.
	*
	* Div is scrolled to link anchor, that keeps a timestamp in a href value, which will be used as scroll target.
	* Example of anchors:
	* <a href="#1">0:01</a>
	* <a href="#31">0:31</a>
	* <a href="#71">1:11</a>
	*
	* @author Andrew Dryga <http://go.dryga.com/email>
	* @param playerContainerSelector Selector for video container (element that holds player)
	* @param scrollableContainerSelector Selector for scrollable container (for ex. div with overflow-y: scroll)
	*/
	var YouTubeAutoScrolledSubtitles = function(playerContainerSelector, scrollableContainerSelector) {
	// Link to player container
	var player = $(playerContainerSelector).get(0);
	// Selector for continer that will be scrolled
	var containerSelector = scrollableContainerSelector;
	// Link to continer that will be scrolled
	var container = $(containerSelector);
	// Sive current point to dont call scroll several times
	var scrollToTimePosition;

	// This function scrolls container to current position
	var scroller = function() {
	var time = Math.round(player.getCurrentTime());

	if (time > 0 && scrollToTimePosition != time) {
	var anchor = $(containerSelector + " > a[name=" + time + "]");
	if (anchor.length) {
	scrollToTimePosition = time;
	container.animate({
	scrollTop: anchor.data('absoluteDistanceFromTop') - container.offset().top
	}, 1000);
	}
	}
	}

	// Preparing data for scroll, savind absolute anchors position from top
	var prepareAnchors = function() {
	$(containerSelector + " > a").each(function() {
	$(this).data('absoluteDistanceFromTop', $(this).offset().top);
	});
	};

	// Start scrolling
	var scroll = function () {
	var scrollerInterval = setInterval(function() {
	if (player.getPlayerState() == 1) {
	scroller();
	}
	}, 500);
	}

	// Starting scroller
	prepareAnchors();
	// Start scroll
	scroll();

	};
	{{include('../private/Templates/header.tpl')}}

	<script type="text/javascript" type="text/javascript">
	// YouTube API Required function
	function onYouTubePlayerReady() {
	YouTubeAutoScrolledSubtitles("#video-container", "#text-container");
	}

	// document.onReady
	$(document).ready(function() {
	var params = {
	allowScriptAccess: "always",
	bgcolor: "#FFF",
	'wmode': 'opaque',
	allowFullScreen: "true"
	};
	swfobject.embedSWF("http://www.youtube.com/v/{{$video_id}}?modestbranding=1&enablejsapi=1&fs=1&showsearch=0&showinfo=0&iv_load_policy=3", "video-container", "500", "375", "8", null, null, params, null);
	});
	</script>

	<div id="content-container">
	<div class="column">
	<h3><a href="/videos/list.html">{{$lang_video}}</a> / {{$title}}</h3>
	<div id="video-container">{{$lang_noplayer}}. {{$lang_directlink}} <a href="http://www.youtube.com/watch?v={{$video_id}}">YouTube</a>.</div>
	</div>

	<div class="column last">
	<h3>{{$lang_subtitles}}</h3>

	<div id="text-container">
	<div>
	{{$video_description}}
	</div>

	{{BEGIN subtitles}}
	<a name="{{$seconds}}">{{$timestamp}}</a>
	<div>
	{{$text}}
	</div>
	{{END}}
	</div>
	</div>
	</div>

	{{include('../private/Templates/footer.tpl')}}