<?php

class Intense_Hover_Box extends Intense_Shortcode {

    function __construct() {
        parent::__construct();

        global $intense_visions_options;

        $this->title = __( 'Hover Box', 'intense' );
        $this->description = __( 'The hover box shortcode allows you to add a little style to your images with seven different hover transitions. You can control all of the settings and colors for each of the seven different styles.', 'intense' );
        $this->category = __( 'Layout', 'intense' );
        $this->show_preview = true;
        $this->preview_wrapper_start = '<div style="max-width: 600px;">';
        $this->preview_wrapper_end = "</div>";
    }

    function shortcode( $atts, $content = null ) {
        require_once INTENSE_PLUGIN_FOLDER . '/inc/Intense-photosource.php';
        
        global $intense_visions_options;
        extract( shortcode_atts( $this->get_shortcode_defaults( null, $atts ), $atts ) );
        
        intense_add_script( 'intense.hover.box' );

        $title_color = intense_get_plugin_color( $title_color );
        $name_color = intense_get_plugin_color( $name_color );
        $linktext_color = intense_get_plugin_color( $linktext_color );
        $linkhover_color = intense_get_plugin_color( $linkhover_color );
        $background_color = intense_get_plugin_color( $background_color );
        $border_color = intense_get_plugin_color( $border_color );
        $divider_color = intense_get_plugin_color( $divider_color );
        $background_center_color = intense_get_plugin_color( $background_center_color );

        if ( !is_numeric( $border_width ) ) {
            $border_width = '16';
        }

        if ( is_numeric( $image ) ) {
            $image_id = $image;
        } else if ( !empty( $image ) ) {
            $image_url = $image;
        }

        if ( !empty( $image_id ) ) {
            $photo = Intense_Photo_Source::get_wordpress_photo( $image_id, $size );
            $photo_url = $photo['url'];
        } else if ( !empty( $image_url ) ) {
            $photo_url = $image_url;
        }

        $wordpress_size = Intense_Photo_Source::get_wordpress_size( $size );

        $width = $wordpress_size["width"];
        $height = $wordpress_size["height"];
        $random = rand();
        $itemClass = "ch-item-" . $random;
        $imgClass = "ch-img-" . $random;
        $infoClass = "ch-info-" . $random;
        $gridClass = "ch-grid-" . $random;
        $backClass = "ch-info-back-" . $random;
        $wrapClass = "ch-info-wrap-" . $random;
        $thumbClass = "ch-thumb-" . $random;
        $liClass = "ch-li-" . $random;
        $borderWidth = ( $border_width * 2 );
        $halfHeight = $height / 2;
        $innerHeight = $height - $borderWidth;
        $innerWidth = $width - $borderWidth;
        $setuplink = "";
        $pointer = "";

        if ( is_numeric( $background_image ) ) {
            $background_imageid = $background_image;
        } else if ( !empty( $background_image ) ) {
            $background_image_url = $background_image;
        }

        if ( !empty( $background_imageid ) ) {
            $photo = Intense_Photo_Source::get_wordpress_photo( $background_imageid, $size );            
            $background_image_url = $photo['url'];
        } else if ( !empty( $background_image_url ) ) {
            $background_image_url = $background_image_url;
        }

        if ( $type == 'style' ) {
            $h3Height = $halfHeight;
        } elseif ( $type == 'style2' ) {
            $h3Height = $height / 3;
        } elseif ( $type == 'style3' ) {
            $h3Height = $halfHeight;
        } elseif ( $type == 'style4' || $type == 'style5' || $type == 'style6' ) {
            $h3Height = $innerHeight / 4;
        } else {
            $h3Height = $innerHeight / 3;
        }

        if ( $type == 'style' && isset( $background_opacity ) && isset( $background_color ) ) {
            $background_style = "background: " . intense_get_rgb_color( $background_color, $background_opacity ) . " !important; " . intense_get_rgb_color( $background_color ) . "\9 !important;";
        } else {
            $background_style = "";
        }

        if ( !empty( $link ) ) {
            $pointer = " style='cursor:pointer;'";
        }

        $id = ( !empty ( $id ) ) ? $id : '';

        $output = '';

        if ( !empty( $linkurl_rel ) ) $linkurl_rel = ' rel="' . $linkurl_rel . '"';

        $setuplink = "<a" . $linkurl_rel . " href='" . $linkurl . "' target='" . $linkurl_target . "'" . ( isset( $linktext_color ) ? " style='color: " . $linktext_color . "; color: " . intense_get_rgb_color( $linktext_color, '70' ) . " !important;'" : "" ) . ">" . $linktext . "</a>";

        $output .= "<div id='outer-" . $gridClass . ( !empty( $id ) ? ' ' . $id : '' ) . "' class='intense-hover-box" . ( !empty( $class ) ? ' ' . $class : '' ) . "' data-box-type='" . $type . "' data-aspect-ratio='" . ( $width / $height ) . "' data-border-width='" . $borderWidth . "' data-random='" . $random . "' data-background-rgb='" . intense_get_rgb_color( $background_color, $background_opacity ) . "' data-border-rgb='" . intense_get_rgb_color( $border_color, '80' ) . "'>";
        $output .= "<ul id='hover-" . $gridClass . "' class='ch-grid " . $gridClass . "'>";
        $output .= "<li class='" . $liClass . "'>";

        if ( $type == 'style' || $type == 'style2' ) {
            $output .= "<div id='" . $itemClass . "'" . $pointer . " class='ch-item-" . $type . " " . $imgClass . "'>";
            $output .= "<div class='ch-info-" . $type . " " . $infoClass . "'>";
            $output .= "<h3" . ( isset( $title_color ) ? " style='color: " . $title_color . ";'" : "" ) . ">" . $title . "</h3>";
            $output .= "<p" . ( isset( $name_color ) ? " style='color: " . $name_color . ";'" : "" ) . ">" . $name . " " . $setuplink . "</p>";
            $output .= "</div>";
            $output .= "</div>";
        } elseif ( $type == 'style3' ) {
            $output .= "<div id='" . $itemClass . "'" . $pointer . " class='ch-item-" . $type . "'>";
            $output .= "<div class='ch-info-" . $type . "'>";
            $output .= "<h3" . ( isset( $title_color ) ? " style='color: " . $title_color . ";'" : "" ) . ">" . $title . "</h3>";
            $output .= "<p" . ( isset( $name_color ) ? " style='color: " . $name_color . ";'" : "" ) . ">" . $name . " " . $setuplink . "</p>";
            $output .= "</div>";
            $output .= "<div class='ch-thumb-" . $type . " " . $imgClass . "'></div>";
            $output .= "</div>";
        } elseif ( $type == 'style4' || $type == 'style5' || $type == 'style6' ) {
            $output .= "<div id='" . $itemClass . "'" . $pointer . " class='ch-item-" . $type . " " . $imgClass . "'>";
            $output .= "<div class='ch-info-wrap-" . $type . " " . $wrapClass . "'>";
            $output .= "<div class='ch-info-" . $type . " " . $infoClass . "'>";
            $output .= "<div class='ch-info-front-" . $type . " " . $imgClass . "'></div>";
            $output .= "<div class='ch-info-back-" . $type . " " . $backClass . "'>";
            $output .= "<h3" . ( isset( $title_color ) ? " style='color: " . $title_color . ";'" : "" ) . ">" . $title . "</h3>";
            $output .= "<p" . ( isset( $name_color ) ? " style='color: " . $name_color . ";'" : "" ) . ">" . $name . " " . $setuplink . "</p>";
            $output .= "</div>";
            $output .= "</div>";
            $output .= "</div>";
            $output .= "</div>";
        } elseif ( $type == 'style7' ) {
            $output .= "<div id='" . $itemClass . "'" . $pointer . " class='ch-item-" . $type . "'>";
            $output .= "<div class='ch-info-" . $type . " " . $infoClass . "'>";
            $output .= "<div class='ch-info-front-" . $type . " " . $imgClass . "'></div>";
            $output .= "<div class='ch-info-back-" . $type . " " . $backClass . "'>";
            $output .= "<h3" . ( isset( $title_color ) ? " style='color: " . $title_color . ";'" : "" ) . ">" . $title . "</h3>";
            $output .= "<p" . ( isset( $name_color ) ? " style='color: " . $name_color . ";'" : "" ) . ">" . $name . " " . $setuplink . "</p>";
            $output .= "</div>";
            $output .= "</div>";
            $output .= "</div>";
        }

        $output .= "</li>";
        $output .= "</ul>";
        $output .= "</div>";

        if ( !empty( $link ) ) {
            $output .= "<script>";
            $output .= "jQuery(function($) {";
            $output .= "$(document).ready( function() {";
            $output .= "$('#" . $itemClass . "').click( function(e) {";

            if ( $link_target == '_blank' ) {
                $output .= "window.open('" . $link . "');";
            } else {
                $output .= "location.href = '" . $link . "';";
            }

            $output .= "});";
            $output .= "});";
            $output .= "});";
            $output .= "</script>";
        }

        $output .= "<style>";

        if ( $type == 'style' ) {
            $output .= "#" . $itemClass . ".ch-item-" . $type . " {";
            $output .= "box-shadow: inset 0 0 0 " . $border_width . "px " . intense_get_rgb_color( $border_color, '60' ) . ", 0 1px 2px rgba(0,0,0,0.1);";
            $output .= "}";
            $output .= "#" . $itemClass . ".ch-item-" . $type . ":hover {";
            $output .= "box-shadow: inset 0 0 0 1px " . intense_get_rgb_color( $border_color, '10' ) . ", 0 1px 2px rgba(0,0,0,0.1);";
            $output .= "}";
            $output .= ".ch-item-" . $type . " { border-radius: " . $border_radius . " !important; }";
            $output .= ".ch-info-" . $type . " { border-radius: " . $border_radius . " !important; }";
        } elseif ( $type == 'style2' ) {
            $output .= "#" . $itemClass . ".ch-item-" . $type . " {";
            $output .= "box-shadow: inset 0 0 0 0 " . intense_get_rgb_color( $background_color, $background_opacity ) . ", inset 0 0 0 " . $border_width . "px " . intense_get_rgb_color( $border_color, '80' ) . ", 0 1px 2px rgba(0,0,0,0.1);";
            $output .= "}";
            $output .= ".ch-item-" . $type . " { border-radius: " . $border_radius . " !important; }";
            $output .= ".ch-info-" . $type . " { border-radius: " . $border_radius . " !important; }";
        } elseif ( $type == 'style3' ) {
            $output .= ".ch-item-" . $type . " { border-radius: " . $border_radius . " !important; }";
            $output .= ".ch-thumb-" . $type . " { border-radius: " . $border_radius . " !important; }";
            $output .= ".ch-thumb-" . $type . ":after { border-radius: " . $border_radius . " !important; }";
            $output .= ".ch-info-" . $type . " { border-radius: " . $border_radius . " !important; " . ( isset( $background_imageid ) ? "background: " . $background_color . " url(" . $background_image_url . ") !important;" : "background: " . $background_color . " !important;" ) . " }";
            $output .= ".ch-info-" . $type . " p a { border-radius: " . $border_radius . " !important; }";
        } elseif ( $type == 'style4' || $type == 'style5' || $type == 'style6' ) {
            $output .= "." . $backClass . " {";
            $output .= ( isset( $background_imageid ) ? "background: " . $background_color . " url(" . $background_image_url . ") !important;" : "background: " . $background_color . " !important;" );
            $output .= "}";
            $output .= "." . $wrapClass . " {";
            $output .= "top: " . $border_width . "px !important;";
            $output .= "left: " . $border_width . "px !important;";
            $output .= "background: " . $background_center_color . " !important;";
            $output .= "box-shadow: 0 0 0 " . $border_width . "px " . intense_get_rgb_color( $border_color, '20' ) . ", inset 0 0 3px " . intense_get_rgb_color( $background_center_color, '80' ) . " !important;";
            $output .= "}";
            $output .= "." . $wrapClass . ":hover {";
            $output .= "box-shadow: 0 0 0 0 " . intense_get_rgb_color( $border_color, '80' ) . ", inset 0 0 3px " . intense_get_rgb_color( $background_center_color, '80' ) . " !important;";
            $output .= "}";
            $output .= ".ch-item-" . $type . " { border-radius: " . $border_radius . " !important; }";
            $output .= ".ch-info-wrap-" . $type . " { border-radius: " . $border_radius . " !important; }";
            $output .= ".ch-info-" . $type . " { border-radius: " . $border_radius . " !important; }";
            $output .= ".ch-info-" . $type . " > div { border-radius: " . $border_radius . " !important; }";
        } elseif ( $type == 'style7' ) {
            $output .= "." . $backClass . " {";
            $output .= ( isset( $background_imageid ) ? "background: " . $background_color . " url(" . $background_image_url . ") !important;" : "background: " . $background_color . " !important;" );
            $output .= "}";
            $output .= ".ch-item-" . $type . " { border-radius: " . $border_radius . " !important; }";
            $output .= ".ch-info-" . $type . " > div { border-radius: " . $border_radius . " !important; }";
        }

        $output .= "." . $imgClass . " {";
        if ( isset( $photo_url ) ) {
            $output .= "background-image: url(" . $photo_url . ");";
        }
        $output .= "background-repeat: no-repeat;";
        $output .= "}";
        $output .= "." . $infoClass . " {";
        $output .= $background_style;
        $output .= "}";

        if ( isset( $divider_color ) ) {
            $output .= "." . $infoClass . " p {";
            $output .= "border-top: 1px solid " . intense_get_rgb_color( $divider_color, '50' ) . " !important;";
            $output .= "}";
        }

        if ( isset( $linkhover_color ) ) {
            $output .= "." . $infoClass . " p a:hover {";
            $output .= "color: " . $linkhover_color . " !important;";
            $output .= "color: " . intense_get_rgb_color( $linkhover_color, '70' ) . " !important;";
            $output .= "}";
        }

        $output .= "</style>";

        return $output;
    }
}
