var listLinkTextCollapsed = "Click here for an explanation";
var listLinkTextExpanded = "Click here to close";
var ajaxReq = false;
var allPhones;
var origPhonesOrder = new Array();


$(function(){
    $("#main-container").pngFix();
    $("#main-phones div.phone").each(initializePhoneOrder);
    $("#main-phones div.phone input").click(comparePhoneHandler);
    $("#feature-list a").click(featureClick);
    $("#reset").click(resetFilters);
    $("#main-phones div.disabled").each(function(){
        disablePhone(this);
    });
    $(".compare-button a").click(comparePhones);

    $("#phones-comparison td, #phones-comparison th").hover(hoverOverComparisonTable,hoverOutComparisonTable);
    $("#phones-comparison td, #phones-comparison th").click(clickComparisonTable);
    
    $("#phone-images #thumbs a").click(phoneThumbClick);
    $(".collapsible-box a").toggle(collapseBox, expandBox);
    allPhones = $('#main-phones div.phone').clone();
    
    $('#main-phones .phone').each(function(){
        var id = $(this).attr("id");
        origPhonesOrder.push(id);

    });
    
    checkCompareSlots();
    /* Fix Autocomplete issues */
    $("#main-phones div.phone input").each(function(){
//        this.checked = false;
    });
    $("#compare li").each(function(){
        if($(this).hasClass("empty")==false)
        {
            this.compareCbx.checked = true;
        }
    });
    applyInitialFilters();
	$("#main-phones div.phone input ").each(function(){
	        if(this.checked)
			addToCompare(this);
	
	});
});

function applyInitialFilters(){
    ajaxFilterRequest();
}

function hoverOverComparisonTable(){
    if($(this).attr("headers") != null && $(this).hasClass("row") == false && $(this).hasClass("empty") == false)
    {            
        var index = $(this).parent().find("td").index(this);
            
        if(index < 0)
        {
            index = $(this).parent().find("th").index(this) - 1;                
        }
            
        if(index >= 0)
        {
            $(this).parent().parent().find("tr").each(function(){                    
                if($(this).hasClass("firstRow") == false && $(this).hasClass("secondRow") == false)
                {
                    $($(this).find("td").get(index)).addClass("selected");
                }
            });
            $(this).css("cursor","pointer");
        }              
    }
}
function hoverOutComparisonTable(){
    if($(this).attr("headers") != null)
    {
        $(this).parent().parent().find(".selected").removeClass("selected");
        $(this).css("cursor","default");
    }
}

function clickComparisonTable(){
    var index = $(this).parent().find("td").index(this);
    if(index < 0)
    {
        index = $(this).parent().find("th").index(this) - 1;                
    }
        
    if(index>=0)
    {
        var handsetUrl = $($(this).parent().parent().find(".firstRow a").get(index)).attr("href");
        if(handsetUrl != undefined && handsetUrl.length > 0)
            window.location = handsetUrl;
    }
}

function phoneThumbClick(){
    var li = $(this).parent();
    if(li.hasClass("active") == false)
    {
        var ul = li.parent();
    
        ul.find(".active").removeClass("active");
        li.addClass("active");
        
        var index = ul.find("li").index(li);
        
        var ulImgs = $("#phone-images #big-images");
        var liImg = $(ulImgs.find("li").get(index));
        
        ulImgs.find(".visible").css("z-index",1).fadeOut("slow",function(){
            $(this).removeClass("visible");
        });
        liImg.css("z-index",2).fadeIn("slow",function(){
            $(this).addClass("visible");
        });
    }
    return false;
}

function expandBox(){
    var anch = $(this);
    $(anch.attr("href")).slideDown("slow",function(){
        anch.text(listLinkTextExpanded);
        anch.addClass("open");
    });    
}

function collapseBox(){
    var anch = $(this);
    $(anch.attr("href")).slideUp("normal",function(){
        anch.text(listLinkTextCollapsed);
        anch.removeClass("open");
    }); 
}

function featureClick(){
    if(ajaxReq == false && $(this).parent().hasClass("disabled")==false)
    {
        ajaxReq = true;
        
        var cbx = $(this).find("input").get(0);
        if(cbx.checked)
        {
            cbx.checked = false;
            $(this).parent().removeClass("active");
        }
        else
        {
            cbx.checked = true;
            $(this).parent().addClass("active");
        }
        
        // AJAX Request
        showOverlay('ajaxFilterRequest();');
        
    }
    
    return false;
}

function ajaxFilterRequest(){
    var filters = new Array();        
    $("#feature-list input").each(function(){
        if(this.checked == true)
        {
            filters.push($(this).val());
        }
    });
    
    if(filters.length == 0)
        $("#reset a").fadeOut("normal");
    else
        $("#reset a").fadeIn("slow");
        
    // Send AJAX Request and Handle Result
    handleAjaxRequest(filters);
}



function handleAjaxRequest(filters){
    //sortHandsets(origPhonesOrder);
    var url = "./?view=Eircomnet&callback=?";
    $.each(
        filters,
        function( intIndex, objValue ){
            url = url + "&filter=" + objValue;
        });
    
    $.getJSON(url, function(data){
        
        var sortedPhoneList = new Array();
        var phoneList = "";
        $.each(data.matched, function(i, item){
            sortedPhoneList.push(item);
            enablePhone($('#'+item));
        });
        $.each(data.nonmatched, function(i, item){
            sortedPhoneList.push(item);
            disablePhone($('#'+item));
            phoneList += ".phone#"+item + " , ";
        });
        sortHandsets(sortedPhoneList);
        //          disableFilters(data.filters);
        enableAllFilters();
        $.each(data.filters, function(i,item){
            disableFilter(item);
        });
          
        /*var nonMatchingPhones = $(phoneList);
        var matchingPhones = $('#main-phones .phone:not(.disabled)');
        $('#main-phones .phone').each(function(){
            var id = $(this).attr("id");
        });
        
        $('#main-phones').html('');
         
        $('#main-phones').append(matchingPhones);
        
        if (filters.length > 0){
            $('#main-phones').append(nonMatchingPhones);
        }
        */
        $("#main-phones div.phone input").click(comparePhoneHandler);
        
        removeOverlay();
        ajaxReq = false;
    
    });
        
}

function resetFilters(){
   

    $("#feature-list input").each(function(){
        this.checked = false;
        $(this).parent().parent().removeClass("active");
    });
    
    // Show All Handsets
    $("#main-phones .phone").each(function(){
        if($(this).hasClass("disabled") == true)
        {
            enablePhone(this);
        //$(this).insertBefore("#main-phones .phone:eq("+this.originalIndex+")");
        }
    });
    $("#compare li").each(function(){
        if($(this).hasClass("empty")==false)
        {
            this.compareCbx.checked = true;
        }
    });
    //    
    $(this).find("a").fadeOut("normal");
    var filters = new Array();        
    $("#feature-list input").each(function(){
        if(this.checked == true)
        {
            filters.push($(this).val());
        }
    });
    handleAjaxRequest(filters);
    
    return false;
}

function setFilters(){
/*var filters = new Array();
    $("#feature-list input").each(function(){
        if(this.checked == true)
        {
            filters.push($(this).val());
        }
    });
    handleAjaxRequest(filters);
*/
}

function disablePhone(phone){
    
    if(phone instanceof Array)
        phone = phone.get(0);
    
    if($(phone).hasClass("disabled") == true && $(phone).find(".phone-overlay").length > 0)
        return;
    
    $(phone).addClass("disabled");
    
    var w = $(phone).innerWidth();
    var h = $(phone).innerHeight() - 1;
    
    var overlay = $(document.createElement("div")).addClass("phone-overlay");
    overlay.css({
        background: "white none",
        width: w,
        height: h,
        position: "absolute",
        top: "0px",
        left: "0px",
        zIndex: 2,
        opacity: 0.7
    });
    $(phone).append(overlay);
    
    //var parent = $(phone).parent();
    //parent.append(phone);
    
    overlay.fadeTo("slow",0.7);
    
}

function enablePhone(phone){
    if(phone instanceof Array)
        phone = phone.get(0);
        
    if($(phone).hasClass("disabled") == false)
        return;
        
    $(phone).find(".phone-overlay").fadeOut("slow",function(){
        $(this).remove();
    });
    $(phone).removeClass("disabled");
}

function enablePhoneNoFade(phone){
    if(phone instanceof Array)
        phone = phone.get(0);

    if($(phone).hasClass("disabled") == false)
        return;

    $(phone).find(".phone-overlay").fadeOut("slow",function(){
        $(this).remove();
    });
    $(phone).removeClass("disabled");
}

function showAllHandsets(){
    // Show All Handsets
    $("#main-phones .phone").each(function(){
        if($(this).hasClass("disabled") == true)
        {
            enablePhone(this);            
            $(this).insertBefore("#main-phones .phone:eq("+this.originalIndex+")");
        }
    });
}

function initializePhoneOrder(){
    this.originalIndex = $(this).parent().find(".phone").index(this);    
}

function showOverlay(code){
    var w = $("#main-phones").innerWidth()-2;
    var h = $("#main-phones").innerHeight();
    
    var overlay = $(document.createElement("div")).addClass("ajax-overlay");
    overlay.css({
        background: "white none",
        position: "absolute",
        width: w,
        height: h,
        opacity: 0,
        left: "0px",
        top: "0px",
        zIndex: 3
    });
    $("#main-phones").append(overlay);
    
    overlay.fadeTo("normal",0.8,function(){
        if(code != null && code.length>0)
            eval(code);
    });
}

function removeOverlay(){
    $("#main-phones .ajax-overlay").fadeOut("slow",function(){
        $(this).remove();
    });
    $("#main-phones div.phone input").click(comparePhoneHandler);
    
    $("#compare li").each(function(){
        if($(this).hasClass("empty")==false)
        {
            this.compareCbx.checked = true;
        }
    });    
}

function comparePhoneHandler(){
    if(this.checked == true)
    {
        var li = $("#compare li.empty:first");
        if(li.length == 1)
        { 
            li.find("input").val($(this).parents("div.phone").get(0).id);
            var img = $(this).parents("div.phone").find("img").clone();
            img.attr("title",img.attr("alt")).css({
                display: "none"
            });
            this.compareLi = li.get(0);
            this.compareLi.compareCbx = this;
            li.append(img);
            img.fadeIn("normal");
            li.removeClass("empty");
            
            var anch = $(document.createElement("a"));
            anch.text("Remove?").attr("href","#").css({
                display: "none"
            });
            li.append(anch);            
            anch.fadeIn();
            
            anch.click(function(){
                removeComparePhone($(this).parent().get(0));return false;
            });
            
            checkCompareSlots();
        }        
    }else{
        removeComparePhone(this.compareLi);
    }
}

function addToCompare(phone){
    if(phone.checked == true)
    {
        var li = $("#compare li.empty:first");
        if(li.length == 1)
        { 
            li.find("input").val($(phone).parents("div.phone").get(0).id);
            var img = $(phone).parents("div.phone").find("img").clone();
            phone.compareLi = li.get(0);
            phone.compareLi.compareCbx = phone;
            li.append(img);
            li.removeClass("empty");
            
            var anch = $(document.createElement("a"));
            anch.text("Remove?").attr("href","#").css({
                display: "none"
            });
            li.append(anch);            
            anch.fadeIn();
            
            anch.click(function(){
                removeComparePhone($(phone).parent().get(0));return false;
            });
            
            checkCompareSlots();
        }        
    }else{
        removeComparePhone(phone.compareLi);
    }
}


function removeComparePhone(li){
    li.compareCbx.checked = false;
    $(li).find("img,a").fadeOut("fast",function(){
        $(this).parent().addClass("empty");
        $(this).remove();
        checkCompareSlots();
    });
    $(li).find("input").val("");
}

function checkCompareSlots(){
    if($("#compare li.empty").length == 0)
    {
        $("#main-phones input").each(function(){
            if(this.checked == false)
            {
                $(this).attr("disabled","disabled");
                $(this).next("label").css("color","#AAAAAA");
            }
        });
    }
    else
    {
        $("#main-phones input").each(function(){
            $(this).removeAttr("disabled");
            $(this).next("label").css("color","#FFFFFF");
        });
    }
    
    if($("#compare li.empty").length > 2)
    {
        $(".compare-button a").fadeTo("normal",0.5).css("cursor","default");
    }
    else
    {
        $(".compare-button a").fadeTo("normal",1).css("cursor","pointer");
    }
}

function comparePhones(){
    if($("#compare li.empty").length <= 2)
    {
        $(this).parents("form").submit();
    }    
}

function disableFilter(value)
{
    var input = $("#feature-list").find("input[value="+value+"]");
    input.checked = false;
    input.disabled = true;
    input.parents("li").addClass("disabled");
}
function enableFilter(value)
{
    var input = $("#feature-list").find("input[value="+value+"]");
    input.checked = false;
    input.disabled = false;
    input.parents("li").removeClass("disabled").removeClass("active");
}

function enableAllFilters()
{
    $("#feature-list input").each(function(){
        $(this).disabled = false;
        $(this).parents("li").removeClass("disabled");
    });
}

function sortHandsets(order){
    var overlay = $('#main-phones .ajax-overlay');
    var sortedHandsets = $(document.createElement("div"));
    sortedHandsets.append(overlay);

    $.each(
        order,
        function( intIndex, objValue ){
            var thisHandset = $('#main-phones #' + objValue);
            sortedHandsets.append(thisHandset);
            

        }
        );
    $('#main-phones').html('').append(sortedHandsets);

}