var preload     = new Array;
var periodic;
var thumb       = 1;
var thumbs      = 20;
var url         = null;
var j           = 0;
var close       = '<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>';

function changeThumb(id, vid)
{
    if (j === thumbs) {return;}
    document.getElementById(id).src = url + (j+1) + '.jpg';
    j = (j+1) % thumbs;
}

function startThumbRotation(id, src)
{
    var arr = id.split('-');
    var vid     = arr[1];
    thumb       = arr[2];
    thumbs      = arr[3];
    url         = tmb_url + src.match(/\/\d+\/\d+\/\d+\//);

    if (thumbs <= 1) { return; }

    for (var i=1; i<thumbs; i++) {
        if (i === (thumbs+1)) { break; }

        preload[i]      = new Image;
        preload[i].src  = url + i + '.jpg';
    }

    periodic = window.setInterval("changeThumb('" + id + "','" + vid + "')", 500);
}
        
function endThumbRotation(id, src)
{
    window.clearInterval(periodic);
    
    $("img#" + id).attr('src', url + thumb + '.jpg');
}

function addLike(el)
{
	if ($(el).find('.rated').length) {
		return;
	}

	var video_id = $(el).attr('id').match(/video-(.*)/)[1];
	var percent  = $(el).data('percent');
	var likes	 = $(el).data('likes');
	var rated    = $(el).data('rated');
	
	var up	 	= '<button data-id="' + video_id + '" data-rating="1" class="btn btn-xs rate"><span class="glyphicon glyphicon-thumbs-up"></span></button> ';
	var down 	= '<button data-id="' + video_id + '" data-rating="0" class="btn btn-xs rate"><span class="glyphicon glyphicon-thumbs-down"></span></button>';
	var html	= '<div id="rating-video-' + video_id + '" class="overlay rating">' + up + down;
	
	if (percent > 49) {
		html	= html + ' <span class="label label-success">' + percent + '% (' + likes + '/' + rated + ')</span></div>';
	} else {
		html	= html + ' <span class="label label-danger">' + percent + '% (' + likes + '/' + rated + ')</span></div>';
	}
	
	$(el).find('.video-thumb').append(html);
}

function delLike(el)
{
	$(el).find('.rating').remove();
}

function handleSearch() {
    var action_url  = '';
    var keyword     = $("#search-query").val();
    keyword         = keyword.trim(); // doesn't work in IE
    
    if (search_url == 'sef') {
  		keyword 	= keyword.toString().toLowerCase().trim().replace(/[^\w\s-]/g, '').replace(/[\s_-]+/g, '-').replace(/^-+|-+$/g, '');  		  		
  		window.location = $("#search-form").attr('action') + keyword + '/';
  		return false;
    }

    if (keyword == '') {
        alert('Please enter your search keyword!');
        $("#search-query").focus();
        return false;
    } else {
        $("#search-form").submit();
    }
}

function handleAutocomplete(keyCode) {
    switch (keyCode) {
        case 38:
            if ($("li.hovered").index() == 0) {
                return;
            }
            
            if (!$("li.hovered")) {
                $("li.hovered").eq(0).removeClass('hovered');
            } else {
                $("li.hovered").eq(0).removeClass('hovered').prev().addClass('hovered');
            }
            
            break;
        case 40:
            // key down, last element
            if ($("li.hovered").index() == $("#autocomplete ul li").length-1) {
                return;
            }
            
            if ($("li.hovered").length == 0) {
                $("#autocomplete ul li").eq(0).addClass('hovered');
            } else {
                $("li.hovered").eq(0).removeClass('hovered').next().addClass('hovered');
            }
            
            break;
        case 13:
            // we submit the form on enter
            var selected = $("li.hovered").text();
            if (selected != '' && selected != undefined) {
                $("#search-query").val(selected);
            }
           handleSearch();
            break;
        case 27:
            // clear and hide the autocomplete on ESC
            $("#autocomplete").html('');
            $("#autocomplete").hide();
            break;
    }
}

$(document).ready(function() {
	if ($(window).width() < 769) {
		$("ul.nav-user").removeClass('nav-stacked');
		$("button.btn-search").html('<span class="glyphicon glyphicon-chevron-down"></span>');
	}
	
	$(window).resize(function() {
		if ($(window).width() < 769) {
			$("ul.nav-user").removeClass('nav-stacked');
			$("button.btn-search").html('<span class="glyphicon glyphicon-chevron-down"></span>');
		} else {
			$("ul.nav-user").removeClass('nav-stacked').addClass('nav-stacked');
		}
	});
	
	$("button.btn-search").click(function() {
		var id			= $(this).data('target');
		
		if ($("div#" + id).is(':visible')) {
			$(this).html('<span class="glyphicon glyphicon-chevron-down"></span>');
			$("div#" + id).slideUp();
		} else {
			$(this).html('<span class="glyphicon glyphicon-chevron-up"></span>');
			$("div#" + id).slideDown();
		}
	});

    $("ul.videos").on({
        mouseenter: function() {
            startThumbRotation($(this).attr('id'), $(this).attr('src'));
        },
        mouseleave: function() {
            endThumbRotation($(this).attr('id'), $(this).attr('src'));
        }
    }, "img[id^='preview-']");

    $("ul.videos").on({
        mouseenter: function() {
            $(this).find('.report').show();
            addLike($(this));
        },
        mouseleave: function() {
            $(this).find('.report').hide();
            delLike($(this));
        }
    }, ".thumbnail");

    $("ul.videos").on('click', '.rate', function(e) {
  		e.preventDefault();
    
  		var video_id = $(this).data('id');
  		var rating	 = $(this).data('rating');

        $.ajax({
            url: base_url + '/ajax.php?s=video_rate_simple',
            cache: false,
            type: "POST",
            dataType: "json",
            data: {video_id: video_id, rating: rating},
            success: function(response) {
                if (response.status == '1') {
              		var html = '<div class="overlay rated">' + response.code + '</div>';
              		
              		$("#rating-video-" + video_id).remove();
              		$("#video-" + video_id).find('.video-thumb').append(html);
                } else {
              		alert(response.msg);
                }
            }
        });    
    });
    
    $("textarea[name='comment']").keyup(function(){
        $("#remaining").text((500 - $(this).val().length));
    });
    
    $("a.report,a[id^='report-']").click(function(e) {
        e.preventDefault();

		$("#report .modal-content").load($(this).attr('href'), function() {
			$("#report .modal").modal('show');
		});	
    });
    
    $("#report").on('click', '#report-send', function(e) {
  		e.preventDefault();
  		
        var reason = $("select[name='reason']").val();
        var message = $("textarea[name='message']").val();
        var video_id = $("#report input[name='video_id']").val();
        var verify = $("input[name='verify']").val();

        $.ajax({
            url: base_url + '/ajax.php?s=video_report',
            cache: false,
            type: "POST",
            dataType: "json",
            data: {video_id: video_id, reason: reason, message: message, verify: verify},
            success: function(response) {
                if (response.status == '1') {
              		$("#report-response").removeClass('alert-danger').addClass('alert-success');
              		$("#report-response").html(close + response.msg);
              		$("#report-send").hide();
                } else {
                    $("#report-response").html(close + response.msg);
                    $("#report-response").removeClass('alert-success').addClass('alert-danger');
                }
              	
              	$("#report-response").show();
            }
        });  		
    });    
    
    $(document).mouseup(function(e) {
        var container = $("#autocomplete");
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            container.html('');
            container.hide();
        }
    });
            
    $("input#search-query").keydown(function(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode == 13 || keyCode == 38 || keyCode == 40 || keyCode == 27) {
            handleAutocomplete(keyCode);
            return false;
        }
    });

    $("input#search-query").keyup(function(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode != 13 && keyCode != 38 && keyCode != 40 && keyCode != 27) {
            var q = $("#search-query").val();
            $.get(base_url + '/suggest.php?s=' + q + '&c = ' + Math.random(), function(response) {
                if (response != '') {
                    $("#autocomplete").html(response);
                    $("#autocomplete").show();
                } else {
                    $("#autocomplete").hide();
                }
            });
        }
    });
            
    $(document).on('mouseenter', 'li.complete', function() {
        $("li.complete").removeClass('hovered');
        $(this).addClass('hovered');
    });

    $(document).on('click', 'li.complete', function(e) {
        $("input#search-query").val($(this).text());
        handleSearch();
    });

    $("button[id='search-submit']").click(function(e) {
        e.preventDefault();
        handleSearch();
    });    
	
	if ($('div#age-check').length) {
        $("#age-check").load(base_url + '/ajax.php?s=age_check', function() {
            $("#age-check").modal('show');
        });
	}
});